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.
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.
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
Develop
User Flows
From the first scribbled lo-fi wireframes, a clickable prototype was built by using the Marvel app
Splash and Sign In
Onboarding
Search and Study Guide
Upload New Word
Profile
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
-
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.
-
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.
-
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.
-
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
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.
Before
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.
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.
Before
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.
Before
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.
