NATURE'S NOOK
UX/UI DESIGN
The Product:
A fully responsive website design for an outdoor retail business. Focuses on easy navigation and quick checkout process.
Duration:
August 2024 - November 2024
My Role:
Sole UX/UI Designer and Researcher
The Problem:
-
Users of ecommerce websites often struggle to find products or information due to navigation that is unintuitive.
-
Users can be deterred by lengthy or complicated checkout processes.
Responsibilities:
UX research, paper and digital wireframing, designing mockups, low and high-fidelity prototyping, conducting usability studies, iterating designs based on feedback
The Goal:
Increase user engagement and retention by making the shopping/purchasing process simple and straightforward.
Understanding the User
I conducted user interviews with participants that are either avid campers or interested in going camping. The information that I gathered from the interviews allowed me to create empathy maps and user personas that gave me further insight into people’s experiences with camping ecommerce websites. I found many people will give up and try another website if the website they are using lacks detailed product information or the checkout process is overly complicated.
Pain Points
1
Users tend to get frustrated if they have trouble finding what they’re looking for
2
An overly complicated or lengthy checkout process can lead users to give up and go to another website
3
Lack of detailed product images, information, or reviews can make users hesitant to complete a purchase
User Persona
Using my research findings, I crafted a user persona to help identify the main user. Say hello to James!
Problem Statement:
James is a software engineer in his 30’s who needs to see specific and accurate information on camping gear he is buying in order to be certain the gear won’t fail while he is camping with his friends.
Journey Map
I then put myself in James's shoes and went through the steps of researching and ordering an item from a camping website and noted down my thoughts during each step.
Starting the Design
Sitemap
I wanted the site to be easy to navigate but also contain all of the information that a user could require. After making a sitemap for the whole website, I narrowed it down so that the prototype would focus only on the main user flow: finding an item and making a purchase.
Paper Wireframes
Home
Shop
_edited.jpg)
Browsing
The large sections were planned to contain eye-catching photos with minimal wording to keep the user engaged and curious.
Item
Digital Wireframes
While conducting research, I found that users are more confident in completing a purchase when there is plenty of information for each item as well as reviews from other buyers. With that knowledge, I included a section for reviews and customer photos to increase conversion and prevent cart abandonment.
Screen Size Variations
Sections that scroll horizontally were implemented on smaller screens to preserve the clean look of the interface and to save the user from having to scroll down too much.
Low-fidelity Prototype
The main user flow is demonstrated in the lo-fi prototype. Add an item to the cart and proceed through the checkout process until you reach the confirmation page.
Usability Study
Study Type:
Unmoderated usability study
Location:
United States, remote
Participants:
4 participants
Length:
20-30 minutes
Findings
1
Make CTAs Stand Out
One user mentioned not noticing the “Add to Cart” or “Checkout” buttons at first. They will be a noticeable color in future versions.
2
Checkout Process
A user mentioned that having some type of progress indicator while checking out would be nice.
3
Shipping Time
Another user mentioned that they probably would not order from a website that didn’t give an estimate for when their item would arrive.
Refining the Design
Mockups
My goal for the color palette of the site itself was to keep it muted but have pops of color in the photos found around each page.
After the usability study, I added a subtle progress bar to the checkout process so that the users can tell how long the process is.
Mobile
High-fidelity Prototype
The hi-fi prototype takes the user through the main user flow of purchasing an item and can be tested on desktop, tablet, and mobile size screens. Browse for information and reviews about the black tent, add it to your cart, and complete the checkout experience until you reach the confirmation page.
Check out the prototypes!
Accessibility Considerations
1
Using visual hierarchy standards to ensure that the sections were easy to navigate
2
Contrast between pieces of text and the background make the website easy to read
3
Website is responsive so that it may be accessed by users of many different types of devices
Going Forward
Takeaways
Impact:
Users during further tests liked how simple the design is to use and navigate. One participant commented that the design looked “very modern”.
What I Learned:
-
A quick and simple user flow is key for making sales on an ecommerce website.
-
Research taught me that users do not feel confident making a purchase if they feel there is not enough specific information on the item.
-
I took the opportunity to learn Figma’s Auto Layout feature which was challenging but fulfilling.
Next Steps
1
Include an account feature so users may save their information for quicker checkout and save items for later purchasing.
2
Add more filters so that users may narrow down their search to specific categories or specific items like tents/sleeping bags/backpacks.
3
Add other pages to include areas for informational articles or info on the company to inform the user and keep them interested.
Let's Connect!
Thank you for taking the time to check out my work!
To view more of my work or to get in contact with me, my information is below: