Smart People — The UI Case Study

Designing a learning experience for young adults (Part 2)

Hala Fayad
Nov 21, 2019 · 6 min read
Image for post
Image for post

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:

  1. Problem Statement & Solution

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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):

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Spinning wheel animation & swiping cards for the missions screen

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

Image for post
Image for post
This image is for illustration purposes, any resemblance to a person you might know is pure serendipity :)

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!

⬆︎

The Startup

Medium's largest active publication, followed by +730K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store