Lexi Vocabulary Learning App - UX/UI Design
OVERVIEW AND CHALLENGE
Work on a mobile application for learning vocabulary. Taking a new learning course is exciting, but it can be intimidating at the same time. With so many new concepts and terms to learn, it can feel a bit overwhelming. Redesign the experience of memorizing and understanding new concepts, techniques, and terms by exploring how people learn vocabulary and designing a mobile app to address their goals and problems. Vocabulary learning ranges from learning words for a new language or saving key terms from a business as an example.
THE PROCESS
I used the following tools to complete this project in a time frame of 2 months: Figma, InVision, Adobe Creative Suite, Pen and Paper.
HIGH FIDELITY PROTOTYPE
HIGH FIDELITY PROTOTYPE
Once I had worked through the Design and Research Process and was satisfied that the App’s content flowed correctly I built this Prototype.
For the full case study - please continue below the Prototype.
For the full case study - please continue below the Prototype.
THE PROCESS
By following the Phases in the diagram below I followed the creative process from Research to Testing and ultimately to hand off to a developer. I will run through the whole process to showcase my approach and eventual delivery of the product.
COMPETITIVE ANALYSIS
I decided to create a Flashcard App and researched several competitor Apps and websites. From these studies I analysed what was good, bad, what worked well and what did not and used them as considerations for my project.
INTERVIEWS AND SURVEYS
By conducting Interviews and Surveys I set out specific questions to investigate what users would find useful in the App, what additional features could get added and potentially what could be left out of the structure. I wanted to keep users engaged so this was a big factor in finding this out at this stage. Some of the answers were quite surprising; especially when you feel you have already worked out what should and should not be included in the App !!
By conducting Interviews and Surveys I set out specific questions to investigate what users would find useful in the App, what additional features could get added and potentially what could be left out of the structure. I wanted to keep users engaged so this was a big factor in finding this out at this stage. Some of the answers were quite surprising; especially when you feel you have already worked out what should and should not be included in the App !!
PERSONAS AND USER JOURNEYS
From the research and feedback I had already gathered I created a Persona of a typical person using the App. This enabled me to map out some scenarios that would be required from the App and work out goals in the form of User Journeys.
TASK ANALYSIS AND USER FLOWS
Moving forward from the previous exercise, I was able to clearly define the needs of each Persona through Task Analysis. From here I developed User Flows for each task. These flows helped to organise the navigation within the App and ultimately start to shape and finalise the sitemap.
LOW AND MID-FIDELITY WIREFRAMES
Initially using pencil and paper I was able to start fleshing out the App design. This was a quick and cost effective method and could be updated easily. By creating prototypes I was able to iterate the user needs I had already researched and work out these journeys visually – ensuring they ran smoothly and were easy to accomplish.
USABILITY TESTING
By conducting further Usability Testing I was able to refine my design. I investigated Test Methods, created a Test Script and Plan, applied A/B Preference Testing and reported my findings using an Affinity Map and Rainbow Spreadsheet.
DESIGN SYSTEM
To guide the development process I ensured that my ‘Figma’ file was set up correctly with elements being named in an clear way, measurements were accurate and consistency with elements such as headings, body text, colours and buttons etc were the same throughout the App. From here I am able to produce a Design Language document to guide the Developer through the implementation of the design. This highlighted logo use, colours, UI elements, Grid system as well as how to display fonts and language.
