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.
Vision & Values
Before kicking off any design work, it was critically important to implement a brand vision and values for Zava. These are what drove 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."
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 quantitive and qualitative research methods.
Analytics and data
We used data to drive our design decisions, so looking at existing DrEd analytics was essential. It helped us to inform which resolutions and devices to design for (74% mobile traffic), the most common user flows and landing pages and also our demographics and user segments.
Heat-maps
We used a service called Hotjar which we used to create heat-maps for specific pages. This was useful to see what content and elements users engaged with and gain insight into scroll-depth - especially on mobile.
Existing research
Our research team had a wiki where I was was easily able to dig into into previous research and insights.
Interviews
With our research team, I helped facilitate or participate in face-to-face interviews with our users and potential users. This helped us get insight into the "why" behind the "what" and dive deeper into mental models and empathise with users problems.
User testing (remote unmoderated and moderated)
User testing helped us quickly test and validate our wireframes and visual designs by getting prototypes into their hands quickly. This usually involved speak-out-loud testing, 5 second tests and task-based tests.

Doctors in a workshop

Wireframes
After unearthing insights and user problems/needs, we moved into ideation work - sketching, wire-framing, rapidly prototyping and testing. Regular workshops were facilitated with various stakeholders across the business (marketing, doctors, pharmacy, engineering etc.) where exercises would be ran to quickly gather ideas. It was then my job to go away, analyse, design, test and share back findings. Here are some of the low-fidelity wireframes that I designed and tested.

Content page wireframes

Content page mobile "fold" and module exploration

Design language
Before jumping straight into the visual design process, I created some foundations for design to enable consistent, efficient and rapid design. I started by exploring perceptual and functional patterns for the product.

Zava product colour palette

High-fidelity design
After the wireframes were complete and the style guide/design language was 'signed-0ff', it was time to create a some high-fidelity UI and patterns.

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, helped us validate ideas and helped refine our design and gain empathy for the users.
Prototype
I created this prototype to test flows, features and pages internally and externally during the design process - constantly improving and iterating on it.
Accessibility
As a healthcare company, accessibility was very important for us and our users. This meant making sure that our web pages and applications were available to everyone, including people with disabilities.
The led to me creating an explicit policy that Zava would have Level AA Conformance to Web Content Accessibility Guidelines 2.0. Working with stakeholders and engineers to ensure every knew best practices and how to ensure compliance, we managed to launch the an accessible site without any violations.

aXe accessibility checker in Chrome inspect tool showing zero violations

Launch
Zava launched successfully in March. When we launched, we were selling 99 treatments per day on average. Three months later, in June, we are forecast to sell 126 treatments per day. That’s 26% growth in three months - a fantastic result for myself, the team and the company and a good reflection of the improved UX and UI we delivered.
Back to Top