UI Case study
DURATION
ROLE
TOOLS
- Figma: Mid and high fidelity prototyping
- Balsamiq: Low fidelity prototyping
- Draw.io: Flow charts and task analysis
Background
Student Together is a study project part of my training at Career Foundry. The UX part was provided beforehand with elements like user stories and features requirements.
The problem
Students who might be juggling with their studies, jobs and families might face a lack of motivation. How can we bring back the enthusiasm of learning something new?
The solution
We leverage a community of like-minded students who can share, discuss and test their knowledge. Generating dynamism through the group and developing a trustworthy environment can help students to better face their daily struggles.
Who are we designing for?
User flows
The brief already included user stories. Therefore, a good starting point has been to visualise how these user stories would turn into actions.
Later on, these steps would create screens and specific interactions.
Wireframes
I thought of Student Together as a collaboration tool. Since I have been using Discord and Slack for some time I considered that these platforms could provide a good starting point to create the main structure.
The grid system
In order to maintain consistency and facilitate responsive design creation, I implemented the following grid system.
The mobile-first approach will ensure that we focus on the most important elements required by our users.
Evolution of the wireframes
Before jumping to adding colour and iconography, I progressed from low fidelity to mid-fidelity. You can see below the evolution of the chat page. The first iteration had the menu button in the top-right while the menu itself was vertical on the left.
It was counter intuitive, so I tested a position at the bottom left side. That created a floating open menu button which took a lot of screen estate.
The decision was made to move the button in the top left, at the header level to avoid any confusion.
Moodboards
We now have the structure and organisation. Let’s dig a little into the looks, especially typography and colours.
From the very beginning, I thought of Student Together as a safe space where people can feel free to share and test their skills without facing the “that’s a dumb question” .
It was essential to bring touches of dynamism to make sure our users stayed engaged in the learning process (I didn’t want them to fall asleep on their mobile!).
I created two mood boards conveying that idea of dynamism and a favourable environment for studying.
The choice
I went for the second mood board, mainly because I was concerned that too many bright colours would create visual fatigue and make it difficult to consume content.
Typeface
Both mood boards use the typeface Urbanist to convey modernism while maintaining an accessible style. We will use this for all headings and our logo.
To maintain legibility for the main text, I used Roboto. A very easy to read typeface that pairs well with our headings selection.
Colors
While testing my mood board’s original palette, I realised that the accent colour was too powerful and somewhat a bit aggressive.
I tried a new pattern based on the same hues. After a few iterations, I came with the following colour palette.
Style guide
To maintain consistency across multiple devices, I create a Style Guide detailing the does and don’ts of UI elements, imagery. I went a step further and indicated UI specifications for key components like research result entries.
You can visualise the complete style guide by clicking the snapshot below.
Tap the picture to download the file
UI Prototype
Each iteration was followed by a prototype based on my wireframes. They helped me better assess how the user could interact with my design and how they would navigate between the screens.
You can have a view of the latest revision below.
Designing for different devices
While Student Together was created with a mobile-first approach, it was clear to me that bigger screens would make browsing through content easier.
While maintaining my grid system, I generated responsive designs for larger breakpoints like tablets in landscape or portrait mode, 24″ screens,…
Learnings
Mobile-first VS the rest of the world
The brief focused on a mobile-first approach, it is a common trend today. Though, reflecting on how our students would most likely use the service, I believe that a desktop-first approach could have been beneficial.
Anyhow, it is the kind of question you answer beforehand with a complete UX research phase.
Small rivers make big oceans
From the very beginning, I created components that I compiled on one page in my Figma document. Naming them and grouping them every time took quite some time and could be perceived as cumbersome.
Although, doing so makes things way easier and shorter when comes to the time to create the style guide and generate the design handoff documentation.
Next up
While working on the colour scheme, I created a few iterations with darker shades of blue. They can be perfect for a dark mode in the future. Especially if I want to focus on reducing visual fatigue.
Willing to maintain our users engaged, I want to add more micro-interactions elements. Notably when it comes to curating their own resources.
Thank you for reading this far!
More work from me
