Fix Clinic (Temp Name)

UX/UI Design
Client: (Major Retail Company)

Company: McKinsey & Company

*"Fix Clinic" is a placeholder name. The company's real name can't be shared due to confidential reasons.

Fix Clinic was having a challenge in finding the right team to help them redesign their website. We managed to deliver a satisfactory work and gain the client's trust to complete the project.

Fix Clinic is a major retail company that sells appliance replacement parts online. Our team's responsibility was to help them redesign the work left by the previous design vendor. It was already a long project with many phases and changes of vendors when we joined. Within two weeks since this phase started, we managed to deliver a design concept that correlated with the user research from the testing phase prior to our start, which greatly satisfied the client. Our team has been continuing the design collaboration with the client since then. They remain with us and no longer switch vendors.

My responsibilities were to host workshops with the client team to understand their business goals, lead the UI design and work on the UX design with a senior designer, as well as support client presentations. We collaborated very well together and were like the dynamic duo. We also worked to guide our developers in order to bring the design to life.

Currently, Fix Clinic's website is in the development phase.

Research & Analysis

What is Fix Clinic?
Fix Clinic is a major retail company that sells appliance replacement parts online and educates their customers about part installations with the help of their call center and how-to videos. They have one physical shop at the headquarter. The brand has been around since 1999.

Who are the main target?
The client would like to expand from middled-aged male DIY enthusiasts to people of all ages and genders who like to fix things by hand. Old and new users.

What is the business goal of Fix Clinic and how can the redesign be inspired from it?
When we first started this phase the client seemed to be unclear on what their business goal was. I suggested we confirm it before moving forward by doing a two-day workshop with key client leads and guided them to realize their goal. It was one of the best moments in this project.
Business goal "Make it easy to find tools and instructions." Fix Clinic helps customers achieve small but impactful moments of heroism, for themselves, their families, and their communities. The brand makes caring for your home easy, so you can celebrate life to the fullest. Fix Clinic transforms the negatives into positives for the customers with comprehensive solutions, practical tools and intuitive step-by-step guides to tackle any DIY challenge.
Design Inspiration The overall impression of an obstacle-free experience. Clear and straightforward UX. Organized information that is easy to reach out. Positive design elements such as more white space and typography.

What design elements were established from the user research?
Blue/yellow color palette The testing phase had three color palettes applied to a mockup layout for the users to vote: red/brown, yellow/black, and blue/yellow. The last one won as it looked knowledgable, calm, and reliable.
Typography Lato was chosen because it projects friendliness and is also easy to read.
Photographic visuals Users voted between vector and photographic visuals, the latter won as it was more relatable and straightforward to them.

What was the site look like before the redesign?
Below are screenshots of Fix Clinic's original design (left) and the improved version by the previous vendor (right). The client found the improved version to be of too much blue and give an impression of being sterile, which wasn't what they want.

User Experience

The primary UX work for Fix Clinic's website was mainly about improving the existing design from the previous vendor. The client already approved the main features: Diagnose, Shop Parts, and Library. Our input was to strengthen the main features and provide detailed UX.

Site Map
The following flow is the site map that represents all functional screens.

UX Features
Below are interesting product-specific UX features that I'd like to share.

The Main Search Box
The client put a high emphasis on their business goal, "Make it easy to find tools and instructions." This search box on the homepage reflects that idea. It is designed to be noticed right away when you first land on the website. The search function is also easy in input keywords and find what you are looking for.

The Choose Your Product Finder
As another experience to support the business goal, "Make it easy to find tools and instructions," the Diagnose section was created to hand-hold the user through a step-by-step diagnosis on what problem they are trying to fix and offer related solutions. I made it easy for the user to choose actions by putting functions into standalone cards and boxes.

The Product Detail Card & Cause Card
Cards are big in this redesign. Here, they are used to display detailed information. The key to make the design work is to organize the content on the card in a way that is easy for the users to locate what they need right away by divinding the card into smaller sections and place a clear title for each section.

User Interface

The main idea was to improve from the previous vendor's layout and apply design elements from the user research, then add in the details. The client was very impressed to see the new layout as they can tell it relates to their brand more, as well as eyecatching.