Project Detail
Google UX Design Course
Dynamic UI for Websites
Tools
Adobe XD
Role
User Experience Design
User Interface Design
User Experience Research
Prototyping
​
Duration
8 weeks
01 Brief
I was given the task of designing a responsive website for NABI — a Korean furniture company with a goal of creating sustainable furniture that also shares a slice of Korean culture into the homes of their users. The main goals of the site were to allow users to effectively browse, purchase, and ship the products to their desired location.
02 Problem
Through usability studies, I found that many users had pain points in the user flow during the checkout process. There was a lack of control given to the users on how to navigate back and forth within the user flow and a consistent struggle to understand the language used.
03 Goals
-
Reiterate site infrastructure to improve user flows and allow users to have more control in their navigation.
-
Improve the language used during the checkout process to better inform users of their status and their next steps.
-
Increase user attention, user satisfaction, and engagement.
04 Ideation
Ideation sketches of the NABI Furniture homepage.
Focusing on not overwhelming the user while expressing the company's brand identity, as this is the user's first impression of the site.
Sketches for the shopping page where users will actively navigate through to find products that they would want to buy.
​
Focused on allowing the users to browse effectively. Adding key elements such as filter buttons and categories so that users can personalize their experience.
05 Wireframes
Building wireframes for the different pages within the user flow. Using the previous sketches to bring together a cohesive page that implements its main goals for the users.
NABI-Homepage
NABI-Tables
NABI-Product_Page
06 Prototypes
Went through multiple rounds of low fidelity and high fidelity prototypes to test and demonstrate the functionality behind the site.
NABI-Homepage
NABI-Tables
NABI-Product_Page
07 Usability Tests
I used a click-through prototype to conduct usability tests to receive constructive feedback on how users interacted with the user flow.
08 Review & Refine
Using the usability tests to define common pain points found from the users and reviewing the data to refine the prototypes accordingly.
No indication of how far the user is in the checkout process
Before Usability Tests
Confusion on whether or not this button would complete the purchase or simply move onto the next step
Inserting a timeline to help the user understand the checkout process and navigate in between steps
Providing a summary of all the information the user has inputed and allowing them to edit the information as well
After Usability Tests
Adding a "Place Order" button that unlocks once the user is done inserting all of the information needed. This clearly indicates when the user is completing the purchase.
09 Final Checkout User Flow
Cart > Information > Shipping > Payment > Confirmation
