Nomad Camp App

company

Personal Project

Project type

UX/UI Design Case Study

project description

This is my first UX/UI Case Study I completed during my studies of Google’s UX online course from Coursera. Nomad Camp App was designed using UX design workflow process. The app is designed to help outdoor enthusiasts easily purchase camping supplies.

Product Overview

the product

Nomad Camp is a store that features products for the outdoor enthusiast or weekend adventurer across, footwear, clothing, fishing equipment & 4WD. Users range from the ages of 17-75 years.

the problem

People interested in outdoor goods come from various age groups, and the more mature type have limited experience with online shopping, making it difficult for them to navigate and purchase products online. These customers often find online shopping tasks more complex and challenging to complete.

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.

My role

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

Responsibilities

  • Planning and conducting user research
  • Defining the problem of potential users
  • Creating personas, user journeys, user flows
  • Wire-framing
  • Visual design and prototyping

User Research Summary

The first part of the research for the Camping Supply Store was conducted in two different methods, via phone and in person. Before starting the interview, I thought the arrangement of products in outdoor stores was easily to follow, although this was not the case. My perspective had changed from conducting a competitor audit and from user research.

user research pain points

1. Products taking longer than expected to be delivered.

2. Forms that aren’t clear to fill out.

3. Being overwhelmed by the amount of products displayed on screen.

4. Certain products not displaying enough information or easy to understand.

digitial wireframes

The goals of the camping app are to design an application that is easy to navigate along with some additional features like apple pay and fingerprint log in. These features may require more instructions with little familiarity possibly with some users.

digitial wireframes

Large buttons have been included to the design allowing users to select the options with ease. The delivery option buttons can’t be selected, until the users have decided to either assign an address or add new address to the order.

Low-Fidelity Prototype

In the low-fidelity prototype I focused on the main user flow purchasing a product through the app’s main screens.

Usability Study Findings

Two rounds of usability studies were conducted, to help guide what attention was required in certain areas of improvement. The second round of studies made evident what still required amends to improve the user-flow.

round 1 findings

1. User found Our Products section useful for quick searching.

2. Users want an easier way to set an address and delivery type.

3. Users require forms with surrounding elements that don’t confuse.

round 2 findings

1. Improvements required to checkout delivery section. Unnecessary information is displayed in Click & Collect.

2. Users would be able to reach important product information faster and more easily if higher up on page.

mockups

The findings from the usability demonstrated that the existing design for delivery section was confusing for most users, 4 out of 5 participants. This screen has been simplified so it only has one function.

mockups

The buttons throughout the app have been changed to fixed for the main functions at the bottom of screen. This design change has been made to allow users to navigate with less scrolling.

mockups

It was observed from reactions, emotions and pattern identification that some users felt more information could be provided for products. The positioning of additional information has been placed higher up the page order allowing relevant information to be more easily found.

UI Elements & Components

High Fidelity Mockups

Accessibility considerations

1. Contrast checks for text, buttons and icons using WebAIM.

2. Full screen mode which all users can benefit from being able to zoom up closer on images. Helping users with lower vision.

3. Dark mode setting has been incorporated into the app design for users with bright light sensitivity.

Takeaways

impact

If this was a real world design in order to understand effectiveness of UX design developments I would use to measure the positive impact on users by sign ups, customer feedback surveys and sales.

what i learned

Since this was my first major project in Figma I learned 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 UX research skills.

Back To Work