Smart people Inc.: the UX behind learning from an app.

Part 1: Social language learning app UX case study.

Anne Harter
Nov 1 · 11 min read

How do we learn? During my research for this design project, I have learned that there are 4 different types of learners.

  1. Visual: People that prefer to learn through seeing. (Diagrams, illustrations or colors.)
  2. Aural: People that prefer to learn through hearing. (Lectures, reading out loud or listening to recordings)
  3. Read/Write: People that prefer to learn through reading and writing. (writing, rewriting notes, or writing lists.)
  4. Kinesthetics: People that prefer to learn through doing. (field trips, hands-on activities or moving while reading/studying)

I realized that I am one of both, an aural and a read/write learner. I learn more when I listen to lectures and by taking notes at the same time. But the real question is, where does digital/technology-based learning belong? Should there be number 5 soon? Well, maybe. My design project is having to create a design solution for a language-learning app, that is engaging and social at the same time. So let’s get into it!

The Client

Smart People Inc. is an educational company born in 2014. They currently offer in-person language courses — English, Spanish, Italian, French, German and many more — for kids and teenagers from 12 to 21 years old.

Their main attraction is a summer camp. Hundreds of teenagers join every year in different locations, as they have a very special recipe: they integrate sports, outdoor activities, technology, humor, games, and other cool stuff to their mission of teaching a second language.

The Objective

Our objective for this project is to make the Smart People Inc. language learning app available to our young users. I and 2 other UX/UI designers are tasked to create a minimum viable product (MVP) in one week.

Our target users’ age ranges from 18 to 21-year-olds. The goal at the end of this project is to produce a prototype and test them with our target users.

Deliverables

  • Build an MVP of an app, using Design Thinking
  • Selforganization: distribute the workload, keep track of versioning and consistency
  • Plan and execute research to identify user personas and pain points
  • Build mid-fi wireframes

The Strategy

For this project, we are given 1 week as in 5 business days to deliver a working prototype. After our project brief, we immediately created and agree on what will be our UX strategy.

We were assigned to each assignment so we can be more effective. Each morning we do a stand-up which helps us know where we’re at and where we’re going. We also made sure that our checklist for the day was made available on our slack group, to be certain that we are always on the same page.

The role

I always dread using sketch app and have been vocal enough about it in a few articles. So the immediate assumption was, No I will not do any… But this was not the case for this project. We might have different assignments in the beginning but we all wore many hats for this project, I believed that it was very efficient to work near each other.

As user researchers

We set up a meeting with the potential users, both online and in-person, gathering data via interviews, surveys, and discussions.

As information architects

When people navigate a page or an app with ease, it was not by chance or because the designer simply felt like it. By following 8 common principles of information, we meticulously plan the structure of the screen, so that our users can rationally reach their end goal.

As UI designers

Although UI design was not my strongest, I did try to create a screen or two and was committed in every step of the way. A UI designer is responsible for the look and feel of a site. Using the research we have collected, we created a design that was based on the requirement that we have previously identified.

As Usability Testers

Usability testing has become of my many favorite parts of the design process. A usability tester is someone who is in charge of assessing a product by testing it on users. Like in the interviews. It’s a time where we have close communication with the users. I love listening to our user insights and listening to their feedback. From these responses, a product can then be redesigned and improved.

Design Process

In this project, I decided to use the design model called Double Diamond which was developed by the British Design Council in 2005. This process is divided into four phases- discover, define, develop and deliver. What I liked about this process is the main feature of diverging and converging stages. Which for me is just not a visual representation of what we’re doing but also, for some reason I feel like I’m riding through waves.


Discover

In this stage, we gather user insights and at some point during this stage, we can also begin synthesizing the data that we’ve collected.

The tools we used in gathering our data were user surveys, Jobs-to-be-done (JTBD) interviews and market research. We sent out some surveys specifically targeting 18 to 21-year-olds. One of our teammates was tasked to do the JTBD interviews, another was assigned to send out the French version of the surveys and I was designated to do the English version. For this project we don’t have the budget to do paid surveys, so finding survey participants is always proven a mission. We utilized countless Facebook groups and close connections.

While waiting on our survey results and JTDB interview response, we directly started with our market research and competitor analysis. We learned, which apps would be are our top competitors and what makes them effective but this project is not about creating another version of what already exists.

Benchmarking

  • Some of the current learning apps can get expensive.
  • They are not engaging enough.
  • They are not socially interactive enough.

Quantitative Research Results

Based on our research results, we discovered that most of our 60 survey participants with the age range of 18–21 years old. The majority of them have tried or would like to learn a new language.

93.5% Would like to learn a new language.

45.2% Have tried to learn a new language online and in person.

32.3% Have tried to learn a new language online.

68.8% Would like to learn a new language.

54.8% Will stay engaged when they can see their game-like achievements.

When asked what activities they like doing in the summer.

50% Loves to do fun activities.

40.6% Loves to learn through fun activities.

With this data, we realized that achievements are important to our users. Knowing that they are working towards something. We also then gathered that they also liked to be active while learning.

Qualitative Research Results

Based on our 3 jobs-to-be-done (JTBD) interviews, we have learned that social interaction is an important learning aspect for our users. That they would like to learn by experience.

J’aime qu’une application soit amusante et ressentir l’effet communitaire.

-English translation-

I would like an application to be fun and feel the community effect. -18 year old, female.

Data Downloading: Affinity Diagram

To make sense of all the data we’ve collected we decided to use a tool called affinity diagram. An affinity diagram is a method used to sort and organize research findings so that we can physically see trends and relationships in data.

The Persona, Jennifer.

We created a user persona of a potential app user. This persona is based on the research findings that we have collected. Jennifer, our enthusiastic high school graduate. She’s energetic, social and loves learning new things.


Define

In this stage, we start extracting the data from all the user insights and framing them specifically. Here, we identify the problems that are worth pursuing and not.

User Journey

Now that you met Jennifer, it’s time to learn about her journey and find our pain points. Below is Jennifer’s user journey map. A user journey map is a mapping tool that helps designers visualize and gain an understanding of our users’ goals and frustrations.

At the end of the define stage, we then draft our problem statement. I have to admit that this has been the most challenging for us. A lot of the previous problem statement we have written were either too broad, too vague or tackling too many problems at the same time. Coming up with a solid and foolproof problem statement was a relief for us because it gives us clear direction.

The Problem Statement

Jennifer, the 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?


Develop

Now, the fun part. Idea generation or ideation is something that I do look forward to. In this stage, we generate as many ideas as we can then we group and refine these ideas by multi voting to concentrate on the best possible ideas.

Crazy 8's

Crazy 8 is an ideation exercise where we come up 6–8 ideas in 8 minutes. The first time I’ve tried crazy 8, there was a moment where I felt I cannot come up with that many ideas. But something will always pop up in your head when the timer goes off. So, I’m a full believer in trusting the process! After we finished ideating we then post them on a wall, we review and later discuss. We also used dot voting to choose the best ideas.

Wire-flow

We quickly did a wire-flow. It’s a mix of low fidelity prototype and a path that connects them.

Wire-flow version 1

Just when you feel like you’re on a roll and the next best solution is almost within your grasp. We got Design feedback from the client, and it is an integral part of any successful design project. It allows the clients to review and critique a design solution that we presented. The first lesson that I’ve learned in being a UX designer is to never get overly attached to your previous ideas.

Now back to the drawing board! After going back to our problem statement and our crazy 8 ideas. We realized that we have the solution all along but we just didn’t dive into it. And that for me was the beauty of this whole process. We have the answers, we just needed to look deeper.

Prototyping

Sit tight, we’re almost there! After doing a low fidelity wireframe, we hopped into sketch to create mock-ups of our proposed solutions.

Pain point 1: Learning a language the traditional way can get boring.

Design solution: Make a language learning app that feels like a game while keeping it social so they can practice with each other. Our application connects our users with other users of the same interests. Upon sign up the students has the option to choose which language he/she wants to learn.

Low fidelity

Mid-Fidelity

The wheel randomly picks its mission and the users are then randomly teamed with other users. Once the mission has been accepted the team has now 24 hours to finish the task.

Mini-missions, the purpose of the mini-missions is to have the users learn through experience and create memorable adventures. To emulate that same feeling of teamwork and camaraderie in summer camps.

Paint point 2: Users find it difficult to stay motivated and engaged in an online learning app.

Design Solution: Have the users to upload videos of their missions and sharing it with their friends. One of our users’ pain points was getting distracted by social media while studying. We believed that having them share their experience will give them a sense of accountability to improve and help them advance.

Ratings, having the users input what they learned from their mission and have them track their progress. Based on our research findings, users prefer to keep track of their performances. It helps them stay motivated in reaching their goals hence keeping them learning.


Deliver

This is the stage when we will do our usability testing with our target users. This stage is all about getting feedback on our concept prototype. With our users’ insights in mind, we then iterate and improve our prototype until it’s time for handoff.

Usability testing

For this project, we did remote usability testing and have sent them to 3 target users. From our interview, we did gain a lot of insights and immediately iterated on our design solution.

User insights

  • When teamed up with other users, they would like to able to click on the photo of their team and see their profile.
  • There were no clear instructions in the beginning that they can take videos and upload their missions.
  • They would like to have the ability to contact their past team members.
  • They liked that they can rate themselves.
  • Having the contact details of the mission partners/sponsors available on the app.

Takeaways

I am very happy with our design solution but a good designer knows that a good project is never finished. There is so much to be done and more testing to follow. I believe that we can later achieve our mission, in making language learning on your phone engaging, accessible and turn it into an exciting experience for everyone.

*Part 2 UI case study to follow.*

Thank for your reading and leave some love/claps.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade