FRANCISCA RUFF
Visual Design . Illustration
VEGWEG
“Vegweg” is an app that helps people find vegan practitioners in their local area. The app is for anyone who wants to start, is transitioning or already living a vegan eating lifestyle.
Goal of the app is to help users:
-
Find practitioners for their individual goals and needs.
-
Get to know the experts with 20-min intro video calls.
-
Support them with articles, recipes and an online community.
—
Main tasks: Research, UX/UI Design
Project for: UX Design course, Career Foundry
Duration: Jan till Nov 2020 (part-time)
—
Tools: Adobe XD, Optimal Sort, Usability Hub, Photoshop
Initial analysis
-
Starting a vegan lifestyle can be challenging, full of questions, doubts and overwhelming with information.
-
There are no direct competitors in the german market.
-
Overlooked expert niche.
-
Rising growth of veganism and vegan communities (restaurants, events, blogs, etc).
Problem statement
Our users — vegan searchers and vegan experts— need a way to connect and find each other whenever and wherever they need it, so that newly vegans can successfully and smoothly transition to new eating habits, and vegan practitioners can stand out and reach out to more customers.
We will know this to be true when we see an increase in user growth from both ends: vegan searchers matching with the right expert, and more vegan experts offering their services and finding new clients.
Methodology
I used the following human-centered design process:
Discovery
User research
Empathise
User personas
Ideate
User journey, flows & IA
Prototyping
Wireframes
Testing
Usability test
Refine
Design system
& peer feedback
DISCOVERY
User research
To understand our users I run surveys and one-on-one interviews. I wanted to find out the behaviour, goals and pain points on their transition to a vegan lifestyle and their level of interest in interacting with a vegan practitioner.
Survey: 15 responses / One-on-one Interviews: 4 persons
INSIGHTS & TAKE AWAYS
Information sources
-
Internet is a great resource of vegan information, but it takes time to collect the right information.
-
Not all sources are evidence- based or trustworthy.
-
Users struggle on how to put all together to fit their needs
Most researched topics
-
Current websites fall short on specific topics (e.g sport nutrition)
Social exclusion
-
Difficulties with social exclusion and peer pressure.
-
Navigating these situations can feel painful and lonely.
On vegan experts
-
Users are unsure about experts' qualifications and expertise.
-
Most think about reaching out to an expert, but don't do it.
How might I help users save time in their search for evidence-based nutritional information?
*
How might our users find support with their individual nutritional needs, goals and challenges?
*
How might users get support to deal with social situations?
*
How might users find experts that are trustworthy and qualified?
*
How might I help bridge the current gap between experts and users?
EMPATHISE
Who are our users?
Based from the insights obtained from previous research, our users are persons between 18 and 65 years old, seeking for individual advice when starting, transitioning or already living as a vegan.
I created 3 personas who capture the behaviours, needs and goals of the target audience:
-
Lisa: 28 years old, actress, vegan since 5 months. Needs advice on how to eat right for her sport goals.
-
Philipp: 40 years old, school teacher, giving vegan again a try. Needs support and guidance on how to deal with social exclusion.
-
Steffi: 38 years old, journalist, vegan since ten months. Needs an expert to help her reevaluate her diet to feel better.
→ Click here for user personas in detail.
IDEATE
User journey & user flow
To ensure that the app meets the user's goals, motivations and feelings, I used journey maps describing the users engagement and experience at each step.
Nr. of user journey maps: 3
Then I created user flows to describe in detail the interaction points the user might take to accomplish their goals within the app.
Nr. of user flows: 3
→ Click here for user journeys & flows.
Information architecture
After user journeys and flows, I created a sitemap for the navigation. To validate it's ease of use and categorization I used close card sorting.
→ Click here for card sorting & IA.
PROTOTYPING
Sketches & wireframes
The following images show the development of some of the main features of the app, from sketches to hi-fidelity prototypes. All wireframes and clickable prototype were done with XD Adobe.
Sign- & log in
Experts profile
Booking video call
Homepage
TESTING
Usability testing
The first usability test was done with mid-fidelity prototypes.
Methodology used: Remote and in-person usability test.
Number of participants: 6
Goals
-
Asses learnability of users using the app for the first time.
-
Observe how successfully users complete given tasks.
-
Find out overall satisfaction with its use.
-
Determine if app provides users with any value.
Given tasks
-
Sign up and change profile picture
-
Search for a practitioner
-
Book a video call with an expert
→ Click here for usability test script.
Issues
After testing I collected the test results in an affinity map and organised the information in a rainbow spreadsheet for further analysis.
I identified 6 top errors and addressed them in the next iteration of the prototype.
→ Click here for issues test report.
AFFINITY MAP INSIGHTS
OBSERVATIONS
-
P1, P2, P4: does onboarding
-
P3, P5, P6: skips onboarding
-
P3: clicks on hamburger icon for profile
-
P1: Confused by signing up
NEGATIVE QUOTES
-
P1, P2, P3: I’d like to know what to expect from video calls.
-
P2, P4: in onboarding, what's the benefit of the "community"?
-
P4: thought the expert search bar was for the whole site.
-
P2, P3: I don’t understand “well-being” criteria.
-
P2, P3: More options in expertise filter criteria
-
P4, P5: Can I book a whole session or just short calls?
POSITIVE QUOTES
-
P1. P2, P3, P4: User-friendly, clean and uncomplicated.
-
P1, P3: I like I can jump through the information in experts page.
-
P3: Good to know the price of the video call upfront.
-
P1, P5: Looking forward what’s in “community”.
-
P1, P3, P5: very useful app.
ERRORS
-
P1, P2, P3, P4: clicks on picture to change pic profile
-
P1, P2: To view expert, clicks on picture and/or name.
-
P5: Overlook “view profile” button.
-
P1, P3, P5, P6: overlooked session price
REFINE
Design system
After addressing the issues that arose from the usability test, I was able to define a consistent design style guide to use across all devices.
→ Click here for design system.
Peer feedback
Feedback was gathered from peer students and mentor of Career Foundry course. Reviews revealed some navigation pain points and details in the design. Below are shown the most relevant changes.
Before
Search function in top/bottom menu made clearer
Hamburger menu moved left and with new hierarchy
Adding type of session. App is for online and in person sessions
After
Learnings & takeaways
-
The importance of hand sketching: I was too focused on getting it "right" in the first round. Next time I'd spend more time creating simpler sketches and experimenting with more variations before moving on.
-
Make improvements based on facts from user testing and not from what I thought I understood. This was tricky. I realised I was biased to some of the given feedback.
-
Feedback from peers: This was invaluable, in order to see the project from a different perspective and catch problems I couldn't see for myself.
Next steps
-
Develop functionalities for the vegan practitioners (registration, profile and dashboard) based on prior one-on-one interviews.
-
Finish the following areas:
-
Search tool expert criteria: information needs to be backed-up by nutritionists/practitioners.
-
Customers profile: notification and payment settings
-
Forum
-
Articles & recipes
-
Help & support