Techniks Tool Group

Techniks Tool Group

My Role

Junior UI/UX Designer

Scope

We executed interviews, produced both digital and paper wireframes, engaged in creating prototypes of varying fidelity, carried out studies on usability, focused on accessibility, and iteratively improved designs. We facilitated the delivery of the product through close collaboration with developers and other project participants.

Project Summary

Techniks Tool Group is a B2B E-Commerce product that provides various tools to its customers. The goal of this project is to deliver a product that provides an intuitive approach to buying tools.

User Goal

The ability for B2B consumers to buy single and bulk orders with confidence.

Key Performance Indicator (KPI)

Utilizing the specification chart and product listing page effectively - measured by viewing the chart and ordering tools from an intuitive listing page.

EMPATHIZE

EMPATHIZE

EMPATHIZE

User Acceptance Testing (UAT)

We initiated the design process by comprehending how users interact with the current website. Based on this understanding, we gathered requirements, discussed methods, and commenced building and testing our product in bi-weekly agile sprints. Through this process, we realized that our primary user sought either a specific tool or was navigating to explore the product further.


As a UI/UX designer, my objective was to enhance the website's usability to meet the needs of both seasoned and new users, ultimately improving customer satisfaction and engagement.

DEFINE

DEFINE

DEFINE

Key Findings

Our main persona is a B2B consumer who needs to find tool efficiently and understand the tool enough to make a decision to purchase the product.


We decided to use Shopify to build a website, so we did the competitor analysis on Shopify-based websites and similar CNC tooling websites.


Moreover, we started thinking about how to create modularity to speed up our design process, while adhering to the client requirements for CMS pages.

TEST

TEST

Information Architecture & Wireframes

After our initial interviews, domain research, and competitive analysis, we mapped out the information architecture of their site. This gave us clarity on the scope of the work. While creating wireframes, we iterated the designs until we found something that would resemble similar products in the same industry.

TEST

Information Architecture & Wireframes

After our initial interviews, domain research, and competitive analysis, we mapped out the information architecture of their site. This gave us clarity on the scope of the work. While creating wireframes, we iterated the designs until we found something that would resemble similar products in the same industry.

Stylesheets

Creating a stylesheet helped us define the color palette, typography, and interactions for each element within the design.

Stylesheets

Creating a stylesheet helped us define the color palette, typography, and interactions for each element within the design.

Responsive Screens

We worked on creating a complete website revamp since their original site wasn't attracting as enough customers as they'd like. To do so, we are currently working on their new site that would allow customers to purchase tools through an intuitive user journey.

Responsive Screens

We worked on creating a complete website revamp since their original site wasn't attracting as enough customers as they'd like. To do so, we are currently working on their new site that would allow customers to purchase tools through an intuitive user journey.

Outcome

Streamlined the listing flow for the website through the user interface and accessibility. We are currently improving this.

What I've Learnt

I noticed that establishing the design system helps a long way. This would help with the continued iteration process.

© Abhinav Maroju 2024

© Abhinav Maroju 2024

© Abhinav Maroju 2024

Create a free website with Framer, the website builder loved by startups, designers and agencies.