top of page
Slide 4_3 - 1.png

Role

UX/UI Designer

Task

Case Study

Duration

3 weeks

Discover

Challenge

Professionals aspiring to enhance job proficiency seek a user-centric solution for learning industry-specific vocabulary. The challenge is to develop a user experience that facilitates effective and convenient acquisition of relevant terminology, ultimately empowering individuals to excel in their roles.

Goal

Optimise the user experience to empower professionals in acquiring new industry vocabulary seamlessly, fostering enhanced job proficiency and contributing to continuous skill improvement in their respective roles.

Competitive Analysis

Three educational vocabulary apps were analysed: Quizlet, StudySmarter - School & Uni and Chegg Prep. All three apps were very intuitive stating their demographic in onboarding, accessible by providing different languages and usable by organising educational categories in a simple format. 

User Research

I conducted  user interviews with the objective of gaining comprehensive insights into individuals' methodologies when acquiring new vocabulary.

Interview Questions:    

  • Are you a student, professional, or both? Tell me more about your responsibilities and daily routines

  • What study methods have you used in the past to learn a new skill for work or school?

  • When was the last time in either a work or school environment you felt you needed better vocabulary? What emotions came from this incident?

  • When learning new vocabulary what are your biggest challenges? What strategies helped you overcome them?

  • What features from a vocabulary app would keep you engaged?

  • What do you enjoy about learning new vocabulary?

  • When learning vocabulary how many days out of the week did you practice?

Key Findings:

Interviewees emphasised the importance of repetition and consistency in learning new vocabulary. They suggested that a points and reward system would boost motivation. Surprisingly, only one person expressed interest in a pronunciation feature. To enhance user engagement, incorporating fun elements like games or studying with friends was suggested. These insights will guide the design process, ensuring a user-centered product that addresses frustrations, needs, and feelings.

1.png

Define

User Personas

The insights gathered from the user survey were crucial in understanding the users' needs and goals. Using this valuable information, I created a relatable user persona—a businesswoman eager to master industry terminology to better follow discussions in team meetings.

User Persona.png

Information Architecture 

Based on the needs and goals from Riley's user story two tasks were devised to develop and structure the content of the app: 

  • Add a new word

  • Practice vocabulary

1.png
2.png

Develop

User Flows

From the first scribbled lo-fi wireframes, a clickable prototype was built by using the Marvel app

Splash and Sign In

Screenshot 2024-01-19 at 17.59.15.png
Screenshot 2024-01-19 at 18.00.50.png
Screenshot 2024-01-19 at 18.00.31.png
Screenshot 2024-01-19 at 18.01.05.png

Onboarding

Screenshot 2024-01-19 at 18.07.10.png
Screenshot 2024-01-19 at 18.07.21.png
Screenshot 2024-01-19 at 18.07.30.png

Search and Study Guide

Screenshot 2024-01-19 at 18.12.00.png
Screenshot 2024-01-19 at 18.12.10.png
Screenshot 2024-01-19 at 18.12.27.png
Screenshot 2024-01-19 at 18.18.30.png
Screenshot 2024-01-19 at 18.19.41.png
Screenshot 2024-01-19 at 18.19.54.png

Upload New Word

Screenshot 2024-01-19 at 18.26.36.png
Screenshot 2024-01-19 at 18.26.45.png
Screenshot 2024-01-19 at 18.26.55.png

Profile

Screenshot 2024-01-19 at 18.27.38.png

User Testing

To ensure comparability, framework conditions were established using a test script, providing all participants with identical tasks. Test observations and statements were organized in a report, categorized by Jakob Nielsen's error severity scale and accompanied by potential solutions, resulting in the initial prototype iteration.

Scenario Tasks

  1. Create a new account on the app. You’re enjoying your new job except you struggle keeping up in meetings because unfamiliar with industry words. You have been recommend to download this new vocabulary app. Sign up to help you learn.

  2. Create your own flashcard. You’ve comprised a list of specialised words you’ve heard in your day to day role and want to study over them so you can have better understanding in future scenarios. Create your own flashcards on the app.

  3. Study flashcards of your chosen industry. You’re interested in learning more new words and phrases related to your specific work industry. Search and study flashcards of your chosen industry.

  4. Review your own created set of flashcards. It’s the night before a big meeting tomorrow and you’ve created a folder with your own list of new words and you want to study for last minute preparation. Review your own study set

Information Architecture.png

Deliver

Ideate

Task 2

The addition of verbal prompts in the text boxes communicates to the user what task is required of them.

By defining the flashcard UI with a box iteration the hierarchy of information on the page becomes better understood.

Screenshot 2024-01-19 at 18.26.36.png

Before

Screenshot 2024-02-01 at 16.34.41.png

After

By selecting the done button a pop will appear that will give the user the option to add a new card, save draft, cancel and complete. This gives the user more control over when and how they want to create a new flashcard in a friction free manner.

Screenshot 2024-01-19 at 18.26.45.png
Screenshot 2024-01-19 at 18.26.55.png
Screenshot 2024-02-01 at 16.47.28.png

Before

After

Task 3

Using the word Quiz rather than “practice all cards” communicates action to the user. The addition of the types of quizzes available develops the apps usability by making the app more inclusive to learning styles.

Screenshot 2024-02-01 at 17.08.59.png

Before

Screenshot 2024-02-01 at 16.54.21.png

After

Task 4

Changing the word from “study set” to “my flashcards” results in better communication to the user where their personal flashcards are saved.

Spacing out the buttons on the profile page makes the UI more aesthetic and usable.

Screenshot 2024-01-19 at 18.27.38.png

Before

Screenshot 2024-02-01 at 16.56.16.png

After

Reflection

Embarking on my first UX case study coming from a background in interior design has truly been a journey of transformation, blending my love for creating physical spaces with the dynamic world of user experience. Working closely with users to refine concepts and tweak prototypes has been incredibly rewarding, emphasising the vital role of putting users at the heart of the design process. Moreover, delving into digital tools like Figma has ignited my curiosity and given me newfound confidence in tackling diverse design challenges. As I look to the future, I'm excited to seamlessly weave UX principles into my design practice, striving to create spaces that not only captivate visually but also enrich the lives of those who inhabit them.

iPhone 15 Pro Portrait Right Mockup-2.png
iPhone 15 Pro Portrait Right Mockup.png
iPhone 15 Pro Portrait Right Mockup-1.png
bottom of page