Rachael Jennings
UX designer
Made with

OTHER WORDY

A fun & convenient way to help busy professionals learn vocabulary on the go.

Context

Created as an introductory project in Career Foundry's Certified UX Designer Program. Duration 2 months.

Role

UX Research, Information Architecture, Wireframes & Prototyping, UX Design, UI Design, User Testing.

Approach

The brief was to design a mobile flashcard app that empowers people to learn new vocabulary. I used the User Centered Design Process to guide me throughout the design process. 

Discovery

During the discovery phase of the project I wanted to get to know my target audience. I also wanted to understand the market so I preformed a competitive analysis of three competitors; Tiny Cards, Quizlet & Lexilize. I then created a problem statement to define the opportunity and keep the user focused design process on track.

OTHER WORDY

Competitive Analysis 

I took an in-depth look at three other flashcard or language learning apps to get a better picture of the market

Tiny cards

+ Friendly and approachable voice used throughout, consistent in language used, animations and colour palate.

- No onboarding process, although it is a simple interface some of the tools are initially unclear.

Lexilize

+ Clear onboarding process as soon as opening the app.

- Relies almost exclusively on text based games without visual imagery

Quizlet

+ Engaging landing page with a strong statistical message.

- Necessary to sign up on before using app including the additional step of Username / DOB.

See link for the full report.

Problem Statement

"Our users need a way to improve their vocabulary that is flexible enough for a busy life but interesting and dynamic enough to keep them motivated."

User research

To gain insights about the real needs of users in my target market (professionals aged 25-45) I conducted a series of in-person interviews.

Key Insights

  • Finds it easier to learn languages informally with friends.
  • Finds it annoying when apps don't reflect real world situations.
  • Finds it difficult to concentrate for long periods of time.
  • Feels energized by entertaining teachers and classmates.
  • Would like to be able to learn in short bursts on-the-go.
  • Feels discouraged when unable to progress any further on a language app.
  • Likes to learn at least one new word per class and practice it in context.

See the link for the full report.

OTHER WORDY

User Persona

Based on the insights I collected from the interviews I created a User Persona to create empathy with the end user. This helped ensure I was designing with real needs and goals in mind and was a really useful resource throughout the design process.

Hypothesis Statement

I then created a Hypothesis statement as a way to define the primary problem of my persona as well as a way to solve it.

"We believe that creating an language learning app that uses image based learning as well as an online community of language learners will keep our users interested enough to develop their skills and have them conversing comfortably with natives in 3 months."

Concepting

User Flows

I then created user flows to study how my persona would move through the app. I chose signing up for the app and completing a group game as two critical tasks that the user would need to complete their goals.

OTHER WORDY
OTHER WORDY

Wireframe Sketching

I began sketching out the screens of the app, quickly and loosely testing out multiple different versions using the crazy 8s technique. I then decided on the best options using dot voting.

Mid & High Fidelity Wireframes

I then created Mid Fidelity Wireframes and linked them together to create a prototype. 

After a round of User testing I refined the design of these screens and created high fidelity wireframes that included UI elements such as colour and typography.

Tools: Balsamiq, Sketch

See the evolution of the screens for signing up & onboarding below.

OTHER WORDY
Prototyping & User Testing
Photo credit: Unsplash

Photo credit: Unsplash

Usability Testing

I organised a series of user tests to make sure the app was intuitive and easy to use. I was particularly looking for errors that meant the participants couldn't complete a particular task or found it difficult. 

To assess the severity of the errors I used Jakob Nielsen’s error severity rating scale that ranks errors on a scale of 0-4 (0 not being a usability issue at all and 4 being a usability catastrophe). See the link for the full report including test plan and usability test report.

OTHER WORDY

Error: Lack of back button

60% of the participants encountered frustration when there was a missing back button. This was a critical error and I corrected it in all instances

OTHER WORDY

Error: Daily Goal unclear

Two of the participants didn't understand the meaning of Daily Goal in the onboarding sequence. To make it more clear I changed the language to "I want to study for ... per day".

Final Design

Style Guide

After the user testing it was time to define the User Interface of the design and document elements like colour, typography and illustrations to ensure consistency across all devices.

OTHER WORDY

Final Screens with UI Design

Thank you.