Redesign YSL website

Redesign the YSL website after to address main usability issues after conducting usability evaluation. Click here to see the result of the evaluation.

Role

  • UI Designer

Project Deliverables

  • Mid-Fi web design

  • User feedback

Project Specifications

Duration: 5 days

Tools: Figma

What are the findings?

Main Usability Issues

5/5 participants spent more time in navigating to bag and in using categories to search for a product compare to the optimum time

Lack of Dual Coding

Lack of dual coding on the YSL site means text is not being complimented with an icon/image hence functions are less recognizable, user takes more time to navigate the website and carry out key tasks such as searching and check out.

3/4 participants struggled to find the right product due to limited information on search page

Hover to see Information

Users will need to hover over the product image to check the price, and when they do so the image would disappear. This forces user to recall rather than recognize when searching up products as they can't see the image and price at the same time. Users are also more likely to miss products they might be looking for hence reduce satisfaction

Redesign #1: Home Page’s Menu Bar

The home page is the first page user will see when enter the YSL website, in which navigation should be as clear as possible so that user could find what they want. With the lack of dual coding on the home page it has reduce efficiency and satisfaction of the user, hence in this redesign texts are complimented with images and icons to help navigation.

Before

The name of the collections appears to be jargon and carry low information scent which will be an issue for user who are not familiar with the brand. As the text is not being complimented with an image it will also reduce efficiency as users might recognize the look of the bag but not necessarily know the name of the collection, so they will need to click on each link one by one to find the collection they want.

After

The category that user have clicked in is being highlighted to supports wayfinding hence help user to aware of their current location within the site

An image that correspond with the collection is being added according to dual coding theory which helps user to better navigate through the website and identify the product/ collection that they want.

Before

Text on the menu bar is not complimented with an icon, and the search icon is not complimented with a text which makes it difficult for the user to find the bag and the search bar and hence reduce overall efficiency.

After

Search icon is complimented with a text and has been highlighted from the rest with a search bar as user struggle to find the search function during the usability testing. The rest of the menu is being placed closer together based on the principle of proximity and icons are being added based on dual coding theory.

Redesign #2: Product List Page

Low-Fi Prototype

Low-Fi Design #1

User Feedback

Low-Fi Design #2

I have created two low-fidelity prototype after looking at similar e-commerce site, I then showed it to 3 participants who have previously used the YSL website and ask for their opinion, participants used 'think aloud' method when looking at the prototypes. 2 out of 3 participant thinks low fidelity design #2 is better, as the filter function is more obvious then the original site hence will be easier for them to find the product they want. They also like the "Women/Men" menu bar on the top as it will be quicker for them to jump to other product list page.

Before

Discovered in the usability testing, when user is in the 6-product-view, they need to hover over to the image to check the price hence this redesign aim to address this issue.

Usability issue: Price and image are not shown together at the same time so it rely on recall and not recognition.

After

Design rationale for each sections

    • Hamburger menu is being added to limit the amount of text on the page so user are more likely to focus on the images, based on mental model, users will know this icon will show them the menu

    • Main functions are placed closer together based on the proximity and similarity principle, this also explains why the Women/Men bar is placed closer to each other but away from other menu bar

    • Texts are complimented with icons based on dual coding theory so that it is easier for user to recall each function and helps them navigate through the site with greater efficiency.

    • Filter function is being made more visible, the number of filtering options the user can view at this page has been limited to 4 based on Hick’s Law in the aim to make target action (filtering) as simple as possible to improve efficiency of use

    • Product name and price is now being shown alongside with the image, by providing text it improves accessibility following the WCAG principle regarding perceivable

    • Preview button is being added to reduce the chances that user have to go back-and-forth between product lists and product pages which could be time consuming and troublesome, this helps to improve efficiency of use and increase satisfaction

What’s Next?

After redesigning, ideally another round of user feedback can be collected to identify possible improvement that can be made. An interactive prototype can be made to allow user to actually try out the newly added function hence gain richer data for further redesigning.