UI & UX

Waterfall

About the Project

Our team was tasked with designing a mobile app that leverages the latest augmented reality (AR) technology to provide a unique and engaging user experience. The app would be used primarily by outdoor enthusiasts, allowing them to explore their surroundings in an entirely new way.

To better understand the needs and expectations of the target audience, the design team conducted both quantitative and qualitative research. A survey was distributed to existing users of the brand to gain insights into pain points and preferences. In-depth interviews were also conducted with a group of users who had used similar AR apps in the past.

Our Role on the project:

• User Research & Analysis

• Persona Creation

• MVP Definition

• Wireframes

• UI Design & Prototyping

• Usability Testing

• Product Strategy

THE PROCESS


Build. Measure. Adapt. Learn.

  • Formulate and validate the hypothesis
  • Conduct early usability testing on current user base 
  • Define MVP
  • Focus on Research results that will benefit users
  • Externalize the notes

RESERCH & PROBLEM DEFINITION

RESERCH & PROBLEM 
DEFINITION

Hypothosis

Designing and building a new platform based around recent technologies such as augmented reality removes all forms of familiarity with common applications. Our hypothesis is that AR is new and confusing to most users.

“We believe that as we push the boundaries of what the technology is capable of as well as the UI simple enough that anyone can open the app and get started”

Research

We decided to reach out to potential and active users to see how they felt about AR technology and the use cases for navigating through the application. Here is what we found.

  • 65% of our test group were either unsure or don’t know what AR technology is
  • 85% have used an application that uses a form of AR technology such as Snapchat, Pokémon GO, and Instagram
  • Over 50% of our test group have used AR without knowing it
  • 99% have access to a device that can use VR or AR Technology
  • 52% believe that AR Technology could benefit their day to day life navigation and directions being a frequent example

Personas

We set up multiple personas based on the user research we refer to several times throughout the case study.  

Personas are built with scenarios that identify a realistic goal or problem while using the application. Personas focus on 3 common characteristics:

  • User needs or challenges
  • User frustrations or feedback
  • Generating a biography of the user

These characteristics will drastically affect the design decisions we develop.

Design Impact

Spending some time looking through the persona’s and diagnosing the pain points and motivations from each helped us to understand, empathize, and adapt design decisions. This process helped influence the important development of crucial needs and functionality that may have been missed.

  • Instant help function. For emergencies and bug reporting.
  • Completely Free. Making the application free to be as accessible as possible.
  • Step-by- step Tutorial. A thorough walk through from every aspect of the application. 
  • Dynamic Tools. Creativity should be limitless. 
  • Content Moderation system.

User Stories and MVP

User research and person creation brought up the users main needs, goals, and behaviors. Therefore, we found that the main issues in our design decisions needed to solve were:-

  • Cohesive navigation
  • Dynamic tools
  • Instant help in case of an emergency
  • The abilities to customize your public profile
  • Onboarding process

Based on this information, we were able to create user stories and define the MVP

User Flow

We have created several user flow diagrams from every step of what the user can do in the app. From signing in to the app for the first time to checking other users' artwork. These flow charts help map out exactly what a user will go through.

DESIGN EXPLORATION

Low Fidelity Wireframes

Low Fidelity Wireframes

We sketched several paper wireframes that allow us to draw out as many ideas as possible with the knowledge of the required elements to the applications design based on users goals, needs, and frustrations. We took these paper wireframes and built digital versions in Figma to build interactive wireframes for test groups to well…test.

Findings

  • Users found the navigation bar had too much information and was overwhelming.
  • Some users valued the option of disabling the AR and having an art sandbox. 
  • Users suggested that having ‘waypoints’ to nearby art or locations would be helpful for exploring rather than having to look around. 
  • Users wanted some form of confirmation on selecting a brush, color, or action.

Design Solutions

  • We added a collapsible navigation menu to reduce noise.
  • We added a ‘disable AR’ feature that supplies a blank 3D space canvas.
  • We added a ‘waypoint’ feature that shows nearest ‘drops’ in a X mile radius.
  • We added a ‘[X selected] animation after selecting a brush, color, random drop, or size.

Prototyping

Mid Fidelity Wireframing

We took our original wireframes and turned them into a black and white prototype in Figma where we iterated on feedback and defined design themes, and visual hierarchy

Findings

  • Users felt that all drawing tools should be in the button area of navigation for a better flow.
  • Users requested a skip button or the ability to close out of the initial tutorial.
  • Users suggested an option to customize the cursor; some found it distracting while others felt it was necessary.

Solutions

  • We rearranged the hierarchy of what is in the collapsible navigation versus what is in the main navigation to provide users the most relevant tools. 
  • We added a skip tutorial option
  • We added multiple cursor options to help users customize their experience.

VISUAL DESIGN

Designed For Simplification

After a few iterations and multiple tests we designed the final screens with Figma We conducted a final A/B test on some elements we were still unsure about during that process we finalized, defined, and implemented the final design patterns, elements, and colors.

Our goal was to make a modern, cohesive, and simple look. Waterfall is fundamentally based around new technology so it was very important to keep it simple and easy to digest.

WRAPPING UP

What did we take away from this project

Research is a must - approaching this project brought a lot of challenges for us because designing almost anything with the primary focus being 3D space arises problems we aren't as familiar with. Without research we wouldn’t even know where to start.

Users are always right - As UX Designers it is our responsibility to remove as many biases as possible and to listen and understand users. Making apps with a user first mentality was the main influence we were able to deliver a cohesive project.

Challenge yourself - One of the best experiences about this project was thinking outside the box, it was hard but we pushed forward and every step of the way was exciting.