Oakwood Gear

Mobile App Design

Full UX/UI Design Process

PROJECT OVERVIEW

For Oakwood Gear I designed a platform that would allow users to order camping supplies. I included a safety guide within the app to inform users of how they could remain safe when they go.

My Role

  • Full UX/UI Design Process

  • User Research

  • Animations

Types of Research Included in this Study:

Interviews, Empathy maps, Personas, User Journey Maps, and Competitive Audits

“Competitive analysis- list the actual competitors that you are looking at
”
— Quote Source

Design Process Overview

1

2

3

Competitive Analysis

It was time for me to conduct a competitive audit to evaluate my competitors designs. This gave me the opportunity to form ideas on how I would design the app. I wanted to get a good grasp of competitor’s navigation methods and features that they included to make their product unique.

  • Outlets

  • Specialty Stores

  • Sporting Goods

  • Retail

Common Competitors

Common practices from Competitors

  • Allows users to sort and filter content

  • Often includes a safety guide

  • Allows users to choose from multiple categories

  • Includes login details, saved checkout details, and often times transaction history

Target Goals

  • Easy checkout process

  • Inform users about safety and other common topics related to sports and other outdoor activites

  • Allow users to find key information

Insights from User Interviews

The primary user group identified through research comprises individuals who enjoy camping and other outdoor activities, frequent online shoppers, and those who prioritize safety. My goal was to understand how users would find the app beneficial and to concentrate on that aspect. It was essential to create an application that users would find enjoyable and efficient. Below are several key insights gathered from my user interviews:

Users Want to Preview Products Online

Many customers prefer to check a company's product availability to avoid an unnecessary trip to the store.

There is too much research involved in going camping

Users often need to research what items to take camping. A platform that offers information on the subject while also providing a means to purchase supplies would be more convenient and expedite the process.

Users would prefer Online Shopping

Studies indicate that over 81% of the U.S. population engages in online shopping, a trend that is growing in popularity.

So, based off further research and insights…

Goal Statement…

The mobile app Oakdoor Gear will allow users to buy camping supplies online and give them a basic safety guide. This will affect people who want to go camping regularly, and help them have a comfortable and safe camping trip.

Ideation Sketches

Once I began sketching my paper wireframes, I had to consider what the goal of my app was and used that to form ideas on what to include on the home screen. It was important that I included navigation and the apps main elements. I included icons and buttons to help represent how the final product would look later.

I included the mobile app’s main functions to the home screen. This included ordering camping supplies, and presenting a 2024 camping safety guide. As I was designing my mobile app, it was important that I used my research to my advantage. I turned my wireframes into Lo-fi prototypes by making connections.

Digital Wireframes

Low Fidelity

I carried out a usability study with five participants. Each participant was experienced with online shopping and had made similar purchases before. The study provided me with valuable insights that will guide the modifications needed to enhance my app's usability and meet user requirements.

Camper Mike mentioned that some people might want to know a tent's dimensions before purchasing it. This inspired me to include an "Info and Specs" section in my mobile app to provide users with more details about specific products, a feature I've seen in other apps during my research. Fellow UX designer and camper Sarah, offered valuable insights in this usability study. She recommended that the splash screen should allow users to continue as guests, eliminating the need for them to log in or create an account.

Testing Lo-fi Designs

Incorporate "Information and Specifications" to provide users with more details about the item.

Add the option to continue as a guest on the splash screen.

Make the back arrow on the checkout screen interactive.

Before

After

  • Introduced a "Continue as Guest" feature to enable users to access the app without the need to sign up or log in.

Before

After

  • The "Shipping Details," "Item Details," and "Tech Specs" dropdown menus have been added to provide essential information for each item.

  • Center "tents" on the top navigation bar to indicate the current screen without causing confusion.

Before

After

  • Moved the categories above the clearance section on the homepage to show hierarchy importance of that section.

As I moved to the high-fidelity prototype phase, incorporating visual identity into my designs became essential. I selected a color palette, defined text styles, and chose images that aligned with the app's nature theme, reflecting its focus on ordering camping supplies. To complete the high-fidelity prototype, I also integrated several animations.

High Fidelity

Visual Identity

I've developed a mood board to capture the essence of my design and the atmosphere conveyed by the app.Rural Authentic Sterling Cozy

High Fidelity