The live UK Voltaren site before redesign
Designing a new global mastersite for a pain relief brand
Improving global consistency, technical scalability and operational efficiency
Our client GlaxoSmithKline (GSK) is in the process of migrating their brand websites to a new global framework, with the aim of improving global consistency, technical scalability and operational efficiency.
Voltaren (Voltarol in the UK) is a GSK brand of pain relief products, whose goal is to help their customers restore the joy of pain-free movement.
My team was asked to optimise the UX, UI and content for the Voltaren website and to design the new global brand mastersite in accordance with the new global framework.
It was a large project that spanned across seven months.
The team
I worked as the Lead UX Designer in a team of talented and hardworking people. The core team included:
Account Director
Project Manager
Lead Strategist
Lead Visual Designer
Also looking over the project was the Strategy Director, UX Director, Design Director and the Managing Partner.
The ambition
Together we planned to tackle this project in three stages.
Uncover - Identifying the existing challenges and opportunities for a future-proofed website redesign, reviewing all influencing considerations including site performance, content and user experience.
Shape - Synthesising the findings and developing a set of recommendations and guiding principles that will inform the new global site strategy and design.
Deliver - Recommending content strategy, information architecture, user experience, functionality and design principles in accordance with the new GSK web framework and template set.
Uncover
Our first step was identifying existing challenges and opportunities.
We began by studying the following resources to ensure our initial insights were well-formed and data-rich.
Documentation from GSK
Input from markets (6 sites across 4 markets: UK, Germany, Italy, US)
Industry insights
Comparator inspiration
From there we approached this stage of the project from three perspectives:
General user experience
Review of comparators
Data & analytics
UX audit of live Voltaren sites
I reviewed each of the local market websites to identify best-practice opportunities.
I used Excel to take notes and rate each site with the following perspectives in mind:
Navigation - Looking at the structure, location, labelling and number of pages within the site
Content - Reviewing the type of content on the site against consumer needs
Presentation - Examining the site look & feel and how it supports the content and brand proposition
Interaction - Reviewing all interactive elements on the site and their associated actions
Mobile - Ensuring the site displays effectively on mobile
This initial audit uncovered there was significant room for improvement in these five areas across all markets.
Content mapping live Voltaren sites
In addition to the audit, I also mapped out the content of each page type to see if there were any gaps in content.
While there was plenty of useful content about treating pain, I found there was almost no content around brand proposition, which is key for establishing trust and moving users further down the purchasing funnel.
Comparator review
While I worked on the UX audit and content maps, the Strategist looked at innovative ways digital is being used across the market to deliver consumer-oriented brand experiences.
To get a good sense of the market, she reviewed three types of comparators:
The following are some of the takeaways she found.
The imagery of direct and indirect comparators lacked diversity in terms of race, body shapes, ages and abilities. This was also an issue Voltaren had, which may prevent consumers from seeing Voltaren as a brand from them.
GSK's Global Pain Index report states pain sufferers struggle to find the words to communicate their pain and have more success using colour and sound. Comparator COVE uses clever imagery and colour to help show that they understand what suffering with migraine pain feels like.
Comparator Push Doctor uses social networks to share examples of social proof, like video testimonials. The brand also prompts customers to write reviews after purchase.
There is an opportunity to use quizzes to capture customer data and use it to personalise the solution, which was common among comparators.
Data & analytics
An Analyst joined our team for the Uncover stage to help us review the current performance of the Voltaren sites.
Specifically, we looked for similarities and differences in behaviour across all local markets and then by certain key groups (e.g. device type, traffic type).
Some of her insights included:
- Over the 12 months of the analysis period only 15% of visitors returned.
- There were as many young visitors as there were old.
- All three personas (introduced later) were represented as visitors, but persona Pain Planners were most engaged.
- There was little difference in the top pages viewed by personas. There is an opportunity to personalise content to their pain stage.
Uncover findings
In the end, we uncovered there were opportunities to...
...make the navigation more intuitive.
...improve content in terms of relevancy, presentation, general consistency, presentation, brand consistency, diversity and relatability.
...create an end-to-end customer experience with the integration of a direct-to-consumer e-commerce option.
...create an improved mobile-first user experience.
...ensure the sites are as accessible as possible, through both design decisions and tool integration (e.g. voice-to-text).
...develop a connected digital ecosystem through content partnerships (e.g. with athletes, experts), third-party integration, IOT connectivity and developing a community.
Shape
After forming a preliminary understanding of the market and the current product, we began shaping our focus and digging further.
As you saw above, there were many possible opportunities with which we could have moved forward, so we worked with the client to establish a role of the website to help focus our efforts in Shape.
Role of website:
"A data-fuelled, holistic pain management hub supporting people on their journey to pain-free, joyful movement with trusted content, relevant tools and targeted pain relief solutions so that they are empowered to take control of their pain through education, connection and products & services."
Keeping the new role of website in mind, we went back to our list of opportunities and decided to focus on the following:
Improving the navigation
Improving the content
Optimising the mobile experience
Ensuring the site is accessible
The other opportunities (direct-to-consumer e-commerce functionality and a connected digital ecosystem) were unrealistic for our MVP and would be catalogued as ambitions for future iterations.
In order to accomplish the above goals, we utilised the Shape phase to do the following exercises:
Personas
User journeys
Content audits
Site architecture
Design exploration
Personas and user journeys
Personas
Personas were supplied to us by Voltaren, as they had been created recently as part of a massive development programme called Marketing IQ, led by GSK Global.
We were asked to focus on the following three personas of their total of five:
Mover Mender - occasionally requires pain management due to their active lifestyle
Pain Denier - ignores their pain before eventually seeking treatment
Pain Planner - proactively manages their pain
These three personas covered the following consumers, which Voltaren had identified as their core strategic targets:
Occasional body pain sufferers: Adults aged 30-55 who are sometimes troubled by muscular, neck, back or shoulder pain.
Persistent body pain sufferers: Adults aged 55+ who want to treat their moderate-to-severe, persistent joint and back pain.
The Voltaren persona document was invaluable — very detailed and highly informative. However, to make sure we didn't get lost in the details going forward, the UX Director and I made something more actionable for our purpose by studying the 91-page document and, with great care, distilling it into three slides (one for each persona and their journey, viewable below). To ensure we weren't misrepresenting the personas, we worked with the client and went through a few versions before reaching our final document.
Our personas gave us a snapshot of the target consumers' daily lives, their relationship to pain and their need states.
Personas and their journeys
User journeys
Our user journeys illustrated how users might arrive at and move through the Voltaren site, and it included what they would be looking for and what the site would need to do to answer that need.
Mapping these journeys allowed us to see where consumers interact with the brand and to highlight potential gaps between user needs and current experience.
From the user journeys, we could see the site should include:
A good range of educational and lifestyle content to empower the user
Answers to all potential questions to enable the user to understand their pain and inspire them to make the most of their visit to the site and ongoing interaction with the Voltaren brand
A showcase of available products and pain relief solutions to inform and reassure the user
Content strategy
Before we could determine what content would go on the new site, we needed to look at what was already there and what could be repurposed.
To ensure the health care information meets highly responsible and ethical standards, all content on GSK brand sites has to be approved by the GSK Claim and Copy Approval Teams (CCAT). For this reason, we were asked to lift and shift as much of the existing Voltaren content as possible, to avoid the need of CCAT re-approval.
Methods of evaluating content
Using our findings and insights so far, the Strategist and I came up with six content principles by which new and existing content would be evaluated.
Voltaren content should be:
Holistic - Content embodies Voltaren's brand behaviour as a pain relief ally
Accessible - Content design and format is consistent and aligns to accessibility best practice
Clear - Content is simple and easy to understand, not ubiquitous or overwhelming
Empathetic - Content acknowledges the full impact of pain and helps consumers feel understood.
Joyful - Messaging is energetic, positive, optimistic and working to restore the joy of movement
Premium - Imagery, copy and functionality look and feel premium
This is the lens through which we conducted the following audits.
Qualitative content audit examples
Qualitative content audit
Expanding upon the audit I completed in Uncover, I reviewed the live Voltaren sites further, this time marking up the pages themselves and getting more granular.
This both helped the client visualise our recommendations and helped the Strategist include best practice recommendations while writing content briefs later.
Qualitative audit findings
Looking at the content from a UX perspective, some of the issues I found were:
content not fit for purpose
large amounts of content duplication, both within individual pages and across the wider site
inconsistencies in word choices, capitalisation (title case vs sentence case)
grammatical errors
page titles not matching links in navigation
long, dense paragraphs unsuitable for scanning
lack of visual hierarchy
Quantitative content audit
Because she knew she would later be writing content briefs for a copywriter, the Strategist's audit was even more granular than mine.
She audited all 73 pages of the existing site to see what content could be repurposed, what needed to be reworked and where there were any gaps in content.
She utilised the notes from my audit and included them in her wider document, which examined every existing page through the lens of:
Brand and tone of voice
Consumer needs
Expertise, authority and trust
To future-proof the site, the audit also examined how well existing content delivered against the new role of the website.
The Strategist used a scoring system to make her findings quantitative, which made it easier to see which pages needed heavy reworking and which ones required less work. The higher the score a page received, the easier it would be to incorporate into the new site.
Quantitative audit findings
As you can see in the graph here, the majority of pages were ranked as needing easy to moderate reworking. Some of the recommendations for these pages included:
Improve signposting and reorganise content so that customers can find the content they need quickly.
Improve scannability by organising content and making copy snappier.
Break up long paragraphs and be selective. Distill copy to the most important information.
Remove content duplication and updated outdated content.
It was an impressive document, and the clients were over the moon about the amount of detail. The document was especially invaluable further down the line when it came time for her to write the content briefs.
Figure made by Strategist
Content gap analysis
From our work, the Strategist pulled out 18 opportunities for new content, some of which included:
Real-life pain journey stories where people use Voltaren as part of a holistic pain management regime
Pain prevention techniques that are of interest to Mover Mender consumers
Holistic pain management content that provides consumers alternative solutions, helping to position Voltaren as a pain relief ally
Some examples of holistic pain management can be seen in the image here.
Information architecture
Having looked at the content, we were now in a position to start organising it into a site structure.
Site architecture
The primary navigation of the existing site was as follows:
'Understanding pain'
'Pain & treatments'
'Our products'
'Take 2 to move'
Immediately you will notice the menu names were vague and that there was no 'About us' section to house brand propositions.
Below you can see the site structure of the existing site at the start of our project.
Site structure for the UK Voltaren site before redesign
I was interested in exploring other ways to organise the content, either by combining the editorial and informational content or finding a completely new way to break up and categorise the content.
However, the external SEO specialist brought in by Voltaren wanted the content under 'Pain & treatment' to remain siloed in its own section, the reason being Voltaren could then win in treatment-focused keyword searches.
Keeping this in mind, and drawing on findings from the content audits, I changed the menu names slightly, removed the outdated campaign pages ('Take 2 to move') and added a section for corporate content:
'Learn about pain' (editorial content)
'Treating your pain' (informational content)
'Our products' (all products)
'About Voltaren' (corporate content to build credibility)
Card sort to test IA
I wanted to test how users might categorise existing pages under my updated menu titles.
I set up a card sorting exercise that allowed participants to group 30 page titles (taken from the existing site) under the four primary navigation sections. This included all 13 pages under 'Treating your pain', the section the SEO specialist didn't want to change.
The results confirmed our hunch: even with my updated titles, it wasn't clear to respondents what content sits under each section and each page. The results could also imply that having the treatment content siloed isn't the best way forward from a user perspective. But the SEO specialist didn't budge in her recommendations, so I made it work for us by changing 'Treating your pain' to 'Treatment by pain type', as it was essentially a directory of pain types.
We also gave the content in each section clear roles:
Learn about pain - Educating consumers on the pain category and holistic pain management through engaging, editorial-type content.
Treatment by pain type - Enabling consumers to take control of their pain treatment through practical, action-oriented and scientific content.
Our products - Clarifying product benefits so consumers know which products best meet their pain needs.
About Voltaren - Establishing brand credibility through expert and corporate content.
Final revised site architecture
Design exploration
While the Strategist and I did our work, the Visual Designer was studying the Voltaren brand guidelines and exploring design options for the new site.
He used the live site as a basic structure with which to explore possible design styles. Taking brand guidelines into consideration, he knew he wanted something that conveyed energy, optimism and joy.
Below are the moodboards he created to help in the design exploration.
The 'Goldilocks' option the client chose
Design options
After doing some thinking and experimenting, he presented the client with three design options.
The 'safe' option - This was the option that followed the brand guidelines and component library the closest. The advantage was that it would require less work; the disadvantage was that we'd be fighting an uphill battle to improve the site while using the same visual puzzle pieces.
The 'stretch' option - This option pushed the flexibility of the components as much as possible, while still respecting brand guidelines. His motivation was to make the site look distinctive and to drive brand recognition.
The 'Goldilocks' option - This option was the best of both worlds. It was a bit more reserved in its demands of existing components while still being fresh and effective. This is the option the clients asked us to move forward with.
Deliver
After presenting the above findings and recommendations to the client, it was time to create the final deliverables.
The following were our initial goals (as a reminder) along with what we did to achieve them.
Improving the navigation - Our navigation better supports user journeys by being clearer, more scannable and less complex. We future-proofed it by allowing for flexibility for when Voltaren has more products to surface. We have encouraged that an analysis of journeys against KPI goals be conducted regularly to identify optimisation opportunities.
Improving the content - If the content briefs are followed, pages will now be informative, empathetic and instill a feeling of trust. The content will have the primary and secondary personas in mind and be SEO-optimised.
Optimising the mobile experience - We designed with a mobile-first approach and worked with the development team to verify the copy and buttons within components are formatted correctly, as this was a problem on the existing site. We also gave recommendations on how to format longer pages effectively on mobile.
Ensuring the site is accessible - We made sure all coloured text passed the WCAG AA guidelines at a minimum. We made recommendations that should lead to the site being built in a way that is compatible with screen readers and using the keyboard like a mouse. We designed a voice-to-text feature for the search bar that has been included in the feature backlog. We also made small decisions that should limit the amount of effort required by the user, like the cursor automatically becoming active in the revealed text field after clicking the search icon.
Content briefs
Final wireframes
Final designs
Navigation
Feature backlog
Feature backlog
Some of the features we had initially wanted to include in the new design wouldn't be achievable at the MVP level, so we created a feature backlog document to deliver alongside the designs.
The document detailed future tools and features we recommended be implemented to fully achieve the role of the website. It also included details on the functionality of more complex modules for the MVP.
Next steps
We packaged up all our work into actionable deliverables and passed the baton to Voltaren.
Now comes the time for them to:
Build and localise the mastersite
Track the KPIs we recommended
Implement our recommended tools and features over time
Once the site is built and live, we hope Voltaren will allow us to test the site with users and iterate.
The experience ambition
Running parallel with this project was another workstream called the Experience Ambition, whose task was to inform a multi-year roadmap to elevate the user experience across the Voltaren mastersite through new experience recommendations.
Our redesigning of the Voltaren site was us getting the basics right across the information architecture, content and design so we can build on top of it over the next three years.
Client feedback
Thank you for reading!