Building an e-commerce platform to transition fictional brick-and-mortar to the digital space
UX / UI Research & Design
Note: This is a fictional, self-directed project, completed for the requirements of Designlab's UX Academy.
Mirror is a long-running, fictional clothing retailer that sells classic, high-quality garments at reasonable prices. With more than 400 stores worldwide, Mirror aims to provide affordable clothing for everyone. The work at hand was creating an intuitive online storefront that would let users freely customize their search results and yet find the products they were looking for.
Challenge
The outcome is a fashion retailer website - in which customers can shop for products. Every retailer can make a personal experience that fits their own visual style. Another outcome is a design system that aligns the visual consistency and improves development efficiency of new features.
Outcome
Creating a custom shopping experience for customers
This is the desktop version of the website where users can buy products. Customers can refine their search by size, color, and other parameters on the product page. Additionally, items can be sorted by price range for customers.
Design Process
My role in this design process was the UI/UX Designer. I led the design, from structuring the information architecture, improving the user flow to the final user interface design. Below is an overview of the steps that I was responsible for in the process.
Understanding
Scoping + Setting Requirements
UX Flow
Sitemap
Recognizing Existing Problems
Building a Design System
5. UI Kit
6. Testing the Design System
Implementing
7. Final Prototypes
Scoping + Setting Requirements
For the project, a desktop website with a product search function had to be created. Various demands had to be taken into account in order to design a smooth shopping experience.
2. User Task Flow
After scoping the project, I often start with a User Task Flow to understand the chronological steps a user might go through. Starting like this helps to empathize with the user and stay focused on their needs. This User Task Flow is zoomed-in on the steps where a customer is “searching” for a specific product.
3. Sitemap with hierarchy and navigation
Creating a sitemap that shows the various screens makes it easier to comprehend how the website works. Additionally, it is helpful to verify that the functions are logically arranged and simple to use.
4. Recognizing Existing Problems
Despite Mirror's great performance offline, the company is losing out on profit prospects in the expanding digital arena because of its emphasis on in-person services
Regular business hours at physical establishments might not be convenient for customers. People with hectic schedules or those who like to shop after hours may find this to be inconvenient. By opening up a digital storefront, Mirror will be able to access a wider audience of consumers, growing both their clientele and possible revenue streams.
Mirror finds it difficult to keep their inventory levels at their ideal levels because most of their stock is kept in warehouses
For offline merchants, keeping proper inventory levels is essential. Understocking can result in lost sales and disgruntled customers, while overstocking can tie up cash and force markdowns. Accurately balancing inventory levels can be difficult.
5. Building a Design System
I established the foundational guidelines for typography, color, etc. Following the foundational components, I defined the 'Atoms,' or tiniest parts, such buttons, labels, and more. The next stage was merging these components into "Molecules," which consist of the breadcrumbs and input fields.
6. User Testing
To get input, I conducted five Zoom interviews with participants. The usability of the product search function was tested by keeping an eye on how each participant interacted with the website.
7. Final Design
An interactive Figma prototype was made to present the finished ideas to developers. This simplified the explanation of the nuanced interactions hidden in static design outputs.
