Introduction

The goal was to modernise the Munro e-commerce website, which hadn't been updated for years, and make it more user-friendly as there had been no dedicated UX roles before. Additionally, the business was forming a development team to use the React framework, aiming to enhance the website's capabilities.

Original Goal

The Challenge

Previously, there was no focus on UX in the company, and my colleagues were unfamiliar with UX methods, which I need to spend time educate them and gain their support. There was no UX design process within the company. Our UI work was split between Sketch and XD tools, leading to disorganised design files. Also, managing 11 e-commerce websites without a unified design system was challenging.

Propose to the business

Recognising the fast-paced nature of retail fashion, I suggested a more strategic approach. Instead of diving straight into design and development, I proposed establishing better long-term design working processes. This would not only improve current workflows but also benefit the team in the future, even if I’m no longer part of the company, I also suggested to build a design system along side the redesign project, which can potentially improve the consistency and efficiency within the team.

Refined Goal

Overall Design Process

For a UX project, it's essential to have a plan to avoid chaos in our workflow and ensure we meet our deliverables. We've outlined an activity plan for the upcoming sprints, following the double diamond method.

Define

Utilising our collected data, we created a customer journey map with stakeholders during the workshop. This map outlines each step of the shopping experience and potential pain points customers may encounter.

During the workshop, it became apparent that some issues raised were somewhat subjective. To address this, we created personas using our demographic data. These personas enable us to better understand and empathise with our customers, and they will be beneficial in selecting participants for future user testing.

Recognising the many areas needing improvement on the website, we acknowledged that our resources are limited. To prioritise tasks for our first MVP (Minimum Viable Product), we employed a democratic voting activity, allowing each team member 3 votes to decide what to fix first.

Develop

Following the prioritisation, we conducted brainstorming sessions to generate ideas on resolving the identified pain points. We again used voting, with each person having 3 votes, to prioritise these ideas.

We asked participants to select their favourite ideas from the voted list and sketch out design concepts. This task was challenging for many, as it was their first time engaging in such an activity.

LO-Fi Design & Design Review

Before starting the design process, I review the pain points and ideas to ensure nothing is missed and identify any quick fixes through design tweaks. Instead of working in isolation, I involve our workshop group (Marketing, Customer Service, and Developers) in design review sessions. These sessions provide feedback and identify potential technical constraints.

Design System

To achieve better consistency and speed up future development, we're incorporating reusable components into our Design System. For detailed information, please refer to the design system case study(WIP).

Design Handoff

Marking the end of this design stage, the design handoff is a critical step to ensure the end product is as same as the design possible. After several discussions, we agreed on four essential elements for the design handoff document:

Thanks for getting this far

This project is not perfect and has lots thing can be improve such as better prepare design review, more organise design workshop, better design handoff process etc. I wouldn't treat this as one-off project, I rather treat it as ongoing digital product(test, learn, improve).