Company

Time Frames

Platforms

Category

Techniks

2022.9 - Current

Web

E-commerce, B2B

Context

Revamping E-commerce

The Technik website fails to cater to the needs of both first-time customers and returning distributor customers. The current website design and structure do not provide a seamless user experience, resulting in difficulties in finding relevant information and making the necessary actions. The client requires a revamped website that addresses these issues, providing a user-friendly interface, clear information architecture, and intuitive search functionality. As a UX designer, my objective is to enhance the website's usability and meet the distinct requirements of both user groups, ultimately improving customer satisfaction and engagement.

Problem Statement

Problem Analysis

Define the Problem

Overview
Key Findings
  • We will use shopify to build a website, so we did the competitor analysis on shopify-based websites, and similar CNC tooling websites.
  • We analysed the data from the customer's Product Database, and rebuild the Product Category Structure and confirmed the Website Information Architecture.
  • Conduct UAT and User Researches to validate design.
  • Created CMS pages and component to allow the further update for clients' website

User Analysis

Understand the User

User Groups

User Pain Points

How to find a needle in the haystack?

Understand the Difficulty

User Journey Map

Design Process

What Surprised Us is That...

Typical E-commerce Website did not
align with the practices of a B2B clients.
We need re-design to fit the distributor habits.

Distributor User Flow

Old Flow

Search for the product --> Display recommanded products --> Filter the products --> Find the apporximate product
‍
‍A large number of final product, and not accurate.
‍

First Iteration

Define Product --> Define Category --> Define Subcategory --> Filter the products --> Select features of the product --> Check Detail

Too many Steps
‍

Final Solution

Define Product --> Define Category --> Define Feture --> Check Detail

Find the certain product quick and easy

Information Architecture

Sitemap
Product Classification

Build Wireframes

Prototype

Interaction Detail

Homepage --> Category --> Sub-Category -->

Category Page: Indicate main product types

Subcategory Page: Display main product features

Product Listing --> Product Detail

Product Listing: Display secondary product feature, price and product#

Product Detail: Allow distributor to check the product detail parameter



Client Feedback: Terrific！

The client really loves this design, and they consider the UAT version milestone to be really successful. We will continue working on this project and achieve better appreciation.

Other Features

Smart Search

The search function is also a key function in the whole E-commerce website. I refine the search experience by providing 'Narrow your search by category' function to help user quickly navigate to their intended search.

Bulk Purchase

The search function is also a key function in the whole E-commerce website. I refine the search experience by providing 'Narrow your search by category' function to help user quickly navigate to their intended search.

Check Out Experience

Dynamic Filter

The problem domain for the Techniks E-commerce case study is the difficulty in navigating and finding specific products on

Evidence of Iteration

From the wireframe to the Hi-Fidelity prototype，we made iterations and made the design decision based on user research, business requirement and design rational. See our iteration evidence.

Design System

CMS System

Key Takeaway

  • Mature B2B E-commerce product helped to solve real-world e-commerce problems.
  • Worked in an Agile team and gained experience in reporting to the Design Lead and PM.
  • Gained ideas on how to contribute to the Product Team as a UX Designer. Improved communication skills with clients.
  • Learned how to effectively deliver outcomes to the Dev team and work with the QA team.
  • Understood the importance of standardizing design and organized it accordingly.