Vergos Custom Wear | E-commerce Redesign

Vergos Custom Wear | E-commerce Redesign

Vergos Custom Wear | E-commerce Redesign

Executive Summary

Executive Summary

Executive Summary

Our stakeholder tasked us with redesigning a desktop workwear e-commerce site to boost the conversion rate by optimizing the information architecture.

UX & UI | Redesign | Desktop | E-commerce | 2023 | 2 Week Sprint

UX & UI

|

Redesign

|

Desktop

|

E-commerce

|

2023

|

2 Week Sprint

The Brief: The Client | Vergos Custom Wear

The Brief: The Client | Vergos Custom Wear

The Brief: The Client | Vergos Custom Wear

Assist local shops and professionals in enhancing their online presence for improved visibility, focusing on creating or revamping e-commerce platforms with an emphasis on user experience.


Vergos Custom Wear, a Greek e-commerce business founded in 2019, specializes in customized workwear and casual clothing. Led by CEO Apostolos Vergos, the company aims to expand beyond Greece into Balkan countries in 2023. The target market includes both genders, aged 20 to 70, with a focus on pink-collar workers. Currently lacking a formal marketing and branding strategy, the company's marketing efforts are limited to Meta performance ads, with no SEM or SEO activities. Project success will be gauged by increased sales and profitability.

Marketing Research | Competitors Analysis

Marketing Research | Competitors Analysis

Marketing Research | Competitors Analysis

Marketing Research Findings

Marketing Research Findings

Marketing Research Findings

Initial findings highlighted Vergos' strengths in payment methods and a lower free shipping threshold than competitors. However, a heuristic analysis identified two key issues:

  1. Aesthetic integrity: The website overwhelmed users

  2. Use of recall over recognition: This complicated the user journey


Despite offering similar customization options as competitors, Vergos faced more challenging navigation. The primary goal became clear: a redesign was necessary for a seamless user experience. The question arose: how to achieve it?

User Research

User Research

User Research

We developed a targeted questionnaire and conducted 10 user interviews through platforms like Zoom and Google Meet. Each session was moderated by a team member, with additional members taking notes. The insights gathered from these interviews provided a diverse range of perspectives.

Affinity Diagram

Affinity Diagram

Affinity Diagram

User Persona

User Persona

User Persona

User Journey

User Journey

User Journey

Problem Statement

Problem Statement

Problem Statement

Kostas’ problem could be summarized in: “Vergos, an e-commerce store, was designed to supply customized workwear. We have observed that the website has neither designated subcategories nor filter options. The information about delivery or tracking is also insufficient. This causes users to get frustrated and purchase less.”. Problem statements can provide clear direction and focus.

Ideation | Worst Idea

Ideation | Worst Idea

Ideation | Worst Idea

MoSCoW Method

MoSCoW Method

MoSCoW Method

User Flow

User Flow

User Flow

Design Solutions: Lofi Wireframes | Concept Testing

Design Solutions: Lofi Wireframes | Concept Testing

Design Solutions: Lofi Wireframes | Concept Testing

We employed Lofi wireframes for Concept Testing, engaging with 5 users through interviews. Upon analysis, we discovered notable patterns:

  1. Users struggled to identify image cards as product representations

  2. Emphasizing prices emerged as a crucial aspect

  3. Categories on the homepage garnered attention, with the main menu and search bar requiring more prominence

  4. Users recommended an additional screen in the Product Detail Page (PDP) after selecting a size to display chosen preferences

  5. The transition from Category Detail Page (CDP) directly to PDP felt abrupt; users desired an intermediate stage for a smoother progression from generic to specific information

Design Solutions: Mifi Wireframes | Usability Testing

Design Solutions: Mifi Wireframes | Usability Testing

Design Solutions: Mifi Wireframes | Usability Testing

To further enhance Kostas' experience, we refined the Mifi wireframes by:

  1. Streamlining product card descriptions for maximum clarity and user engagement

  2. Employing strategic price highlighting to improve visibility and facilitate easier decision-making

  3. Enhancing the prominence of the main menu and search bar on the homepage for effortless navigation

  4. Fine-tuning the secondary PDP to seamlessly showcase Kostas' preferences

  5. Introducing an additional subcategory within the second CDP to provide a more granular and personalized browsing journey

To enhance the user experience based on Usability Testing feedback, two key adjustments were made in the Hifi wireframes:

  1. Enhanced Main Menu Visibility: Optimized the main menu for improved visibility, ensuring easy access to key navigation elements

  2. Streamlined Header: Reduced the header's visual dominance to declutter the interface and provide a cleaner, more user-friendly layout

Branding | Moodboard | Moodboard Testing

Branding | Moodboard | Moodboard Testing

Branding | Moodboard | Moodboard Testing

The Hifi wireframes were shaped by key brand attributes: Quality, Customization, Safety, and Value. A Moodboard was created based on these attributes, but testing revealed an overemphasis on safety and a neglect of value. Adjustments were made accordingly. The Moodboard's images influenced the color palette, and Typography choices incorporated fonts such as Oswald and Lato.

Design Critique

Design Critique

Design Critique

During the design critique, the following issues were identified:

  1. The customization service did not stand out sufficiently in the Main Menu

  2. The filters on the CDPs were positioned lower on the pages, causing usability challenges for users

  3. Users faced difficulty in understanding their location on the website

Design Solutions: Hifi It1

Design Solutions: Hifi It1

Design Solutions: Hifi It1

The Design Critique findings guided changes in Hifi It 1 design:

  1. Rearranged the main menu, positioning customization as the last item

  2. Moved filters to the top of the CDP for improved accessibility

  3. Introduced a feature in the main menu to highlight the current category users were viewing

Desirability Testing

Desirability Testing

Desirability Testing

Hifi It1 wireframes were used for the initial Hifi Prototype in Desirability Testing. Results from the test with ten users revealed effective communication of quality and safety attributes, but the customization and value aspects were less apparent.

Design Solutions: Hifi It2 | Prototyping

Design Solutions: Hifi It2 | Prototyping

Design Solutions: Hifi It2 | Prototyping

Further improvements were made to the final prototype based on Desirability Testing insights:

  1. Enhance the visibility of customization and sales options in the main menu

  2. Deal badges were introduced for sales items to provide a clearer and more engaging user experience

Style Tile

Style Tile

Style Tile

The style tile represents the selected elements for the color palette, typography, and all UI components across the Hifi journey, unifying images, carts, forms, buttons, and filters for a cohesive visual identity.

Our Learnings

Our Learnings

Our Learnings

The project was both interesting and challenging, driven by a human-centered approach that provided valuable insights:

  1. Data unveils unexpected findings

  2. Simplicity in design improves comprehension

  3. UX/UI professionals differ in behavior during concept and usability testing compared to non-specialists

  4. Active listening to users yields valuable solutions

  5. Effective teamwork achieves remarkable results

Let’s wrap it up!

Let’s wrap it up!

Let’s wrap it up!

The project was captivating and challenging, beginning without a defined marketing strategy or prior research, relying on personal preferences. Despite the numerous optimization tasks, our team efficiently prioritized them. In a field not typically associated with creativity, we achieved an aesthetic outcome beyond expectations. This project underscored the power of collaboration and the pleasant surprises it can bring.

Next: MUSEapp | Culture & Heritage

Next: MUSEapp | Culture & Heritage

Next: MUSEapp | Culture & Heritage

Designed a native app aimed at improving the experience for museum enthusiasts. Through its interactive features, it offers a more informative and engaging museum visit.

UX & UI | Concept | Native App | Leisure | 2023 | 2 Week Sprint

Read More