Camping Gear Pro
Responsive Web Design
Project Overview
The Product
Camping Gear Pro is a camping / outdoor equipment supply store with mid ranged prices. The typical user is between 20 - 70 years old, with most being young outdoor enthusiasts. The goal is to provide an easily navigable site with a simple user flow, free of clutter and offer shopping advice for the users.
The Goal
Camping gear Pro site aims to mitigate th stated problems by offering a feasible simple online store that can be used by a wide range of target users to purchase camping equipment easily and with a recommendation AI function tool.
Project Duration
May 2024 - April 2024
The Problem
Available online stores have visual cluttered design, offer no advice / shopping assistance, site user flows tend to be complicated and difficult to complete a purchase.
My Role
UX / UI designer responsible for the entire project.
My Responsibilities
Design Think Process, User research, Wireframing, Prototyping
Understanding the user
User Research Summary
Upon conducting interviews, I drafted empathy maps to better understand the user and their needs. The users needed something that is simple site where they could complete a purchase easily.
Additionally they needed advice when purchasing certain equipment or what equipment could work for which destinations.
Because of the wide range of users, the site had to also cater to people with a variety of computer literacy levels.
User Pain Points
1
2
3
4
Visual Clutter
Navigation
Product
Recommendation
Reviews
There is often too much unnecessary visual elements added, which adds clutter to the design and conveys negative emotions to users such as confusion, hence affecting the intended user flow.
Most sites usually have a difficult / confusing navigation, which gets users agitated.
Sometimes users are in need of recommendation when making a purchase not just an AI tool that offers technical help with shipping / the site only.
Sometimes sites do not have / provide adequate reviews.
Problem Statement
Manuel is a highly driven film maker & digital creative
who needs to buy the best quality products
because he needs good gear to help him record & film quality content outdoors.
Manuel User Persona
User Story
I am a highly driven film maker & Digital creative, I want to buy the best quality products, so that I can make sure my work is always excellent quality and lasts long for my filming stints.
Starting the design
Ideating solutions
During the ideation phase, I did rapid sketches and paper wireframes, competitive audits and an audit report. After this the prototype phase started by creating the IA and sitemaps.
Digital Wireframes
Mobile Home
screen
Tablet
Home screen
Computer Home screen
Low Fidelity Prototype Link:
Link
Usability Studies
The usability study was a moderated study with users located in Europe but it was conducted remotely. There were five participants and each study lasts 20-30 minutes.
Round 1 Findings
- Notification / display that something has been added to the cart
- users said it wasn’t so obvious to scroll down to see the product category listings.
- Users said the Graphics / elements and font seemed quite larger than normal. Odd balance of text sizes and elements
- Users noted that this page seemed somewhat ‘empty’ and unbalanced
Round 2 Findings
- Font size too small
- Button resizing to make it bigger
- AI chat bubble and text combination needed better visibility
- Alignment, information layout
Refining the design
Mockups
High Fidelity Prototype
Based on the feedback, changes were implemented to the project based on the user feedback. One of them being the landing page, the layout was changed to allow for better navigation and showing the relevant information without having to scroll.
The hi-fi user flow changed from the lo-fi prototype to cater for the new changes.
Low Fidelity Prototype Link:
Link
Computer
Tablet
Mobile
Accessibility Considerations
Ensuring UX accessibility involves designing interfaces that are usable by people with a wide range of abilities and disabilities
- There are headings that assist in providing a visual hierarchy.
- The design includes a high contrast design to to assist people with visual impairment.
- There is Alt text attached on different graphics and design elements
Going forward
Next Steps
After iterations were done, I finalized the design. At this point this is where I would hand over to an engeneer. As this is a course project, we did not proceed o this stage.
What I learnt
Impact:
Users find the landing page direct and to the point allowing for easy navigation. The design is also simple yet attractive for the users.
On top of making sure that the user should always be center and front of the project, I also learnt many useful tips and tricks on working with Figma especially when I bumped into hiccups I had to find a way to resolve them and at the same time gaining valuable experiences.
I learnt that you need good use of media in your designs and that they do add to the final look of the design as well.
I also learnt that no user feedback is ever too small or insignificant, those small changes make a huge difference.
