Olive
PROJECT
Client: Career Foundry - Course Project
Role: UX Research, UX Designer (Product Designer), UI Designer
Duration: February- August 2021
Tools: Adobe XD, Balsamiq, Figma, Invision, OptimalSort, Sketch,
Usability Hub, Vidyard, Google Meet, Apple FaceTime, Zoom
COMPETITIVE ANALYSIS
Competitive analysis was conducted on popular and highly rated health apps to understand what is available in the market, what users found helpful in these apps, what users found lacking and possible new opportunities that have not been fulfilled yet. The analysis contained the following…
● Key Objectives ● UX Analysis:
● Overall Strategy - Usability - Compatibility
● Market Advantage - Layout - Differentiation
● Marketing Profile - Navigation Structure - Calls to Action (CTA)
● SWOT Profiles
BUSSINESS REQUIREMENTS
Executive Summary, S.M.A.R.T. Business Objectives, Scope, Functional Requirements, High-level Delivery Schedule
was complied to communicate what needed to be accomplished and deadlines to meet.
USER INTERVIEWS
Interviews were conducted with participants with various ages to understand how users try to stay healthy in their busy lives, what can help users maintain a healthy routine, build good habits and break bad habits.
Affinity Mapping was then created to sort and map out all the findings.
OUR USER
User Personas, User Journey Maps, User Flows
helped to prioritize functions and establish empathy with my users. This also aided in how the user might go about to accomplish their goal.
CARD SORT
A digital open card sorting test was conducted on participants using Optimal Sort resulting in patterns of strong pairings and groupings.
A Similarity Matrix was produced to show these parings and groupings.
SITEMAP
was created to show the hierarchy and possible layout of Olive.
DESIGN
Using all the information above, the following prototypes (below) were then created to test Usability keeping in mind Learnability, Efficiency, Memorability, Errors, Satisfaction and Nielsen's 10 Usability Heuristics.
Wireframes/Low-Fidelity Prototype
Mid-Fidelity Prototype
High-Fidelity Prototype
USABILITY TESTING
Interviews were conducted with participants to determine the learnability and efficiency for new users interacting with Olive for the first time. I observed and measured if users could accomplish given tasks easily and how smoothly they can perform them.
Test Objectives, Methodology, Participants & Schedule (Participant Rainbow Spreadsheet), Test Script were created to understand the details of the testing and demographic information of the participants.
Results & Iterations
A/B TESTING
Using usabilityhub.com, participants were presented with the two designs below. They were asked to select their preference to determine which “Sign up/Sign in” screen was easier to read and visually appealing.
GESTALT PRINCIPLES
Gestalt Principles were applied to enhance the UX of Olive for users to find it aesthetically pleasing and easier to understand.
Iterations
DESIGN LANGUAGE SYSTEM
was created to share my thought patterns and establish clear guidelines for consistency.
Colors were carefully selected keeping in mind Plutchik's Theory of Emotion and Don Norman's Three Levels of Design (Visceral Level).
Typography, Iconography, UI Elements, Grids & Layouts, Language & Tone of Voice
were also carefully developed for the system considering Olive's various users young and old.
DESIGN COLLABORATION
Olive was shared with fellow colleagues for feedback and recommendations for improvement. Having others in the industry review, is very helpful as they might seeing things that participants from user testing may not. They can also advise on elements that might have (or not have) worked through their own experience.
Iterations
ACCESSIBILITY
Olive was created for a variety of users that would like to improve their health. During the early stages of development, accessibility was always an important factor. I have tried my best to keep ample signifiers and the color theme simple and clean as possible but there are always room for improvement.
Iterations
WHAT'S TO COME...
To preview prototype, please click here.
