JUDY LAU
MULTIMEDIA DESIGNER
Camping Supply Store Design
This UX case study aims to design an app & responsive website for a camping supply store to advertise and sell it product
This UX case study aims to design an app & responsive website for a camping supply store to advertise and sell it product
This UX case study aims to design an app & responsive website for a camping supply store to advertise and sell it product
This UX case study aims to design an app & responsive website for a camping supply store to advertise and sell it product
Challenge: There are many products online focus on selling their product but very few of them will also provide infos or guidance for camping lovers/ beginners to find products that suit their needs and budget.
Solution: Provide more user-friendly and exceptional user experience for camping beginners or experienced in online purchase.
User Research
Lack of Experience
Beginners have difficulties when preparing suitable gears to camp.
INTERVIEW INSIGHT #1
Solely for product sale
Users want to know more infos related to camping not only browsing the products.
INTERVIEW INSIGHT #2
Outdated informations
Customers find the product list on physical store has more choices than finding online.
INTERVIEW INSIGHT #3
Quality Issues
Beginners have difficulties when preparing suitable gears to camp.
INTERVIEW INSIGHT #4
Building Empathy
PERSONAS
Using the qualitative data from the interviews results, I defined two target group profiles Ken (Teacher, 38) & Rebecca (Worker, 26) to better empathize with my main user groups and prioritize goals according to their needs.
_j.jpg)
USER JOURNEY MAP
Using the qualitative data from the interviews results, I defined two target group profiles Ken (Teacher, 38) & Rebecca (Worker, 26) to better empathize with my main user groups and prioritize goals according to their needs.
Wireframing, Prototyping & Usability-Testing
Paper Wireframes
With paper wireframes, the basic structure of the app could easily be iterated for lo-fi prototype. Without much effort, adjustments could be made before going into the much more costly digital implementation.
Low-Fidelity Digital Prototype
With the use of Figma I created the low-fidelity digital prototypes. I conducted my 1st round user test to check the usability and accessibility problems. Also working on digital wireframes for additional screen size to make sure the site would be fully responsive.
*lo-fi Digital Prototype For Camping Supply Store APP Flow
*lo-fi Digital Prototype For Camping Supply Store Website Flow
*Demo and Links For the website lo-fi prototype
Website: https://www.figma.com/proto/VqAHm0EsjJWQlgi10oKjYE/GoogleUX_Project1%262_CampingStore?type=design&node-id=422-1937&t=3Mk9tmt1Fe7zbbe9-1&scaling=scale-down-width&page-id=422%3A1936&mode=design
Usability Studies
The study type was a moderated usability study with 5 participants invited. Each participant will complete the study with a moderator, duration of test last for 20-30 minutes. By testing the lo-fi prototype, here is the findings and insights.
INTERVIEW INSIGHT #1
Most of the participant were confused with the multiple selection of products on the search pages and too many buttons. I think is better to reduce options for user to make the user flow clear.
INTERVIEW INSIGHT #2
Most user were unhappy with the detail of cost summary only appears when they confirm the order. It needs to inform the user earlier when they are deciding to buy or not.
INTERVIEW INSIGHT #3
Users were annoyed when they needed to tap twice to view selection of the product's variation e.g. size and color. Making a concise display of information would increase the satisfaction and willingness of user when shopping.
High-Fidelity Prototype, Mockups & Accessibility
Visual Design Sticker Sheet
The visual design was developed by iterating from mood boards and finally to creating a first version of the style guide - sticker sheet for hi-fi prototype proces.
.png)
Mockups & High-Fidelity Prototype
Based on the insight from usability studies, I applied design changes and iterate my user flow, making it more concise and straight forwards.
*hi-fi Digital Prototype For Camping Supply Store App Flow
*hi-fi Digital Prototype For Camping Supply Store Website Flow
Final Design
*Links For the website hi-fi prototype in Figma
Website: https://www.figma.com/proto/VqAHm0EsjJWQlgi10oKjYE/GoogleUX_Project1%262_CampingStore?type=design&node-id=576-3684&t=h1gdBYACBEdWQFPk-1&scaling=scale-down-width&page-id=534%3A463&mode=design
*Links For the app hi-fi prototype in Figma
App: https://www.figma.com/proto/VqAHm0EsjJWQlgi10oKjYE/GoogleUX_Project1%262_CampingStore?type=design&node-id=222-873&t=Eib7RF4XeB95xQZW-1&scaling=min-zoom&page-id=126%3A225&mode=design
Accessibility Considerations
When choosing color palette, I use figma plugin to Stark-Contrast and Accessibility tools to check my color met WCAG AA Compliance.
I mainly use the typeface “Lexend” in my design, which was constructed to improve reading speeds, reduce visual strain, and make reading more accessible for those with dyslexia or other reading disabilities.
I also Implemented heading, text hierarchy throughout the app. This helps users to distinguish the different sections and information on screen.
Learnings
#1 Putting ourselves in the shoes of the user help to create better design
During the empathize phase, I interview the potential users and getting to know the pain points when finding and purchasing camping gear. With creating persona, user journey maps, storyboards, these helps designer to better understand user's frustration, motive and goals. This help to build a more easy to use interface.
#2 Competitive audit and usability tests help prepare and revise my design
In the ideate phase, competitive audit not only let us know what similar product exist in market but also tell us the strength and weaknesses so I can design a more user-friendly interface. Working on moderated usability study, I get feedbacks from them through observing their interaction lively and immediately ask them with following questions about my design flow problems and make revision.
#3 Accessibility considerations is very crucial to a good ux design
As a designer, I used to focus on the visual appealing but less on how to make an inclusive design. Through the project I know more about the Web Content Accessibility Guidelines (WCAG) defines how to make Web content more accessible to people with disabilities. I then put more effort on the text, the color, the user interaction, accessibility tools like screen reader aiming to meet the WCAG standard.