Overview
The project given by my company was to develop a student centered app that would aid students in studying as it can be difficult to get the support, help and encouragement they need, especially when working online.
There has been an increase in students pursuing studies online due to cost effectiveness and flexibility. Another reason was due to COVID when it was near impossible for students to meet in-person.
To fulfill the requirements of the app, I was provided a project brief which included some details about my user persona, context and required features.
Project Aims
The Coursemate app aims to connect students online to facilitate peer-to-peer learning, support, feedback, and motivation.
My Role
Design Thinking Process
I attempted to solve the problem by going through the stages of the design thinking process which would help me to:
Have a better understanding of the problem and come up with possible solutions
Understand our users and their needs
Come up with initial foundational designs which would turn into more complex interactive designs
Empathize
Problem Statement
Students at university and college level 18 years and older struggle to stayed motivated and engaged with their school subjects and get the help they need, especially when juggling their studies with other life matters such as a job, family illness, etc.
Possible Solutions
Coursemate, a web responsive app will allow students to:
Get inspired
Engage with a like-minded student community
when and where they want on any device
Connect with other students in their field to:
Discuss topics
Share insights and support
Receive peer feedback on assignments
Find others willing to collaborate on projects
study in a fun, interactive way
Target Audience
college and university students 18 years and older working on a degree or diploma
Key Insight Derived
Understanding the problem leads to the foundational design of pivotal functions for your app
Understanding my target audience will give me information on how, when and where my users will interact with my app
Define
User Persona
Students at university and college level 18 years and older struggle to stayed motivated and engaged with their school subjects and get the help they need, especially when juggling their studies with other life matters such as a job, family illness, etc.
Key Insight Derived
Having a user persona in mind will keep your designs user-centered → user-centered designs increase customer satisfaction, reduce cost and risk and increase productivity of the design team
A user persona is a great summary of your key target audience’s needs and goals and what they would want in an app
Ideate
User flows
To better understand how our user would interact with our app and to help us visualize what paths our users would take, we created user flows.
User Flow #1- Create a Student Profile
User Flow #2- Search for Students
Design
Low and Mid-fidelity Wireframes
Developing wireframes helped me conceptualize page structure, layout, information architecture, user flow, functionality, and intended behaviors.
Low-Fidelity Mobile Wireframes
We used a mobile-first approach to map out our user flows and decide on the navigation layout using a low-fidelity wireframing kit on Figma to block out shapes and text.
Iterating based on User Feedback
We then tested our low-fidelity prototypes by conducting 6 usability tests both in-person and over Zoom and based on findings, implemented common UI patterns that would better help our users complete main tasks. Examples below:
Mid-fidelity Responsive design for Home screen
Next, we developed mid-fidelity wireframes at different breakpoints.
Visual Design
Afterwards, we focused on establishing a brand identity and a visually appealing design that was both useful and something that users wanted to engage with. We implemented colours, imagery, typography, shapes and icons and continued to follow visual design principles and trends.
Mood board
Afterwards, we focused on establishing a brand identity and a visually appealing design that was both useful and something that users wanted to engage with. We implemented colours, imagery, typography, shapes and icons and continued to follow visual design principles and trends.
Style Guide
This led to the development of a style guide which would help us maintain our brand identity. Check out a sample below:
Click here for full Style Guide
Key Insight Derived
Mood boards make it easy and intuitive to establish brand identity and the style of your app
An excellent way to rationalize to stakeholders why you’re making certain design decisions
Breakpoints are essential in making sure designs look good on a variety of different devices and it’s preferable to keep common elements in similar places as not to break continuity
Mockups are a good way to communicate the app’s visual identity, so stakeholders can see potential issues with style or visual brand before making any decisions
Final Thoughts
Overall, the objective of creating a student centered app that could engage students and allow them to connect to others as well as seek support and encouragement was met.
Along this journey, I was able to utilize and expand my existing UX/UI design set and be introduced to new tools. I got further practice in generating problem statements as well as potential solutions and creating proto-personas, based on the information I was given in the brief to better understand my user’s needs and how to best solve their problem.
I ideated how my user would interact with my app by laying out the fundamental tasks they would want to perform by creating informative user flows in Fig jam, whereas before I had used Google drawings and drawing.io. My user flows this time around were very neat, easy to read and featured a legend which was an improvement to past user flows. These guided my design for my wireframes and prototypes.
During the design process, I used a mood board for the first time to lead my visual direction which was a big help and got further practice creating style guides, creating complex components and applying common UI patterns. I was able to also utilize new methods to create consistency through different breakpoints by incorporating burger menus, reducing image size or cropping. In addition, I discovered new ways to create stunning mockups using Angle and Mockuups Studio plugins in Figma. I also learned how to create animations in Figma using Smart Animate.
I am proud of the end result of my labours and enjoy the community oriented visual design and functionality of the app I created. I’m sure this app would be a useful tool for students anywhere.
Next Steps: 5. Testing
Conduct usability and preference testing and surveys
Iterate designs and prototypes using test and survey results
Implement animations
Create full prototypes for tablet and desktop breakpoints
Bianca Serkhanian
UX /UI Designer
Lets connect!
You can message me or
email me at bserkhanian.design@gmail(dot)com
@2023 Bianca Serkhanian