Ripple

Vocabulary App

Project Overview

Context

Ripple was a solo project that was part of my UX Design course at CareerFoundry. It was our very first project of the course and took a hands-on approach to learning The Design Thinking Process through the design of a mobile vocabulary app.

Objective

Design a mid-fidelity prototype of a mobile app that empowers users to learn new vocabulary while on the go.

Problem

Learning new material is challenging no matter what it is. For young adults in college, it can especially be difficult to find free time and the motivation to study with such a busy schedule. They may not always have their study materials on them, but there is one thing a college student never leaves home without. Their cell phone.

I aimed to solve this by creating an immersive, on the go learning experience through repetition and quick games. Providing the user with the confidence he or she needs to know they are actually gaining knowledge.

The Project Plan

Inspiration

Competitive Analysis

An analysis of 3 competitors, Brainscape, Quizlet, and Flashcards, helped with understanding their strengths, weaknesses, and overall design. It also provided insight into the opportunities that were available to differentiate my product and allow it to stand out from the others.

An opportunity and challenge quickly presented itself. How do we keep users engaged with their learning in order for them to successfully gain knowledge?

The research shows that with apps taking different approaches to solving this issue, we haven’t found an effective way to assist users with their learning.

As a result, Ripple will focus on personalization to structure the learning and various study options to keep the user engaged.

User Interviews

I interviewed 3 participants from the target audience who currently use or recently used technology to assist with their studies. I was interested in the tools they used, the challenges they encounter, and their motivations. The interviews were conducted over Zoom and recorded for later use.

These are the main takeaways:

• 2 participants feel that the technologies they use lack in giving them the confidence that they are actually learning and not just memorizing.

• Quick and accessible learning throughout the day was desired by all.

• The need for variety in ways to study is important to not only attract new users, but to keep current users engaged.

• Everyone has a different way of learning. Personalization will be imperative

• Organization of the material is key

Based on these findings the biggest problem is going to be creating an environment where the user can feel confident that they are gaining knowledge.

Conceptualization

User Persona

Using the 3 participants for inspiration, a persona was created to represent their thoughts and understand their desires and frustrations throughout the design.

User Flows

With the research completed and the persona built, it was time to move onto designing the paths users will follow as they navigate through the core functions of the app.

After careful consideration I determined that I needed to allow the user to select the way he or she wanted to study before selecting the material to study. This seemed like a more natural flow and I’m very happy that I made the change. Before the change, the action of studying was going to be lower in the heircarchy of the app and hidden within the material. This change gave me the idea to give the action of studing a seat at the bottom navigation table because of its overall importance to the use of Ripple.

The challenge was to allow the user to quickly select the material and the way they wanted to study. To solve this, the organization of the material was split into a main category “class” and subcategory “decks” within the chosen class. Once the user chose the material to study, they could then choose how to study: flashcards, matching, fill-in the blank, test, or short answer. At the end of the session they were given feedback in the form of statistics to show progress, what they knew, and what they needed to continue studying.

In total, I created three different flows for the user and decided that was enough to begin to sketch out the first wireframes.

Iteration

Wireframes & Prototypes

I prefer to sketch out the first wireframes by hand because of the speed and ability to create multiple ideas. But on my first attempt at rapidly drawing designs I encountered a challenge. I had entered a narrow tunnel vision mode once I thought I had come up with a decent layout because of my previous use of vocabulary apps. Once I realized I was in that mode, I decided I needed to take a short break and went for a walk outside. I realized I was infiltrating the process with what I though the design needed and not what the persona needed. I went back inside and hung the persona information on the wall in front of me and got to work.

Below you can see the rough sketches of low-fidelity screens and their translations into mid-fidelity screens:

With the prototype built, it was time to move onto testing it with actual users.

Usability Testing

To evaluate the prototype and ensure that I had the right design, usability testing was performed remotely via Zoom with 3 participants of the target audience. The tests were recorded to identify roadblocks as well as ensure the layout and navigation were correct.

I found that:

• Users enjoyed their ability to provide feedback on how well they knew the answer to questions while studying.

• Users felt that they would be able to quickly use this on the go

• Users said they would feel confident that they were gaining knowledge by using this product.

The feedback was gathered and placed into a test report to outline design change priorities.

The observations were rated with Jakob Nielsen’s scale to rank the changes that would need to be made for the product.

Changes made include:

• Switching from a Click Through Onboarding tutorial to a Progressive Onboarding to guide the user through tasks and take away the feeling of “extra work” associated with onboarding.

• Updated iconography to represent the function

• Adding visual confirmations when a user created a reminder for study.

Reflection

• With more time and resources, I’d like to conduct field studies with more participants to have a better understanding of their actual use of technology when studying. I would also like to add another layer of research by gathering quantitative data through a survey aimed at people who have had troubles learning with technology.

• A mistake I made was only creating one persona. This led me to develop a “tunnel vision” by only designing for one persona. I realized that mistake at the end of the project and vowed to never allow it to happen again!

• I am not the user. I need to focus on the research and personas to design the right solution for the target audience.

• When conducting interviews, I need to improve my focus on the participant by only notating when necessary and asking further questions that uncover important details.

• Explore multiple designs when drawing out low-fidelity wireframes and avoid attachment to one or two designs.