Knick-knack | E-Commerce Website
UX/UI Home Goods Website Design
Date: Sept 2023 - Jan 2024
Role: Lead Designer
Tools: Figma
Why: Portfolio Project
About
Knick-knack is a home goods website that sells high-end furniture such as couches, linens, home decor, lighting, and artwork. It’s for those who enjoy the finer things in life. Knick-knack is for those who’d prefer to shop online for furniture instead of going out to pick it up. They’d rather have their luxury items shipped to them in the comfort of their own homes, so they can focus on more important things.
Problem
Every home and apartment owner loves to decorate their place, whether their style is country, modern, or vintage. However, not every homeowner has the time to go shopping for furniture in person. In addition, they could live in a rural area, where there are little to no home goods stores around.
Solution
Knick-knack will deliver any piece of furniture to you. Knick-knack utilizes AI to show you how any furniture piece will look in your home. Want to see how that couch will look in your living room? Just snap a photo of your living room, select the piece of furniture and Knick-knack will show you. It’s that easy!
Design Process
User Research
Survey Results
I conducted a 10-question survey with 30 people who’d rather do their furniture shopping online than in person. The goal is to gain insight into the user experience on how one can benefit from using a home goods website to purchase furniture online and what can be done to improve the experience.
Here is what they’ve said:
Competitive Research
For my competitive research, I studied several high-end home goods websites such as Kathy Kuo Home, Perigold, and Williams Sonoma.
Define
User Personas
Here are the user persons I came up with from my research findings. These personas represent different types of people who love to get their furniture online and have the same end goal but have different needs.
Each scenario showcases a realistic goal that can be achieved through the app. The goal of these personas is to show how each user has varifying demographics, and different needs and will do things their way. It also focuses on the frustrations, goals, and how every interaction differs from the last.
Empathy Map
The empathy map shows what the user thinks, feels, sees, does, hears, and says. This map focuses on the target user and what they truly do and don’t want.
Customer Journey Map
The customer journey map focuses on the pains, frustrations, and emotions a user may feel when shopping for home goods online.
Ideate
User Flow
The user flow shows multiple paths the user can take depending on their needs. The end goal will always be the same no matter how the user gets there.
Information Architecture
Here, I have organized all of the websites’ components and how a user can interact with them. There are several different tabs a user can choose from such as cookware, chef's tools, outdoor, and art & decor. All of these options can be moused over and a menu with further information will pop up.
Prototype
Sketches
Here are some simple sketches of the general layout of the website. The first step when designing is to sketch out the general idea and then continue to define the sketches.
Low-Fi Wireframes
After I sketched out several ideas, I solidified the concept into low-fidelity wireframes using Figma. The low-fidelity wireframes are meant to represent an early, but developed concept of the app. It is a blueprint that I shall continue to build upon to complete the final design of the app.
UI Kit
Here are all the UI elements that make up the brand Knick-knack.
Test
A/B Testing
After some thorough testing, I was able to update the website as needed to satisfy the target audience. A/B testing is necessary because it allows me to get real-time feedback to improve the website so it's as user-friendly as possible.
I decided to change the color and background for the advertisement on the left. I was told by multiple testers that the striped background was distracting and the blue did not work with the rest of the website.
I chose to darken the text as well as change the background and the color. The background texture is now a smooth marble and the color is now a sample of the image on the right. This combination is far more aesthetically pleasing than the blue and off-putting striped purple background.
To eliminate some of the white space, I chose to change the layout of the reviews screen. Previously, I had most of the header text in the middle of the screen, showing a little too much white space on either side that just looked empty.
After switching the main text to the left, it made all the text easier to read. Instead of beginning to read in the center of the screen, now it reads from left to right as it should. There's less white space and this layout just looks a lot neater.
The header of this advertisement needed to be changed due to too much white space. Sometimes having the header text in the center works, but in this case, it does not.
I chose to move the text over to the left and add a line going across the top to the right. Many users preferred this new look instead of the old one. This change draws your eye from left to right as it normally would when reading. The text moving to the left improves the overall aesthetic.
Hi-Fi Wireframes
After plenty of research and testing, I was able to expand upon the low-fidelity wireframes to create these high-fidelity wireframes.
Onboarding/Returning User
Other Screens
All Mobile Screens
Interactive Prototype
Final Thoughts
This was a very interesting and complex project. I've learned that when making prototypes for 2 different screens, it's best to work on them side by side. This way all changes can be made at the same time. All of the screens must be adaptive to multiple devices. When a screen isn't adaptable, it deters the user from interacting with the website and or purchasing a product.