MS
Goal
Design a responsive web application where students can study, motivate, and stay connected to their peers everywhere they go.
Role
UX/UI Designer
Tools
Figma
Duration
2 months
Deliverables
Competitive Analysis
User Persona
User Stories
User Flows
Design System
Wireframes
Mockups
Mobile Prototype
Context
An essential element to learning is enthusiasm. Learning can be more engaging and motivating when done together. This responsive web app will do just that: allow students to connect to discuss insights, receive feedback on their assignments, and will enable them to collaborate on projects. This will especially be useful for students who have other part-time duties as well.
WeStudy
Connect with other students, exchange different perspectives, learn, and study together!
Competitive Analysis
Creating a platform that acts as a learning service with social features has to balance learning and social features. Beginning with a competitive analysis, I looked for apps that utilized their communication, search, and study features. I researched Linkedin, Chegg, and Study.com. I liked the way Linkedin presented its app and its communication features. It feels professional without the social features being a great distraction. Chegg and Study.com have great solutions for helping students excel in their studies, and I like the general layout of their landing pages.
Discover
Develop
Moodboard
I created a mood board to establish the look and feel of WeStudy. I wanted to choose bold colors to make it more engaging. Each color represents a feeling I want users to feel while using WeStudy. I chose these images purposely because they made me think of collaboration, working on the go, and enthusiasm, which is the mood I am going for.
Color Palette
When people use WeStudy, I want them to feel confident and bold when connecting with other users. Each color has a specific meaning: Orange represents enthusiasm and excitement to engage users. Blue represents confidence and trust and can be affiliated with communication. To follow brand guidelines, I added green because it represents friendly, welcoming, and reassurance.
HEX: #0F8A84
RGB: 36, 117, 113
HEX: #F18F01
RGB: 241, 143, 1
HEX: #006E90
RGB: 0, 110, 144
HEX: #F6F6F6
RGB: 246, 246, 246
HEX: #F9F9F9
RGB: 249, 249, 249
Imagery
I chose images that showcase how a student and part-time professional would look. Students with backpacks look on the go, and students working on their laptops have online courses. Students working together in photos showcase studying together.
Typography
The typeface I chose for WeStudy is Manrope. It is a sans-serif font style and has excellent readability and legibility.
Manrope
Manrope
Manrope
Icons
I chose icons with lighter weight giving the app a modern feel. The logo was created by combining two icons together. The book represents studying and the two profiles represent togetherness.
UI Elements
User Profile Card - Users can search for other students, viewing their avatar, name, course, and location.
Article Card - These serve as another resource on how to be a better student, i.e., additional tips on improving their study habits.
E-learning - this addresses Alex's goal of wanting to gain marketable skills. Alex’s course is mainly text-based, and with WeStudy, it offers supplemental learning where he can apply skills to projects related to his subject.
Wireframing Breakpoints
The first steps I take to make my designs responsive are to choose the breakpoints at which my designs will break. I decided to follow the bootstrap breakpoint table to determine that.
-
Extra Small devices 375 x 812
-
Small Devices (tablet) 768 x 1024
-
Large devices (desktop) 1440 x 900
Once I've chosen my breakpoints, I start my research into how other websites respond to different breakpoints. Once I've done that, I sketch low fidelity wireframes and work on mid-high fidelity wireframes.
Menu button remains an icon
User profile card expands to fit the width of screen
Articles section shift to the e-learning videos
Menu items are listed out
All elements can be seen and fit next to each other
User Home Page
Landing Page
Images scale to fit the screen
User reviews scale to fit the screen
More subject buttons can be shown now to fit the screen
Menu items are listed out
More subject buttons can be shown now to fit the screen
I proceeded to sketch, iterate, test, and repeat. I conducted 2 rounds of usability testing with both low and high fidelity prototypes and iterated my designs based on my test results.
User Stories & Flows
Referring back to the project brief, I used the user stories provided to start building user flows:
-
"As a new user, I want to create a profile so that other students can find me."
-
“As a new user, I want to find and connect with students studying my subject (or a related subject) so that we may collaborate.
-
“As a frequent user, I want to be able to message other students so that we can problem-solve together.
I created flows for the following tasks:
-
Set up a user profile
-
Engage with other users on your feed
-
Search new users and send a message
Define
User Persona
The project brief provided information on my persona, Alex, so I created a visual to put a face to him and bring him to life.
Our Products
The Latest Designs
Deliver
Our Products
The Latest Designs
Deliver
Thank you for reading!
Reflections
Organization and Efficiency
There were times when I had to edit elements on each artboard manually, and it became tedious because I have 30+ artboards. I had organized my layers initially, but with all the iterating, I found my layers were unorganized again.
At the same time, I was learning how to use Figma and trying to rush the task. It caused me to get lazy and have to fix everything in the end.
I understand now not to rush the process and to organize everything as you go. Also, Figma has this cool feature called components which I can't wait to learn more about on future projects.
Users > Ego
I was worried about the aesthetics of my color palette, and how I was going to incorporate it in my designs, that accessibility went over my head. I realized that I had forgotten to check my color palette for accessibility. Going forward, accessibility will be a priority when deciding on a color palette.