Zava launch

Leading the design, I helped online healthcare service DrEd rebrand to Zava and redesign their website. Scroll down to read more.

Background
Zava is an online healthcare service, providing patients with prescription medication, advice and care. They have a team of 70 treating over 50,000 patients a month, operating an award-winning platform across 6 countries and counting (UK, Germany, Austria, Switzerland, France and Ireland) and partner with large corporates like Superdrug (onlinedoctors.superdrug.com and healthclinics.superdrug.com).
Zava was set up in 2011, known then as DrEd. For a long time, DrEd worked as a brand. But as time went on, the company they were creating had outgrown it. And that disconnect grew, almost by the day.
In 2016, DrEd decided to rebrand to Zava. But not just rebrand - also redesign their website and re-platform onto a new CMS and technology stack. I joined DrEd in July 2016; just as the Zava website redesign project was kicking off.
The business aim going forward was to shift from a 'give me treatment’ business to a 'long-term healthcare relationship' business. Clients would come for Viagra, but stay for the quick, efficient advice and follow up care and treatment that helped them lead a healthy life.
Vision & Values
Before kicking off any design work, it was very important to come up with a brand vision and values for Zava. These are what drive our actions, as individuals and as an organisation. They are distinctively Zava and they shape the culture. It also helped measure and grade everything I designed against something.
"Our vision is to stop fear of judgement damaging the world’s health."
Design Process
It was decided to tackle the project in a waterfall approach, due to the company structure and time constraints. There were five core templates to design:
1. Home page
2. Service page
3. Product page
4. Content page
5. Generic page
Discovery
Before we started to design, we needed to understand our users problems, needs and emotions with our current site. We did this using various research methods:
- Data (Google Analytics & Looker)
- Heatmaps
- Existing research
- Interviews
- User testing (WhatUsersDo)
- Usability testing (UsabilityHub)
After getting a definitive list of user problems and needs, we moved into the design process. This began by facilitating regular workshops with various stakeholders across the business - marketing, doctors, pharmacy, engineering etc. The first workshop would be a kick-off to get aligned, share the above research findings and gather requirements.

Doctors in a workshop

Wireframes
Next would be a sketching workshop where I would run some exercises to quickly gather ideas. I would then go away and create low-fidelity wireframes.

Content page wireframes

Content page mobile "fold" and module exploration

Design language
Exploring perceptual and functional patterns for the product.

Zava product colour palette

High-fidelity design
Using the Zava design language to create a UI and pattern library.

Content page designs

Final mobile page layouts in Sketch

Final desktop page layouts in Sketch

Using InVision for developer handover, prototyping and specs.

Testing
It was important to test the UI and page layouts throughout the design process to ensure it resonated with our users and solved their problems. This taught us a lot and helped refine our design and gain empathy for the users.
Prototype
We used this prototype to test flows, features and pages internally and externally.
Accessibility
Coming soon...
Design Consistency
Working with other designers on the UI, flows and features, it soon became very apparent that there were inconsistencies in our designs for Zava - even with communication and collaboration. Things like margins and padding, navigation styles, icon usage and interactions were all designed slightly differently by each member. Every meeting or conversation to discuss these issues would end with uncertainty - we all had our own interpretations of what was correct.
I saw this as an opportunity to solve a problem using some frameworks and trends I had been hearing about - Atomic Design by Brad Frost and Design Systems which are being implemented by some of the most successful design-driven companies, like Mailchimp, Salesforce, Shopify, FutureLearn
Atomic Design
Write up coming soon...
The future - Design Systems
Coming soon...
Back to Top