When I was asked by Ellie from Vojo.Health if I was interested in redesigning her Website I was thrilled to jump at the opportunity and practice my newly acquired UX|UI skills. I’ve known her for quite a while now and have always been very impressed by her incredible knowledge about everything science related and most of all her vegan cooking skills!! I knew that if she is working on an idea it must be something great. A fantastic opportunity!
Vojo Health is a platform for science-backed plant-based health and nutrition guidance. Vojo makes sure you’re getting everything you need to live a healthy plant-based life by looking directly at your genetics through a simple DNA sample.
Digging a little deeper
She got in touch with me, because she was hoping to get some help increasing her conversion rate by redesigning her website and Dashboard. Although she gained lots of interest through her website she was facing trouble actually getting users to sign up or purchasing the DNA Test.
So it is time to see which issues Vojo is facing exactly and dig a little deeper.
- Are we attracting the right users?
- Are we targeting the right problem?
- What makes the user choose Vojo over the other competitors?
- What are the users needs/goals/wishes
- What information do the users need to go through with the sign up?
- Why are we losing so many users along the way?
- How can we change our language to speak to the users better?
The Research
Surveys
What better way to find out about the issues with the current website then going out and doing some proper hands on research. Ellie (as the perfectionist she is) already had a ton of insights and reviews from mainly existing customers, vegan blogs and communities, but sorting the amount of data was another job in itself.
Before looking closer into her data it was important for me to gain my own insights with a fresh eye, before comparing it to the results she got previously.
This was to avoid possibly acting on a bias and to find out if we are on the right track regarding the user she really is targeting.
So as a joint effort we went out there and asked people about their diet habits, goals, wishes and needs.
The results showing were that the reason for choosing a plant-based diet are mainly for health and ethical reasons in order to prevent illness and reduce their carbon footprint. Problems people are facing are fitting the diet into their busy lifestyle and avoiding junk food with a constant worry of not getting the nutrition that suits their needs.
Comparing Ellie’s previously collected information to our current research, we established that the data we have collected is now targeting a broader audience. While the first version of Vojo targeted mainly a vegan community, we have now also opened up to a more plant-based audience or the people that would like to make a change towards a more plant-based diet.
This way we are not putting Vojo in a box, but are open to everyone wanting to make that plant-based difference — and at the same time avoiding that vegan diet stigma so many people are facing.
Competitor Analysis
So how are the competitors approaching their customers. What visual language do they use and what services do the competitors offer. How does their offering differ to Vojo? What makes Vojo special to our users?
So we went ahead and did some market research and compared the related competitors.
Comparing the competitors websites we quickly realise that there are two streaks of competing health and DNA related services on offer: either nutrition based health trackers or DNA/genetic test services that support the user in reaching their weight loss, health or fitness goals.
So where do we see Vojo? What distinguishes us?
Vojo offers personalised nutrition guidance for people on a plant-based diet that does not require daily tracking and is based on the users unique DNA.
How do we make this message clear to people that have never heard of Vojo?
Heatmap
The last step of our secondary research meant to look at our current website and look into the point we begin to loose our users. What prevents them from signing up?
Looking at the data from hotjar we can clearly see that most people do not scroll past the top of the home page. So what important info do we need to place on top? How can we trigger peoples’ interest there and then?
Throughout the page it gets quite obvious that people have a tendency to read topics about: DNA, About us and click to receive the free 2 week test currently on offer. However we find that there is a lack of actual Sign Ups.
If people want to know about these topics, can we integrate them in a different manner? Will this build the necessary trust we need for people to sign up?
Sorting the Data
Defining
Now what to do with all the tons of material collected? It’s sorting time!
With the help of an Affinity Diagram and Empathy Map we compiled different sections of content based on our users feedbacks, their wishes, needs, goals, pain points, emotions, etc.
Finally we both voted on the issues we found most pressing — always keeping at the back of our minds the user we want to address.
User Persona
So who is our user? We now know that most of our users are between 20–40 years old and living on a plant-based/vegan diet. They are facing problems integrating the diet into their busy lifestyle. Processed vegan junk food often does the trick, but is not really what they need. One of the main reasons for their choice of diet is health after all! Living on a plant-based diet requires the right intake of nutrients in order to prevent health issues in the long run. How can we help our user to not only find the unique nutrition they require, but also help them be inspired to stick to their diet?
User Journey Map
Creating a user journey map is the next step in our Design Thinking process. This helps to define where the pain points for Catherine set in exactly. Where does Vojo need to make a change? What is the solution to the problem?
Problem Statement
After all that research lets define our problem and see on how me might help Catherine, our user, to find a solution to her nutritional needs.
Ideation
Let’s begin the fun part and get doodling…
Through the crazy 8 method Ellie and me are putting first ideas on paper. How could the website display information and results?
First Doodles
Decision Making
So now is the time to decide which of the features should be part of our website.
The current website feels friendly and warm, it looks fun and the little characters tell me this is a site I can trust! But once you get past the initial fun the website quickly feels very overwhelming and a little pushy.
A bit too often do I get asked to “sign up” or “go pro” or “ order now”, when all I want is to find out who Vojo is, what they are about and to see if I can trust them. And by the way what does a DNA test really involve?
Once you are signed in the Dashboard feels very crowded and overwhelming and it is very hard to find your way around and navigate the many hidden sliders and CTAs. However this is due to the fact that Vojo wants to be transparent about all your results. The current version offers many features.. a few too many.
So which are our must|should|could|won’t haves? A tough choice to make, but as we should think MVP, less is more!
While we decide on which features to include we are also drafting the user stories to go along. Not only does it help me to visualise the actual feature, but also helps to define the steps the user must take and what the developer needs to focus on.
Information Architecture
Now we have the features. But how good are any of them if the user can not find them? We have a lot of information contained within the website but how to arrange it. Which structure makes sense for the best navigation possible?
What better way to find out where information should be placed on the website than to go out and ask the actual users.
A card sort helps us gain answers on how the information should be bundled.
With the given information it is time to define to Information Architecture.
There are two paths a user can take. First steps take the user through Home page, About Us, DNA page(and Purchase DNA Test), Blog and Recipe pages, whereas path two takes you to your own Dashboard and results Pages with more recipes and tips for your own nutrition.
The User Flow
..is quite complex! But helps to clarify possible hiccups along the way. It visualises each path a user needs to take to get to a certain bit of information, feature or action within the website. A separate path for members and non members also helps to visualise the different offers available.
Prototyping
Low-fi Prototyping
With the help of Invision free- hand I am now designing the first drafts of all pages. From Home Page to LogIn, Questionnaire and Dashboard. A lot of different details here need to be considered. Can people purchase a DNA test without being a member? What if I want to gift it to a friend? What should the dashboard look like? Which results need to be shown — and how?
With the help of Ellie, (I am not only learning a lot about what details your DNA consists of and why this is important for your health and therefore MUST be shown in the results page) I am working my way up to a final design that also works for her customers.
First user tests uncover early issues (mainly to do with navigation and UX writing) that we can now begin to tackle in our next step.
Mid-fi Prototype
First free-hand drafts are now constructed into proper midfidelity versions. A few more alterations are undertaken to simplify and clarify the final design.
Conducting further user tests help us to stay on target. We now know that we need to find a different way of displaying data within the dashboard.
High - fi Prototype
More than 40 pages, more user testing and 3 weeks later we finally have our High-fi version of our brand new Vojo Website and Mobile Version. What a ride it’s been!
Looking at each of the many pages seems just too much to put you through so let’s instead show you some final product shots and comparison images of the before and after. I believe this will prove the work Ellie and me have put in within the last couple of months.
The Dashboard
DNA Results
Your Diet Page
Your Goals
Vojo. Health
