Study Together App
Design Process
What's the Goal?
The Study Together app was created with the goal of allowing students to quickly find like-minded peers and communicate with them easily and hassle-free to discuss classes and assignments.
​
It is to this end that the Study Together app was designed to be as user-friendly and welcoming as possible.
What did I do?
In my work on the Study Together App, I performed user research and design for the UI and visual aspects of the app as well as the flow and usability of the app. This project was created through the UI for UX Designers Bootcamp with Career Foundry.
Wireframes
Starting the design process on Study Together I knew that I wanted to put emphasis on the parts of the app that would be used the most by a student.
​
Each row on the left indicates a further stage of wireframe development starting from the low-fidelity wireframes at the top and working down to the high-fidelity wireframes with backgrounds and colors present.
​
It is through this process that gradients and color emphasis was added to ease the user into the app. Though these versions do not include it the final mockup includes the logo that I designed for this project.
Mood Board
The mood that I chose for the Study Together app would be something cozy and welcoming. This includes the use of pastel colors and comfortable wood hues and backgrounds. The number of colors was expanded upon for the final product which can be seen in the style guide as well as the final type-face which is close to the one chosen in the mood board.
The emphasis on lighter and darker blues that surround the items of interest came from this version of the mood board and was settled upon as the design language to choose for the whole app.
Mobile Mockups
These mobile mockups and breakpoints came from the later stage of the design process. The breakpoints below are tied to the tablet version of the app. The design process being used was a mobile-first design process wherein the app was designed around mobile-centric use but then expanded to work with tablets and desktop computers. Later on, the final UI and breakpoints can be seen in full with their mockup images on display like the mobile screen mockups above.
Gesture Animation
While creating gesture animations for the app I wanted to create a floaty but responsive interaction that felt satisfying but not too out there. From my design experience, I wanted to make it have a small snap-back when the page was scrolled so that it provides a little bit of entertainment just swiping through results and pages on the app.
Style Guide
The style guide for Study Together includes everything from the typeface and font size used for various buttons to the colors and explanation of imagery used and what impact it would have on the end-user experience. This is the final version of the style guide that I used to design the end product for Study Together.
Full UI with Breakpoints
The final breakpoint renderings for Study Together cover the app being displayed on everything from desktops to tablets and mobile phones. The scaling and information displayed on each breakpoint were seriously considered as the larger the display got the more info you could fit onto the screen and make navigation require fewer and fewer button presses.
​
For the first image, you can see the breakpoints for the homepage shown at all three sizes. once the screen gets up to PC size the amount of information shown starts to take from what would be other pages on the mobile app as the user's screen comfort increases.
Final UI Prototype
Click on the image to access the full interactive prototype.
