Background

Mous is a rapidly growing tech accessories brand. Much of their £10.2m annual sales in 2019 came through their ecommerce website running on Shopify. The flagship product lines is their phone case. Some of their accessories are only compatible certain case ranges.

I was brought in as Lead UX consultant to help redesign the website to support an expanding product range and improve the user experience.

Approach

Discovery

The client anticipated the website could be fixed with a few quick solutions: redesign the navigation, redesign the homepage, redesign the product page. Rather than diving into these requests, I dug deeper to understand the root of why the website wasn’t meeting user expectations. Furthermore, I asked Mous, how they wanted their website to represent them.

I conducted 1-to-1 interviews with various stakeholders across the business; including Customer Support, Marketing, Social Media, and Creative. There were different views and expectations between departments. To get everyone on the same page, I created and ran a discovery workshop.

This process also helped me to understand the customer, user journeys and business priorities. The project’s ‘North Star’ was defined by a set of prioritised “How Might We’s”.

Card sorting and analysis

The discovery workshop helped the client realise the website redesign had greater potential and that a few quick fixes wouldn’t be a sustainable solution. With the client on board, I worked to propose the information architecture for the new website.

I created content cards based on the discovery phase. Individuals from each department independently sorted them in an open card sort in the OptimalSort tool by Optimal Workshop. The tool outputs analysis which I used to form the foundation of my information architecture.

Using a bit of human understanding, I made some adjustments to the suggested groupings for my proposed information architecture.

Proposal and planning

The information architecture and site map became a solid project definition and scope. I then suggested a project plan and route for delivery which integrated with the existing website.

Participatory design

I lead a half day design workshop based on activities from the Google Design Sprint. Individuals from various departments joined in. This was another great way for everyone to get some ideas down and ‘have their say’. We reviewed the sketches, voted on our favourite elements and discussed our reasoning. The activities and review were set up to prevent ‘groupthink’ or the ‘HiPPO (highest paid person’s opinion) effect’ – where the most senior person’s opinion dominates the discussion.

Design sprint process

I started each sprint by hand sketching variations on design solutions. These could be on page elements, page layouts or user flows. This approach allowed me to get rapid feedback with regular presentations to the client.

Next, I would formalise the direction with wireframes and UX annotations. After presenting these to the client and finalising the work, I moved on to the UI design. I provided copy suggestions and image direction in my handover to the in-house creative team.

User feedback and improvement

Guerilla testing

I wrote a test script and guerilla tested new designs. One discovery was that the compatibility of ‘Add-ons’ was not clear from the catalogue. Combined with Customer Support evidence, this lead to the total abandonment of the term ‘Add-on’, which was a key turning point for the brand, let alone the website. I used visual links to indicate compatibility and added a compatibility checker function to the shopping cart.

Split testing

Every design change was split tested on the live site before being fully rolled out. An example of UX design solutions I proposed testing in a multivariate test was the navigation. We used the data from these results to make confident design decisions.

Hotjar observations and improvements

Recordings of real users interacting with the live site revealed that the filters on the catalogue could be missed. I proposed a fix for this by increasing their visual weight and adding a label.

Deliverables

Personas and user journeys

We decided to create three personas based on where a user could be in the conversion funnel. This felt like the most tangible way to think about user needs and journeys.

Information architecture and content

The site map solidified the website direction in everyone’s minds. I also produced an information architecture document, which included suggested content for each section of the sitemap. The page templates needed to be versatile to represent different ranges or product types.

UX design example: Catalogue

The catalogue was arguably the most significant improvement to the Mous website redesign. With this custom-designed catalogue, users could see what worked with their device, discover compatible accessories and conveniently browse through case variants.

UX design example: Funneling users to compatible products and upsell

I designed a user flow to give users the freedom to explore ranges, but ensure they were directed to products for their device. I also considered the upsell of accessories throughout the user journey: from exploring ranges to checking out.

I designed a ‘bundle’ type upsell page just before checkout. This reminded customers about accessories and made it easy to add them to cart. The idea of creating a ‘bundle’ was designed to encourage customers to explore a range of accessories to make their phone even more versatile.

UI design: Accessories product pages

Mous puts considerable engineering effort into their accessories so that they exceed customer expectations. The design and content of the accessory pages needed to reflect this. The design also needed to accommodate dark and light themes.

Brand essence: About pages

Mous prides itself on a relentless drive to solve problems through engineering and design. The ‘About’ section had to live up to this reputation and concisely communicate technical information in an interesting way. I reviewed the brand story, discussed the technical side with engineers and explored the brand direction with the co-founders. I distilled the content, designed the pages and wrote copy to capture the brand essence.

UX and UI design was provided for all aspects of the redesign:

• Catalogue
• Product pages
• Range pages
• About: About us; Design & Engineering
• Homepage
• Navigation