SESN Web Redesign

Website
User Experience
2 months// June - Aug 2022

At SESN, I worked on the official website that serves as a portal for visitors to understand the brand value and purchase products. My responsibility was redesigning the user experience for new and returning customers and ensuring they could find the information they desire effortlessly.

My role:

UX Research, Prototyping , Design

sesn_mockup.png

Project Overview

SESN is a startup known for its zero-waste and easy-to-carry shower products. It works with a number of e-commerce platforms to sell its products, but the information is cluttered on every platform. This project is aiming to ensure users locating the information they desire and gain more customers

Problem

After the Landing Page is added to this website, users felt confused about the differences between the home page and Landing Page. In addition, users had no clear way to explore products or learn more about this brand.

Goal

In order to provide a satisfactory experience to new and returning users, I focus on making an ease-to-use navigation system. 

01

Research & Finding

Users lost interest within a second when they do not find information as they expected

I was new to the team and had not any experience with this website. Except for browsing the website like the users, I did some quick research on my own to understand how users perceive the current website and to empathize with users.

Interview
current website_landing_Page_vs_Home_Page.png

Current Hand Soap page (left) and Home page(Right)

"It feels like there are two landing pages when I browse the website, but I guess the hand soap page is for a featured product."

participant 1, with confuse 🤔

The information is not well-organized. I feel exhausted and not sure if I am reading the products' features or the brand's philosophy because they are all displayed on the same page.

participant 2, with tiredness 🤯

Current website.jpg

I prefer having an About page where I could learn more about this brand. The website appears untrustworthy without it, and I don't want to purchase from it.

participant 3, with disappointment 😥

Left: Top part of the home page

Right: Bottom part of the home page

Competitive Analysis

Considering SESN's business strategy, the competitors I closely monitored are companies that provide customized services, including Aesop, Cha Tzu Tang, Yuancare, and Jing Shen Yu. The high-level takeaway from this analysis is to create a user-centered design that allows an effortless experience for the users to achieve the goal(s) that they came to the site with.

Logo_Yuan-Skincare.png
logo_JingShengYu.png
Logo_ChaTzuTang.jpg

The insights that helped to shape SESN include the importance of intuitive nav structure, obvious calls-to-action, and a clear path to locate desired products.

02

Define Problems

Users are confused by the navigation system and there is no clear storytelling on the home page

Based on the learnings from the research and the face-to-face interviews with potential users, I believe it is crucial to redesign the current web structure, so I started by analyzing the Information Architecture.

Current Information Architecture
Current IA.png
What I found:

1. One section is repeated on different pages

2. Descriptions about either brands or products on the same page, which makes the storyline not clear

I proposed to eliminate the redundant parts and Hand wash page to improve the hierarchy of information

Challenge

The Hand Soap page was designed to promote a featured product, and the team wanted to remain its function

Redesigned information architecture
Redesign IA.png
My Action

To achieve business marketing goals while ensuring that the users will not lost in the navigation system, I proposed to use the Homepage as a landing page, and show featured products in the banner.

Requirements

Clear Path and Good impression

  • Add Call-To-Action on the Home page and prioritized sections

  • Re-ordering the sections with a clear title

  • Create a clear storyline by separating content related to the brand or products

  • Allow users to know what products or services are provided easily and as soon as possible

03

Design & Iteration

Wireframe of landing Page.png
  1. Add featured products section:
    it provides a quick view for novice users to have an idea of what this company makes and is served as a shortcut for expert users. However, the swiping function is removed based on user feedback.
     

  2. Redesigned the layout
    to improve consistency

     

  3. Move the text and button
    to ensure readability and responsiveness among different platforms

Wireframe of Landing Page

User flow of Browsing products.png

user flow of browsing product: Home page > Product Category > Hand Soap page

I add the products categories page in the second step to give new users a clearer view of all the products this company makes

04

Prototype & Testing

Users find the information more accessible

When I delivered my first wireframe, I was reminded of the importance of having a mobile-responsive design. Therefore, as I was first creating mockups for desktop, I was mindful of how all of the design elements would look on a smaller screen. I prototyped and tested my desktop design first, while I worked on mobile mockups on the side.

web.png