Smart People — The UI Case Study
Designing a learning experience for young adults (Part 2)
Following my previous post, Smart People — The UX Case Study, I will now present the UI design process for this same application.
You will be going through the following case study outline:
- Problem Statement & Solution
- Mid-Fidelity Wireframes
- Research & Benchmark
- Mood Board & Desirability Test
- Style Tile
- High-Fidelity Wireframes & Prototype
- Microinteractions
- Usability Tests & Next Steps
1. Problem Statement & Solution
A small reminder from our UX case study:
Jennifer, an enthusiastic high school graduate, needs to learn another language while socializing because she wants to be bilingual, but she’s struggling to stay motivated learning by herself, she feels lonely and bored.
How might we help her stay motivated and entertained while learning?
Pain point: Learning a language the traditional way can be boring.
Design Solution
We aim to design a language learning app that feels like a game while keeping it social so the users can practice with each other.
2. Mid-Fidelity Wireframes
Our application connects users with other users of the same interests.
Upon sign up the students have the option to choose which language he/she wants to learn.
The spinning wheel randomly picks its mission, and the users are then randomly teamed with other users. Once the mission has been accepted, the team has 24 hours to finish the task.
Mini-missions, the purpose of the mini-missions is to have the users learn by this pain point: Jennifer finds it challenging to stay motivated and engaged in an online learning app.
3. Research & Benchmark
Since we were a team of three UX/UI designers working on this project, we divided the UI research and benchmark into three themes: Social Networks, Learning Apps/Tools, and Youth Camps Communication.
We scrutinized almost every layout, photography, illustration, color, font, and UI element used to communicate on these three topics.
4. Mood Board & Desirability Test
A mood board is essential to set the tone at the beginning of the project and to define the direction our team wants to take.
When we started to define our project and its users, we first set our mood: a lively, active, and youthful feeling.
Our user, Jennifer, shouldn’t be only looking forward to meeting new people but also to use our fresh and cheerful solution.
Every color palettes, textures, and typography that we selected was a step forward towards this direction: a group of young friends having fun in front of a bright background, colorful language learning books, but also playful typography and iconography.
We measured people’s attitudes toward our mood board and our homepage design with a desirability test: we gave our users a list of 40 product reaction words and asked them to select those that best described what they saw (they only had 5 sec to discover the visuals):
More than half of the users defined our mood board and our first screen as “Young” and “Friendly”. The selected reaction words comforted our team in the mood and color decisions and allowed us to continue our path through the style representation of the app.
5. Style Tile
Defining a project style tile can be done through the display of the designed elements that you used, as a visual reference. What we aimed for was a consistent design identity to facilitate teamwork.
What would be a primary color if there weren’t any secondary colors to enhance it? Our hero color is a mustardy yellow, supported by two fresh colors (magenta, turquoise) and a dark blue that boosts the light of the design elements that are put against it.
The Montserrat font family was chosen for its usability, practicality, and scalability. It is functional and modern, but it does not ignore design aspects and can combine this with a lively and open character that gives it charisma and attractiveness. The result is a sans serif typeface with many variants and various opportunities of use, both in print as well as online, since its also part of Google Fonts.
We represented our main feature, the random mini-missions, through these two UI elements: the Wheel and the Mini-Mission Card. Those components will also be in the center of the spotlight through our micro-interactions all over the app.
6. High-Fidelity Wireframes & Prototype
After defining our mood board and elements of our style tile, our solution began to take shape. With every screen designed, we were affirming its identity and were aiming for a bold message to Jennifer and her peers: yes, one can socialize and have fun while learning a new language.
Smart people’s visual identity isn’t about mimicking a youth summer camp or any mainstream learning app; it’s about listening to one’s affirmed and energetic personality to adapt instead of applying a predefined cast to it.
The following overview of our high-fidelity wireframes shows how our solution can be an open stage to create not only endless learning possibilities but also fun and unforgettable social experiences.
Our solution can be tested through our interactive prototype with the following user scenario:
The user is 18–21 years old, he or she heard about the app and wanted to check it out. He/She wants to sign up to meet new people and to learn Spanish; the aim is to get assigned a mini-mission and a random team.
> https://marvelapp.com/48gb35g
Another way to discover the prototype would be to watch our prototype’s video:
> https://youtu.be/FzSkmA41wAQ
7. Microinteractions
As I said earlier in this case study, our main feature, the random mini-missions, was represented through these two UI elements: the Wheel and the Mini-Mission Card. Our sample micro-interactions allow us to put light on them.
We aim to have the wheel spin once clicked to assign a random mission card (it would also auto-spin once the user opens the app for the first time). For our mission cards, a simple card-swiping will allow us to give a user-friendly approach to missions’ selection.
8. Usability Tests & Next Steps
We had six users for our usability testing aging from 18 to 21.
One main observation was the confusion about what should happen next after reading the chat screen instructions. After a quick iteration, we added a button to start the mission and “Let’s go” as a call-to-action text.
Our users’ insights were mostly positive; they loved the feel of the app.
They mentioned how the color palette puts them in a happy and playful mood. The app allowed them to be proactive and creative while having the support of more experienced peers.
A bonus for the users was the possibility to rate the missions: this solution is an iterative process not only in UX / UI design but also in the quality of the random missions proposed to the users.
A fun fact was one user exclaiming, “But I don’t understand, why can’t we register for real?”.
Thank you for reading my case study. I hope you enjoyed not only the final design but also the process!
