The Darphin Redesign is to provide every user with confidence when buying our products on desktop and mobile. Though this mission, the client will learn how they could improve the overall UX of their current website and create a positive user journey that aligns with their existing marketing strategy.
– Key findings through user research
– User flows & user journey refinement
– UX strategy improvements & recommendations
– Persona review & suggestions
– Mid-fidelity wireframe suggestions
– High-fidelity Mock-ups
– Visual/UI designs
The challenge was to develop a clear UX strategy for Darphin that provides their target users with real value and to implement these solutions into a website experience.
In order to build a better understanding of whether users already had an existing understanding of our products and website, I conducted 4x 1 on 1 user interviews.
1. Users didn’t understand the collections naming.
2. Users didn’t know how to search, the categories are confused.
3. Users couldn’t filter or sort the result.
4. Users were not sure how to apply the oils, didn’t find the info.
5. The mobile version is too long and text heavy, users couldn’t find the product/info they need.
6. Users were confused by the product images, not sure about the size of the products.
As a new customer, the products look good for me but I have difficulty to find the correct product for my skin.
Darphin is an high-end luxury brand, but the website looks very old and cluttered.
I’ve collected the data on the challenges and opportunities of the current website which covering key navigation elements, page flow and functionality. I gave them some specific tasks, based on different user scenarios.
A new user, not familiar with the brand/product. A previous user but only shop in the store before, now wants to shop online. A previous user try to return the product she bought.
1. Users were surprised with the amount of text they were required to read in the subsequent categories.
2. Users discovered broken links when selecting some promotion banners.
3. Users couldn’t find the brand or history in the beginning, also the context weren’t clear. Users then went to review to understand the products.
4. Users were disappointed that the results couldn’t be sorted from price low to high.
Prioritise the Issues/Needs
1. The navigation categories is confused.
2. Users didn’t know the collection naming without context.
3. In the mpp, users couldn’t filter or sort the result.
Based on the data above from the research, I’ve defined 2 user types, around which we developed the following personas:
1. Create a simple and clear navigation.
2. Provide quality information in a clear and logical way and improve the result sorting/filter funtion to save users time and make them feel confidence to purchase.
3. Create strong and tidy visual design to engage users.
Ideate & Prototypes
After the initial low-fi wireframes we got above, we quickly have few different small prototype testing on InVision to see which one meet our goal best and we came out with the final version below.
NAVIGATIONS we managed to build the nav from the most popular products of Daphin, which is oils and serums . To avoid the confusion since users doesn’t really understand the collection naming, we use product categories in the nav instead of collection names.
HOMEPAGE Content strategy for the homepage:
Hero banner rotations | Latest arrivals / best seller | Shop by concern | Second feature product roatations | Shop by collections | Olapic instagram
I’ve created SHOP BY CONCERN/COLLECTION and it can help users to find out what they need quickly. At the same time, the product info is applied when users hover on the product. So they can learn more about our products and brand too Online consulting can be sticky on the bottom so users can easily access to ask any questions if they are not confident.
MPP PAGE Added in categories and concern filters, also provided users to view the results in different sorting.
SPP PAGE Created a single product page to provide the high-res product images , ingredient texture images, and also the relative video. So users can reach the info they need in the same section. On the product image, users can easily add it in the favourite list and zoom in to the larger picture. Also featured the other relative product of it’s collection. I’ve put the example to feature other promotions or new product below to engage users again before they scroll down to the reviews.
Deliver – Design Mockups