Reinventing Online Shopping

An end-to-end UX design project to deliver a responsive e-commerce site & logo design for a multi-national clothing retailer.

Summary

Empathise
Research Goals
Competitive Analysis
User Interviews
User Personas
Empathy Mapping
Storyboarding
Ideate
Sitemap
User & Task Flow
Wireframes
Branding
UI Design
User Test
Hi-fi Prototype
Usability Testing
Priority Revisions
Affinity Map

Background

Mirror are a global clothing company, achieving marked success with over 400 stores in 34 countries. They are now ready to pursue their mission in the digital world.

Problem

Mirror are very late in the online game. They decided a few years back to not invest in digital because they preferred to keep the service in person.

Solution

A responsive site was created, alongside a fresh, contemporary, wordmark logo. Both aim to be representative of Mirror's values.

Empathise

Research began by analysing competitors and market trends. The online clothing market is highly saturated, so a feature analysis of competitors was performed to distinguish which competitors were offering which services. Trend analysis showed browsing happens predominantly on mobile devices, but there exists a big gulf between the number of users browsing items and actually purchasing them on their mobile device - with most preferring to switch to a PC to complete the transaction.

Competitors analysed

User interviews were conducted to understand the user journey, their motivations, and pain-points when shopping online. Four users were interviewed, all who frequently shop online. Interviews uncovered several insights, with the key takeaway being that users shop online for convenience - and need an experience that mirrors that. Users need a simple, easy to use experience that is seamless across devices.

"Sites that are too colourful just overwhelm me, I end up forgetting what I'm looking for"

Users expressed a strong dislike towards a lack of a wishlist feature, and a convoluted checkout process. Preference was expressed towards sites with a simple UI, as this allowed them to find items easier.

"I hate having to find an item again when I can just add it to my wishlist on other sites"

Armed with some great insights from user research, a user persona and empathy map were created to summarise the findings and provide a springboard for ideation.

User Persona

Meet Lauren. She's a marketing assistant based in a metropolitan area, who shops online because of the convenience. She's a keen shopper, spending time on Instagram looking at what influencers are wearing, and she likes to spend time browsing through items online too. Lauren hates when there's no option to wishlist an item, and doesn't like when filtering tools aren't very good either.

Empathy Map

Based on Lauren's needs, a decision was made to design a solution that has a simple, easy to use interface, with wishlist support and social media integration. This was achieved by sketching as many ideas as possible, as quickly as possible. Once complete, ideas were refined until one was settled on. The solution is represented below as a storyboard, where Lauren first discovers and uses Mirror.

Storyboard

Ideate

To help stay on track in the remainder of the project, a feature roadmap and product requirements were established. These also helped to determine what the MVP would look like.

With a clear understanding of our user and the solution, a user flow was mapped out for Lauren. This shows how Lauren would access the Mirror site, find an item and purchase said item. This user flow is representative of Lauren's "happy path".

User Flow

Being an ecommerce website for a large clothing retailer, a large amount of content would be required. For that reason, a card sorting exercise was conducted to understand how users thought about item groupings. 5 participants were each asked to sort 50 items of clothing into groupings, the results of which informed the creation of a detailed sitemap and the filtering and navigation options.

Low-fidelity Wireframes

Once I identified the key pages that I would be designing for, I began sketching the pages of the website, translating these into wireframes. After that, I explored Mirror's brand identity and how this could be represented visually. A simple, colour scheme was chosen with a bold feature colour for vibrance, which would be used across the site. The goal was to create a colour palette that doesn't distract from the content on the site.

The logo created needed to be suitable for both Mirror's physical environment (in-store, carrier bags, etc) and online environment. Resultantly, a workmark logo was created - with the unique, angular font being the primary source of visual interest. The components of Mirror's brand identity were then compiled into a style tile that was applied to the UI.

UI Kit
Final UI Designs

User Test

To test my UI designs, I created a high fidelity prototype of the website and carried out a series of tasks with 4 respondents who fit the primary persona.

Usability testing showed all participants could complete the tasks with ease and find the requested information. Overall, they understood each function of the website and appreciated the simplicity and ease of use of the website. Some confusion resulted from the placement of the wishlist button on images, which was obscured unless the user scrolled down.

Usability testing was a vital part of the process as it uncovered some areas previously not given thought, for example: users found it difficult to discern images with a patterned background due to viewing their screens on varying brightness levels.

User feedback was mapped using an affinity map, which helped to determine the priority revisions for the UI design. All feedback mentioned above was addressed.

Reflection

This project was limited to a tight time scale, so the focus was primarily on one user flow. In future, my priority would be to develop other user flows such as adding an item to the wishlist, contacting customer support, and creating an account. Then, I would build out mobile functionality.

Working on Mirror was a great learning experience where I deepened my knowledge of e-commerce, and how users interact with and think about sites when shopping online. The online clothing market is a saturated one, and I feel I have an improved knowledge of the success criteria to create a site and brand that users are able to develop a relationship with that's more than transactional.

More Projects

Making City Breaks Easier

A mobile app that helps travellers make the most of their city break. The process followed design thinking principles, from problem discovery, to UI design, to user testing and iteration.

Read More

Improving the GP Booking Experience

A mobile-first UX design process, from problem discovery through to UI design & hi-fidelity prototype testing.

Read More

Making Spotify Social

A research-focused, end-to-end UX design process to improve the music sharing experience on Spotify.

Read More