Case Study UX/UI

Nomad Camp
App

Simplifying the online shopping process

Tools Used
Figma
Pureref icon
Pureref
Pureref icon
Photoshop
Pureref icon

Project Overview

Product icon for case studies.

The Product

Nomad Camp is a retailer, with both an online store and physical locations across Australia, that caters to outdoor enthusiasts and weekend adventurers. The brand offers a wide range of products, including footwear, hiking and outdoor clothing, fishing equipment, and 4WD accessories. Because of the broad range of outdoor hobbies and products they sell, Nomad Camp appeals to a wide range of potential customers. The target demographic is individuals aged 17 to 75.

Pain point icon for case studies.

The Problem

People interested in outdoor goods come from various age groups, and the older group of users have limited experience with online shopping due to not growing up with e-commerce websites in their earlier years. As a result, this makes it difficult for older users to understand the shopping journey, the navigation and purchasing products with confidence online. A large percentage of campers in Australia are over the age of 50 or older being 46%.

Source: https://camperchamp.com.au/camping-statistics/

Target icon for case studies.

The Goal

The goal is to develop a camping application with a simple checkout process that enables users to easily browse and complete purchases, regardless of their age or online shopping experience, while minimising frustration.

Project Role

This project was an individual student endeavour. Following the design stages of the UX product lifecycle has enhanced my planning and research skills.

Visual design & Prototyping
User Flow Maps
Personas
Planning & User Research
User Flow Maps
Wire-framing

Competitor Audit

My competitor analysis of the camp supply industry included both direct and indirect competitors. The comparisons focused on consistency of design, accessibility, features, user flow, navigation, and clarity of information.

Competitor audit image for Nomad Camp app case study.

User Research Summary

Initial research on potential users and customers was conducted through in-person interviews and phone calls, based on availability and preference. Before these interviews, I believed that the layout of products in outdoor stores was easy to follow. However, both the competitor audit and user research revealed accessibility issues, including problems with screen reader compatibility, which changed my perspective.

Pain point icon for case studies.
Pain Point

Products taking longer than expected to be delivered.

Pain point icon for case studies.
Pain Point

Forms that aren’t clear to fill out.

Pain point icon for case studies.
Pain Point

Being overwhelmed by the amount of products displayed on screen.

Pain point icon for case studies.
Pain Point

Certain products not displaying enough information or easy to understand.

Personas

Charlotte Smith persona.John Brown persona.Persona image of Greg Townshend for Nomad Camp app.

User Flow Map

Nomad Camp app user flow.

Site Map

Nomad Camp app site map.

Wireframes

Lo-Fi Wireframe: Home screen, log in screen, navigation bar variations, & tab bar
Lo-Fi Wireframe: Product screen & cart screen
Lo-Fi Wireframe: Address screen delivery screen & payment screen

Digital Wireframes

Usability Study Findings

Findings
  • User found Our Products section useful for quick searching.
  • Users want an easier way to set an address and delivery type.
  • Users require forms with surrounding elements that don’t confuse.
Findings
  • Improvements required to checkout delivery section. Unnecessary information is displayed in Click & Collect.
  • Users would be able to reach important product information faster and more easily if higher up on page.

Low Fidelity Prototype

Mockups

Low fidelity screen of delivery screen before usability test.

Before Usability Study

The address selection section was designed to use a numbered system, intending to guide users through the necessary steps in order. The idea was that users would first select their address (step one) and then choose their preferred delivery type(step two). However, a usability study revealed that this design was ineffective. Participants did not notice or follow the numbered order or the title indicating the sequence of actions.

Low fidelity screen of delivery screen after usability test.

After Usability Study

Based on user behaviour observed in the initial usability test, I decided to reduce the number of actions required to be taken while selecting an address. I separateddelivery address from delivery type to a separate screen.

Low fidelity payment screen before usability test.

Before Usability Study

During the first usability study, a participant highlighted the card payment form was missing billing address field. This feedback underscored the importance of including the billing address as a vital security feature to help prevent unauthorised purchases.

Low fidelity screen of payment after usability study.

After Usability Study

High Fidelity Mockups

High fidelity mockup of app main screen and product range screen. High fidelity mockup of tent overview screen and men's jacket screen. High fidelity mockup of my cart screen and delivery address screen.. High fidelity mockup of delivery options and click & collect.High fidelity mockup of delivery address and payment method. High fidelity mockup of credit card payment and order confirmation.

Accessibility Considerations

Tick icon for case studies.
Accessibility

UI components were checked using WCAG that colours meet AA Compliance.

Tick icon for case studies.
Accessibility

Easy to read typeface has been selected with a clean and simple design in different weights. The type hierarchy scale system allows the user to decipher different sections.

Tick icon for case studies.
Accessibility

Labels under icons for screen readers and to allow users to easily understand navigation bar links.

High Fidelity Prototype

Takeaways

Impact

In areal-world scenario, to gauge the effectiveness of these UX design developments, I would use to measure the impact on users from signups, customer feedback surveys and sales statistics completed through app.

Woman running across river.
Clothing on shop wall.
What I Learnt

Since this was my first major project in Figma, I learnt the power of components and keeping them organised. Areas of improvements that I would like to further study consist of, better name conventions of styles and improving UX research skills.

Man hiking to mountain top.

Next Steps

Obtain further feedback from industry professionals in UX/UI or design.

Potentially to make revisions to the design from
e-commerce app research in the future.

Personal signature with contact details.