Role
UX/UI designer
Team
Individual Project
Providing users with a more comfortable and convenient shopping experience.
Background
SSENSE — An e-commerce website
The SSense website is a multi-brand retailer based in Canada specializing in the sale of designer fashion and high-end streetwear.
New Brutalism & Minimalism Style
The website features a minimalist color palette of black, white, and gray with a simple layout. Font settings include exaggeratedly enlarged headings, creating a contrasting effect with smaller font sizes for the rest of the website, highlighting the prominence of product images.
Discover
User Interview
a
The interviewees were four users of different genders and mainly studied their first visual impression and past experience of the SSENSE website.
Problem 01
Unreasonable font settings and unclear hierarchy
Although the current UI interface maintains a trending minimalist and new brutalism style, which allows users to focus more on the products themselves and quickly capture the most important information visually. However, due to unclear layout structure and inappropriate font settings, users may experience visual fatigue when browsing the website for a long time.
Problem 02
Messy layout & scattered content
The homepage has numerous newsletters with a cluttered layout and lack of balance, which makes it difficult for users to focus their attention, and it also causes difficulty in the selection and visual fatigue when browsing.
Idea 01
Utilize card-based design and component creation
By incorporating card-based design and component creation, the information can be categorized and structured in a modular way, allowing users to browse more easily.
Idea 02
Add a theme recommendation section
Add a theme recommendation section, such as a gift guide, on the homepage to help users browse and filter products more conveniently, reducing difficulties users may encounter in searching and selecting products.
Wireframes
The Revision
Homepage
Revised the layout to achieve a balanced and aesthetically pleasing symmetrical design, enhancing overall unity and clarity.
Implemented a card-style design with multiple component elements to present different information modules, ensuring each module stands out and is easily distinguishable. Leveraged slider effects to introduce dynamic and interactive elements, increasing visual appeal and user engagement for improved retention rates.
Optimized information categorization and display order, organizing content into three main categories: featured products, new arrivals, and brand recommendations. Presented products in a structured order based on gender and other categories, facilitating user understanding and selection.
Product-list Page
Originally, the filtering options were distributed on both sides of the page with small font sizes, causing visual fatigue and inconvenience for users. In the redesigned layout, I centralized all filtering functions on the left side and adjusted the font settings. Additionally, I introduced a collapsible feature to simplify the page.
Based on user feedback from surveys, when users want to search for a specific brand, they prefer using the search box. To streamline the page design and improve readability, I opted to use a single search box instead of listing multiple brand names as before.
Considering the unique feature of SSENSE in exclusively selling certain products, I added a filter option that allows users to directly choose to view SSENSE exclusive items.
To offer a more personalized user experience, I introduced an intelligent recommendation feature at the bottom of the page. When users don't have a specific shopping goal, this feature provides tailored product recommendations based on their browsing history, purchase behavior, and preferences.
Product-item Page
Based on the characteristics of the SSENSE website, I noticed that it differs from other e-commerce sites by uniformly presenting product images as models wearing the items, showcasing models from different angles. Leveraging this feature, I incorporated a button rotation function to provide users with a comprehensive view of the model and product within a single page length. This eliminates the need for users to scroll up and down to explore various angles of the product.
In the original web design, the abundance of recommended products at the bottom created decision-making difficulties for users, as per their feedback. Therefore, in the redesigned layout, I simplified the product recommendation section, focusing on providing pairing recommendations within the same brand and suggesting related products based on users' past consumption history and preferences.
Visual Design
Moodboard
Components
Final Screens
Homepage | Light Mode
Homepage | Dark Mode
Product-list Page
Product-item Page
Reflection
Throughout this project, I have gained valuable insights into font size selection and layout design, realizing the significance of layout in the overall design. In web design, the balance and coherence of layout play a crucial role in user experience. A well-designed layout can guide users to navigate the website smoothly, resulting in a better overall user experience.
