Case Study: re:Word

Overview

  • Breakpoint: Native Android mobile app

  • Programs Used: Illustrator, Photoshop, Marvel App, Figma

  • Timeline: Initial project from June 2021 to July 2021, Updates from June 2022 to Sept 2022

re:Word | define words — in your own terms!

This was a project I created for an intensive online UX Design course. The goal was to learn the basics of UX and UI by designing a native mobile app.

The initial design was completed between June 2021 and July 2021, and later, I revisited the project between June 2022 and September 2022 to incorporate feedback about my initial designs into an updated, high-fidelity prototype.

The Project

The Problem: Learning new vocabulary can be hard, and it’s often hard to find the time and motivation to keep studying!

Project Brief: Design a mobile app that helps people learn and study new vocabulary words. 

Project Requirements:

  • splash screen

  • onboarding process

  • sign up/log in

  • admin/settings menu

  • menu

  • a way to upload new vocab words and definitions

  • a way to review vocab for study

The Solution: Create an app that makes studying fun and memorable through context-based visuals, custom note-taking, and an in-app support system that keeps users motivated to learn.

Persona

To begin the design process, it was important to understand how people liked to learn vocabulary, for instance, what people currently use to study, and what techniques could make studying easier and more fun.

First, I conducted interviews with people to discover what kinds of apps they might use to study vocab, what kind of study habits best helped them learn, and what they would want from a vocab app. I also conducted competitor research (looking at Quizlet, Memrise, and Drops) and found that most apps benefited from aids like sound, video, and imagery, and that gamification elements helped make the learning process memorable. 

With this knowledge, I created a Persona to represent the target audience I’d be designing this app for – Molly, a 30-year old pharmacist who wanted to learn more Tagalog words to help her communicate with her extended family.

User Flows

Thinking about the necessary requirements from the POV of my persona, I came up with the concept of a bookmark, the image of a person grabbing a piece of paper, maybe a picture, and placing it in a book to remember that page. In a similar way, what if a person could “bookmark” a vocab word by associating it with personal notes and images? Jumping off of the “book” imagery, I also came up with an idea for Circles, book-club inspired study groups that users could make and join to help motivate each other to study and to share notes. 

With these concepts to guide me, I created user flows to figure out how, Molly, my persona, would need to interact with these features in order to accomplish her goals while using the app.

I focused on two main feature requirements:

Review Vocabulary

Upload a Custom Word

With these user flows, I moved on to creating designs that incorporated my bookmark/Circles concept and the necessary functions outlined in my user flows.

Low-Fidelity Wireframes

First, I created a set of low-fidelity wireframes with paper and pen, focusing on the main features Molly would need:

User Testing & Results

Next, I used my low-fidelity wireframes to create an interactive prototype using the Marvel App — using this initial prototype, I then conducted my first round of user testing sessions with three participants from my target audience.

Revisiting the Design: Mid-Fidelity Wireframes

Later in June 2022, I came back to my original designs with the goal of implementing feedback from my first round of user testing into high-fidelity wireframes. I decided to start with three core features first so I could keep the redesign process more focused:

  • Learn a new word

  • Add a bookmark

  • Save a shared bookmark

High Fidelity Wireframes & Presentation Mockups

With this revised design, I wanted to go for an uncluttered, clean look – I kept the image of colorful magnets on a classroom whiteboard in mind as I chose colors and layouts.

I also simplified some of my initial wireframes and made updates based on feedback given by friends and user testing participants:

  • Streamlined game screen

  • Added a filter system to the Library page

  • Split shared bookmarks into tabs (shared and saved)

  • Restructured the Sign Up process and moved the Intro Screens to the end of the set up flow (some participants had expressed some impatience with the onboarding screens, so streamlining the initial intro seemed best)

Prototype V2

Below is my current high-fidelity prototype created in Figma:

Next Steps

  • Conduct second round of user testing using the updated high fidelity designs/prototype:

    • Does the Circles system and shared bookmark system work better?

    • Does the bookmark system feel intuitive?

    • Is it easier to use the Library menu now?

  • Evaluate feedback and implement changes into a second version of the high fidelity prototype

Retrospective/Learnings

As this was my first time creating a mobile app, I learned quite a lot! Most importantly, I learned how to talk with people so I could properly understand their needs, and how different view points could really affect a design. Things that I took for granted weren’t immediately intuitive for my test participants, and I learned that the process of designing my app was a constantly updating and organic process of discovery.  

In addition, coming back to my initial designs several months after I originally made them was incredibly satisfying, because my skills had improved and I had streamlined both my approach to working with Figma and to creating designs.

Overall, I ended up learning a lot, not just about UX, but also about my own work methods and point of view as a designer!