Camping Gear Pro
Mobile Application
Project Overview
The Product
Camping Gear Pro is a mobile application for a camping equipment store.
Project Duration
December 2023 - March 2024
The Problem
This project was created for travel enthusiasts of various backgrounds and ages in need of a simple online store that offers camping equipment.
The Goal
Designing an app for a camping supply store to sell and market its products.
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
For this research I conducted qualitative research holding interviews. Each interviewee was asked 4 open ended questions regarding their experience with online shopping through an app or website and what challenge they face and what they would like.
I used the design thinking process, empathizing with the users, researching and learning their problems, needs and wants. During the phase I conducted interviews, created empathy maps and user persona.
Following on from this to analyse the findings from the user research, determining the problems, hows to solve them and why. During the defining phase, I compiled the user stories, journey map and problem statement.
The next stages followed were the ideation process, prototyping & testing identified below.
User Pain Points
1
Pain Point
Visual clutter with too many elements that actually are unnecessary.
2
Pain Point
Lack of simple navigation. And difficulty in finding information
3
Pain Point
Lack of functions to support visually impaired people that use screen readers
4
Pain Point
Lack of product recommendation
Problem Statement
Fritz is an elderly retiring doctor with visual impairment and not so in tune with online shopping who needs to purchase travel gear & receive shopping / product recommendations for his upcoming trip to Africa.
User Story
- I am almost a retired doctor with visual impairment and not so in tune with online shopping, I want to purchase travel gear for my upcoming trip, so that I can enjoy my Safari trip to Africa.
- I am almost a retired doctor with visual impairment and not so in tune with online shopping, I want to receive shopping / product recommendations, so that I can enjoy my Safari trip to Africa.
Starting the design
Paper & Digital Wireframes
After rapid and normal sketching, ‘How Might We’ (HMW) and competitive audit brainstorming, I created the digital wireframes.
Low Fidelity Prototype Link:
Link
Usability Studies
After conducting the first research usability study, I made an affinity diagram, identified patterns & themes to concluding the insights and prioritizing the insights and successfully implementing them based on the feedback. Iterations were made to the wireframes based on the insights.
Round 1 Findings
- AI function needed visibility & functionality
- Menu button was not visible
- App icons were not visible
- Changing in app wording
- Information layouts
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
The mockups were created. Colour, graphics icons were added.
Another usability testing was done and insights were implemented resulting in additional insights being implemented.
Low Fidelity Prototype Link:
Link
Accessibility Considerations
Ensuring UX accessibility involves designing interfaces that are usable by people with a wide range of abilities and disabilities
- Animation & gestures - I made sure that the animation duration were not longer than 5 seconds to avoid the animations distracting the user from the main reason of using the app.
- Touch Targets & placement - After the usability study it was identified that some of my buttons did not have enough touch space making it difficult and not possible in some places. After revising the design adequate space was added.
- Colour & icons - With white being majority of the apps colour, accents of green are added for the buttons and the icons i used are universal and easily identifiable.
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
This was the most exciting and rewarding educational courses that I have done. This project opened me to the world of UX and UI design from researching, wireframing, designing, using Figma to creating finalized mockups. It has been awesome!
I am excited to keep enriching my knowledge in UX/UI design.
