UX transformation program at Vouchercodes.co.uk

Webcredible very quickly understood our organisation, working with key stakeholders to embed UX into our design processes. Having them on-site was invaluable for upskilling, bringing teams together and helping define a UX strategy.

Richard Shepherd, Product Director, VoucherCodes 

Context

VoucherCodes.co.uk is UK’s biggest voucher code website with over 7 million members. VoucherCodes.co.uk helps consumers save on purchases by negotiating discounts and deals with merchants. After a couple of tactical research projects (user testing of their desktop and mobile websites), VoucherCodes.co.uk recognised the value of user-centred design and commissioned Webcredible for a three month engagement to assist them in embedding user-centred design into all product development processes and increasing their level of UX maturity within the organisation.

My role

I led the engagement from start to finish as a UX Coach with help from my mentor and Experience Lead and also a Data Consultant and formulated a concrete plan of action to help the client meet their objectives within time and budget.

Challenge

• Lack of dedicated UX skills in the organisation and requirements going straight into to high fidelity visuals and then code
• Lack of user testing before launch
• Lack of collaboration between teams

Process

Immersion

We started off the engagement with a two-week immersion phase. We interviewed key stakeholders in different teams – product, design, marketing, sales and content. Based on the conversations, our team identified four streams of engagement we could help VoucherCodes with:

UX strategy

Help VoucherCodes set long-term customer- centric goals and plans to achieve them through stakeholder and user engagement

Training

Upskilling of the design and development teams at VoucherCodes to learn design thinking and evidence-based design

Pilot UCD

An end-to-end user centred design project on a feature within a product to demonstrate the value of UCD and train in-house teams

Tactical optimisation

Help VoucherCodes designers with tactical design decisions on VoucherCodes products

Plan

I presented multiple iterations of our plan of action back to the stakeholders to get their early feedback and sign off. I documented a comprehensive timeline of activities with goals, owners and required resources and shared it on the cloud. The document helped stakeholders understand the activities involved in the engagement and helped set their expectations.

Stakeholder workshop

One of the first things we did was to bring various stakeholders across the business into the same room and align on their vision, business goals and user goals. 

Affinity mapping of business and user goals

We asked the stakeholders to come up with as many business and user goals as they could think of and write them on individual post-its and used affinity mapping to categorise them. Early shared understanding of goals is critical to the success of any UX project.

Visioning exercise: ‘Design the box’

To help the stakeholders think more creatively outside of their normal ‘work’ mode, we ran a ‘Design the box’ game as a visioning exercise to generate new product ideas.

Key ideas generated from the exercise:

• Be a personal shopping assistant 
• Be simple. People don't need to care about how it works.
• Surprise and delight through reveal and instant gratification.
• Make shopping guilt-free thanks to the savings

Goals and principles

We used the findings from the stakeholder workshop to generate a prioritised list of business and user goals and a first iteration of the VoucherCodes design principles.

Collaborative development of personas

After speaking to the head of marketing, I found out that the Brand team had plans to develop ‘pen-portraits’ of users based on their quantitative research findings. The Product team was not aware of this. I suggested that the two teams work together to develop personas to ensure that they become shared decision-making tools and not just novelty artifacts. I ran a collaborative workshop to develop the final personas based on the qualitative and quantitative research findings.

Value proposition workshop

We helped the product director develop a new value proposition to go into the product / UX strategy. In the workshop, we:

• listed the key challenges for every persona and the business challenges
• brainstormed solutions / features to address the challenges
• generated the value proposition statement using the solutions brainstormed

User journey maps

We helped the product and data teams understand the process and value of creating user journey maps.The product team was able to use the journey maps to empathise with the user as they go through their journey of saving money while shopping. The data team were able to recognise opportunities and gaps within the user flows.

Training

On top of the embedded intervention and coaching, we also delivered the following formal training sessions to relevant members of the VoucherCodes team:

• UX fundamentals presentation
• Design thinking workshop
• Mobile UX training
• Copy writing training

User-centred design of the mobile app sign-up flow

I believe in learning by doing. Hence, to help the teams understand the process of user-centred design, we ran a pilot UCD project with the design team at VoucherCodes. After speaking to the mobile Product Lead, we found out that there was a sign-up and user onboarding feature in the pipeline. Hence, we decide to apply the design thinking methodology on it to redesign the feature. Due to VoucherCodes being new to this way of working and the constraints in the design resources, we took a lean approach so that the focus was more on the methodology and the outcomes rather than stringent processes and heavy documentation. We planned the following activities as part of this pilot:

1. Stakeholder interviews to ensure key stakeholders requirements are captured and understood early on
2. Guerrilla user research in coffee shops to get quick feedback on the existing sign up flow and to enable designers to practice their user interview skills
3. Design studio workshop to enable collaborative ideation of solutions
4. Scenario generation and storyboarding to upskill designers on creating and using these empathy building tools
5. Paper sketches to quickly visualise ideas that can be tested internally
6. Lo-fidelity prototyping to rapidly digitise the sketches into interactive mockups and not move straight into Photoshop!
7. Guerrilla user testing to validate the lo-fi prototype

Stakeholder research

We selected a bunch of relevant stakeholders from different teams and interviewed them to understand their vision, goals and fears related to onboarding and sign up and VoucherCodes in general. We also encouraged the VoucherCodes designers and developers to shadow us during the interviews and also conduct their own interviews too.

Guerrilla research

We conducted guerrilla research with 8 participants in coffee shops and offered a cup of coffee as incentive. The Head of Design and a designer shadowed me during the sessions to learn how to conduct guerrilla research. A session lasted around 15 minutes on average. One participant spoke to us for 40 minutes! We asked about their shopping behaviours and use of technology and got them use the sign up flow in the existing mobile app. 

Besides the usual usability issues, one of the main pain points we uncovered was on the sign up screen below which was part of the user onboarding process. 

Most participants who did not have an account knew that themselves and did not want to enter their email address because they did not need the app to check if they had an account. To make matters worse, there was no way for them to go back or forward in the journey. A lot of participants said they would give up or exit the app here without even using it.

Ideation & prototyping

Collaborative ideation: To ensure we get buy-in from the stakeholders, we invited them to a design studio collaborative design workshop. The workshop was attended by the mobile product owner, mobile developer and two visual designers.

Scenarios & storyboards: We sketched the scenarios of use for the sign up flow for the different personas. We did this along with VoucherCodes designers.

Paper sketches: Based on the scenarios and the sketches generated from the design studio workshop, we iterated several different versions of the paper prototype. We conducted internal hallway testing after each iteration to ensure the designs were on track.

Lo-fidelity prototyping: After two iterations of the paper prototype, we digitised the mockups using a rapid- prototyping tool called Balsamiq. We deliberately introduced VoucherCodes designers to low-fidelity prototyping tools as they were jumping straight into high-fidelity tools like Sketch, Illustrator and Photoshop too quickly. The Balsamiq mockups were still interactive and designed within the screen constraints of a mobile phone which made it easier for us to test the mockups with users. We tested the mockups using guerrilla user testing at the coffee shop. The final annotated mockups can be viewed here.

By the end of the process:

• We had a robust design that had been validated iteratively both internally and externally.
• All the key stakeholders had shared ownership of the designs as they were all involved in the process from Day 1.
• The development team were confident of building the product within time and budget.
• The VoucherCodes product team acquired a much higher level of awareness, knowledge and practice of various UCD methods and tools.

Key outcomes

Greater cross-team collaboration

We helped VoucherCodes to start breaking down the silos and collaborate between teams who normally did not speak to each other

Increased UX maturity

We helped increase the level of UX awareness and maturity within VoucherCodes from an organisation that was interested to one that was more invested.

Design as styling to design as process

We helped VoucherCodes move from the use of design as just styling to design as a core process in product development.

Top learnings

• Identify key stakeholders and gaps early.
• Keep key contact in the loop with every decision.
• Set clear expectations from different parts of the business (e.g. stress the importance of looking at the business strategy to help guide the UX strategy).
• Identify UX champions / advocates within the business who will help you spread the UX goodness.
• Encourage collaboration between teams that don’t necessarily talk to each other (e.g. product and content or product and marketing).
• Sharing the streams, plans, goals, timelines early with the client helped them understand our value proposition. Until then, they were not clear what we would be doing.
• Give stakeholders plenty of notice for meetings / workshops.
• Start small and focus on the quick wins to gain credibility within the organisation.