top of page

STUDY TOGETHER

 RESPONSIVE WEB APP

MY ROLE

UX/UI Designer

DELIVERABLES

User Flows
Mood Board
Style Guide
Wireframes -Mobile, Tablet, and Desktop
Mockups
Prototype
Handoff Package

Study Together Mockup.png

TOOLS

Figma
Mural 

TIMELINE

February - April 2023

Project Brief

OBJECTIVE

Connect students online to facilitate peer-to-peer learning, support, feedback, and motivation.

CONTEXT - THE 5 Ws

Who: Students who'd like to connect with fellow students in their field or related fields.
 
What: Responsive web app that allows students to connect, share, and discuss their interests.
 
When: For use between classes or during free time when students with similar interests can help one another with their tasks.
 
Why: This web app will enhance the learning experience of students by connecting them with peers who share similar interests and have varying experiences. It's a fun and interactive way to get inspired and collaborate.

User Persona - Alex

Meet Alex! 
Alex is one busy guy. He is currently enrolled in an online course for his history major and he's working part-time as a retail store manager.

User Flows

Wireframes

FIRST ITERATION

Early designs were centered around establishing the navigation and structure of Study Together. Early screens included:
 
Splash
Account Creation
Friend Select
Home
Profile
Chat

iPhone 14 Splash.png
iPhone 14 Acct Creation.png
iPhone 14 Acct Personal Info.png
iPhone 14 Friend Search.png
iPhone 14 Home Screen2.png
iPhone 14 Profile.png
iPhone 14 Messenger.png
iPhone 14 Chat.png

Wireframes

SECOND ITERATION

This iteration offers further clarity into the design of Study Together. The navigation bar has been implemented along with text and placeholders. 

ST_Splash_Midfidelity.png
ST_Acct Creation_Midfidelity.png
ST_Acct Personal Info_Midfidelity.png
ST_Friend Search_Midfidelity.png
ST_Home Screen_Midfidelity.png
ST_Profile_Midfidelity.png
ST_Messenger_Midfidelity.png
ST_Chat_Midfidelity.png

Wireframes

FINAL ITERATION

The final iteration of Study Together now has the color scheme and appropriate spacing implemented throughout. 

ST_Splash_01 (1).png
ST_Acct Creation_01.png
ST_Acct Personal Info_Iphone_01 (1).png
ST_Friend Search_Iphone_01 (1).png
ST_Home Screen_Iphone_01 (1).png
ST_Profile_Iphone_01 (1).png
ST_Messenger_Iphone_01 (1).png
ST_Chat_Iphone_01 (1).png

Mood Board

MOOD BOARD

The emphasis is on bright, fun, colors and a feeling of enthusiasm. The app should invoke feelings of motivation and community. The point of Study Together is to help students create their own communities to help them succeed.

Style Guide

FULL GUIDE

Mockups

Conclusion

By the end of the project, I had successfully created a prototype for Study Together. I am proud of how it came together and feel it met and exceeded the criteria laid out in the project brief. 

While I learned a lot from Study Together, I think the top thing is always looking for ways to improve your designs. Inspiration can come from the most unexpected places. 

I am looking forward to my next design adventure!

Thank You!

bottom of page