Re-designing the whole online shop to attract customers to purchase daily living aids and increase the revenue for the charity
Role: UX Researcher/UI Designer (Group Project)
Duration: 2 weeks
UX Techniques: User Research | Competitive Analysis | Data Analysis | Screening survey | User interview | Sketching | Sitemaps | User Flows | User Testing| Wireframing | Prototyping
Tools: Sketch | inVision | Photoshop | Pen and Paper
Dementia is the UK’s biggest killer. Someone develops it every three minutes and there’s currently no cure. Alzheimer’s Society is the only UK charity that campaigns for change and supports people living with dementia today.
As the largest and most influential dementia charity in the UK, they fund research into the cause, cure, care and prevention of the disease. They also campaign to change society and funds research and innovation to improve care and ultimately find a cure.
The Alzheimer’s Society Online Shop sells assistive products to help people to live well with dementia. Alongside this, they sell a wide range of cards and gifts, branded merchandise and books on dementia.
“Alzheimer’s Society recognises the value that digital user experience and inclusive design can make to meeting the needs of our service users, along with our strategic mission. However, we currently have a single UX Architect to run user-centred design practice across our total estate of dementia support services and products.
This serious experience design resource bottleneck, along with our limited budget/resources as a charity, means that our shop service has never received the investment in UX that it deserves. It's affecting our ability to raise vital income from our shop. It is also affecting how we join-up people in crisis with products which would help people affected by dementia to live well and longer in their own homes.”
Double Diamond is the name of a design process model developed by the British Design Council in 2005. Divided into four phases — Discover, Define, Develop and Deliver — it is probably the best known and the most popular design process visualisation.
The main feature of the Double Diamond is its emphasis on the “divergent” and “convergent thinking”, where first many ideas are created, before refining and narrowing down to the best idea. This is happening twice in this model—once to confirm the problem definition and once to create the solution. That’s the approach we’ve used for this project.
As an established and well-known brand, Alzheimer’s Society has been conducting internal reports for years. As part of their customer satisfaction research, we were able to utilise important feedback provided by their users.
All that data helped to guide us in understanding how we could start the project by analysing the opportunities from each insight. My main contribution here was the ability to synthesise user research and draw valuable insights to inform our final solution. I provided recommendations backed by real data and insights.
As a way to understand more about what competitors were doing when selling daily living aids, we selected some examples of dos and don’ts. Competitive analysis helps us to understand and explore opportunities and gaps in the market.
Things competitors did well:
Bad things competitors did:
To validate the data shared by our client, we wanted to understand more about users’ motivations. We ran a short survey at the end of Alzheimer’s Society checkout process helping us to track some pain points throughout the journey.
We asked users:
We had 157 respondents who have purchased from the online shop. After filtering through the information collected, six points stood out:
Part of our discovery phase was to also conduct in-depth interviews. People who recently bought living-aid products gave us important feedback when it comes to purchasing with our client’s competitors.
“My general thought about those sorts of sites (charities) its that they are a bit clunky and difficult to use. There’s one major incentive that would change my behaviour in that sense and make me actively want to buy their products. I would do it to support the charity because it makes sense to put money back into research to find a cure for dementia.”
To summarise our insights and quotes from users to understand patterns an affinity map was created with our main findings.
The combination of both testing sessions and checkout survey helped us to map the customer journey when using the current website. We also ran testing sessions on the current website to create an emotional map where we could see the main pain points. Users were asked to complete the purchase of a specific product and talk about the steps taken throughout.
To summarise all our research findings we created our persona – a fictional representation of our users’ insights:
Holly needs to help her mum to be more independent because her mum is suffering from memory loss and Holly can’t always be around to help her.
To brainstorm ideas that could help solve users’ problems, we ran a design studio session with our client. It involves sketching possible solutions, sharing and then refining the ideas.
To guide this process we considered the following “How Might We” questions:
According to our research, the categories were one of the main pain points in the journey. So our next step was to consider what categories would improve navigation. For that, we conducted a card sorting activity. Users were asked to assign Alzheimer’s Society shop inventory items into predefined categories. The suggested categories were based on our audit of other charity websites.
Card sorting activity also helped us to create sub-categories.
13 users participated in the card sorting activity. From that, we simplifying the categories into:
And that’s where they sit within the site map:
We took the "How might we?" questions to our design studio session that was done with our client.
Next, we sketched combinations of our best and most voted ideas on paper to run the first set of tests with users.
To group the survey results we collected, we created an affinity map to help visualise the pages that would still need to be changed through the iterative process. After testing the paper prototype, many issues appeared in the flow.
Homepage, product page and applying VAT relief info were the most problematic parts of the flow.
After seeing the homepage was one of the most problematic pages in the flow, the team had two different ideas so we conducted an A/B testing.
A/B test: experiment where two variants of a page are shown to users at random to see which one performs better. We ran two rounds of testing sessions with 12 users in total.
User Testing Insights
Most painful points on the flow:
After collecting all feedback from testing sessions, we iterated the prototype making the changes that would make the flow smoother to users.
We combined A and B concepts to create our final homepage.
When testing our paper prototype, users were confused when choosing the right product. “What is it good for?” was an idea that came from our design studio to highlight the different ways of using the product with icons or pictures. Users thought icons could be quite confusing and not really meaningful.
Delivery cost below the product price was also confusing. Users thought that was the only delivery option. They were also not sure how the website would know this information without their address information.
One of our suggestions for the website was immediately implemented to their current website:
From our testing sessions with users, it was a clear way for them to see where they would need to apply the information to get the VAT relief applied to their purchase.
To apply visual elements to our prototype, we’ve used the existing brand guidelines. Forms and buttons style were applied throughout all pages for consistency. We kept the main blue colours but the light blue was used to represent the call to action. On the previous website, calls to action could either be blue, green or pink and that was confusing to users.
We added grey to the colour palette to counterbalance the bright colours. Grey was already being used on the website but wasn’t highlighted on the guidelines. New icons were also included following the current brand style.
To use the coral pink as an accent colour, we reviewed the typography styles and sizes to make it accessible changing the font size to 18px.
To connect with Holly’s problem and help her achieve her goal we imagined the following scenario:
Working with the Alzheimer’s Society was very rewarding for me. I’ve learnt more about the incredible work they do at the charity and how they want to improve the lives of people living with dementia. The charity’s main goal is that each individual affected by the disease can live well and longer in their own homes. It was challenging to deal with such a delicate subject to users – when it comes to buying specialised products for their loved ones. Our UX Design group received a lot of support from them with all the data provided to help us guide our research. I believe these design changes will improve the overall user experience and in particular streamline the donation process. I’m hoping that those changes result in an increase in donations and purchase of daily living aids. This will help more people living with the disease and everyone around them.