Nature's Nook
UX/UI Design
August 2024 - November 2024
Project Brief
A fully responsive website design for an outdoor retail business. Focuses on easy navigation and quick checkout process.
My Role
This is an individual project that allowed me to plan and direct each step of the design thinking process as a UX design student with mobile and web design experience.
Responsibilities
Conduct user research
Paper and digital wireframing
Designing mockups
Low and high-fidelity prototypes
Conducting usability studies
Iterating designs based on feedback
The Problem
Users of e-commerce websites often struggle to find products or information due to navigation that is unintuitive.
Users can be deterred by lengthy or complicated checkout processes.
The Goal
Increase user engagement and retention by making the shopping/purchasing process simple and straightforward.
Understanding the User
User Research
User Persona
Journey Maps
User Research
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 e-commerce 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
Poor Navigation
Users tend to get frustrated if they have trouble finding what they’re looking for.
2
Unclear Process
An overly complicated or lengthy checkout process can lead users to give up and go to another website
3
Too Little Info
Lack of detailed product images, information, or reviews can make users hesitant to complete a purchase
User Personas
Using my research findings, I crafted a user persona to help identify the main type of user. Say hello to James!
James Lee
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 Maps
Putting myself in James's shoes, I went through the steps of researching and ordering an item from a camping website and noted down my thoughts during each step.
Persona: James Lee
Goal:
Purchase camping gear online for a trip with his friends.
Starting the Design
Paper Wireframes
The large sections were planned to contain eye-catching photos with minimal wording to keep the user engaged and curious.
Home
Browsing
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.
Home
Shop
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.
Shop (mobile)
Item (tablet)
Lo-Fi 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.
Check out the prototype!
Usability Study
Findings
1
One user mentioned not noticing the “Add to Cart” or “Checkout” buttons at first.
Solution:
Make the CTAs stand out by making them a noticeable color.
2
A couple users mentioned that they could not tell how long the checkout process would take.
Solution:
Adding a progress indicator that shows during the checkout process so the user knows what to expect.
3
Another user mentioned that they probably would not order from a website that didn’t give an estimate for when their item would arrive.
Solution:
The expected delivery date would show before the customer confirms their order.
Refining the Design
Mockups
Hi-Fi Prototype
Accessibility
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.
Home
Shop
Browsing
Item
Progress Bar
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.
Screen Size Variations
Browsing
Item Info
Hi-Fi 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 ensures that the sections are easy to navigate.
2
Contrast between pieces of text and the background make the website easy to read.
3
The website design is responsive so that it may be accessed by users of many different types of devices.
Going Forward
Takeaways
Next Steps
Takeaways
Impact
When testing the design with users, two themes consistently stood out: simplicity and clarity. Participants found the platform easy to navigate and intuitive to use, with one user describing the interface as “very modern.”
What I Learned
As a UX designer working on this app I have gained valuable insights and knowledge over the course of the design process.
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.