Zenggi

UI/UX Design for Zenggi, E-commerce website - Part of Deisgn team - Internship

Zenggi is a sophisticated clothing webshop that aims to elevate the online shopping experience by offering accurate sizing information, comprehensive product descriptions, and exceptional customer service.

Duration:

8 weeks

Tools:

Figma

UX Researcher Intern,
UX/UI Designer Intern

My role:

Shopify

Platoform:

Lo-fi prototype & Hi-fi prototype

Deliverables:

Summary of User Research

I was part of the UX research team for this project. We recruited users who were already customers of Zenggi but also we found some new users who fit the criteria of possible end users, created the interview questions, and performed the interviews.

During the first phase of the research, I thought that the major problem of the users would only be the frustration due to the inability to accurately assess how items would look and fit in real life but the more I studied the user groups I realized that there were more challenges like the need to perform quickly an intended task.

The problem

Insights found during the interview:

1) Busy people with a tight schedule face common pain points when it comes to buying clothes online
2) Customers expressed a strong desire for a detailed product description including fabric composition, care instructions, and sizing guidance.
3) Customers expressed concerns regarding fit and sizing when purchasing clothing online.

The paint point and how to solve it

  • Difficulty in Finding the Right Fit: Customers struggle to find clothing items that perfectly match their style preferences and fit their body type when shopping online.

  • Limited Information: Lack of detailed product descriptions, insufficient sizing guidance, or low-quality images could make it challenging for customers to make informed purchasing decisions.

  • Inconsistent Sizing: Variability in sizing across different brands or inconsistencies in sizing charts may result in confusion and frustration for customers, leading to increased returns and exchanges

  • Brand Differentiation and Navigation Confusion: The presence of two distinct brands, Zenggi and Trvl Drss, within the same website has led to confusion among users. The lack of clear differentiation between these brands and unclear navigation pathways have resulted in a suboptimal user experience, hindering customers' ability to distinguish between the offerings of each brand and navigate the website effectively.

The goal

Design a seamless online shopping experience for Zenggi customers, enabling them to effortlessly browse, select, and purchase clothing items with clarity on brand differentiation, comprehensive product information, and consistent sizing.

Time for wireframes

In the wireframing process, my primary focus was on enhancing brand identification and clear navigation, particularly on the homepage. I aimed to provide users with a seamless experience by ensuring they could easily distinguish between the Zenggi and Trvl Drss brands and navigate to their desired sections with clarity.

On the product detail page, my emphasis was on presenting a clear overview of the product, including detailed information on sizing, color options, and product descriptions. By prioritizing these elements, I aimed to assist users in making informed purchasing decisions and reducing any uncertainty about the products they were considering.

Additionally, on the landing page, I concentrated on making it unmistakably clear to customers which brand's landing page they were on. This was achieved through visual cues and clear labeling to guide users effectively to their desired brand's section of the website.

dIGITAL WIREFRAMES

Lo-fi prototype usability findings

I based the screen designs on feedback from user research.

  • Easy navigation and consistent sizing were the key user needs to address in the designs.

  • The ability to adjust orders on the cart page was also one of the user needs to address in the designs

Hi-fi prototype usability findings

  • The layout of the collection page required bigger pictures for better visibility and the aim to focus on specific products

  • The change functionality on the cart page complicated the users and it provided more information than necessary

The change made to the cart page was crucial due to users expressing feelings of confusion and being overwhelmed by the abundance of information. This confusion often led to users abandoning the checkout process altogether. To address this issue, the decision was made to maintain essential information on the cart page while introducing a Quantity selection feature. This addition directly addressed a prominent user need, contributing to a clearer and more user-friendly cart experience.

Accesibility considerations

  • Used icons to make navigation easier

  • Used colors and text for the color variants to help users understand the color that they are choosing

  • Used detailed imagery for every product to help all users understand the designs