Distat

Distat - Mobile AR Training

Effective, Relevant, and Contextual Learning via AR Technology

OVERVIEW

Distat is an app that accelerates the learning of physical objects using AR technologies. It removes the pain of reading tedious manual or SOP (Standard Operating Procedure) content by mapping instructions with challenges at hand through a contextual and visual learning technology.

 

The startup (also called Distat), focusing on building AR training platforms for clients, wanted to design an iOS mobile app to better demonstrate their platform capabilities and their available services to attract clients. This app should also serve as the foundation for their future client projects, which could be customized and built upon based on clients’ needs. The company had an older version they were using already but there were a lot of design flaws. My responsibility was to do an entirely new design from scratch but stay close to their brand style.

ROLE

Research

Information Architecture 

Interaction Design

UI Design

Usability Testing

 

WORKED WITH

Product Manager (CEO)

Developers

TYPE

AR (Augmented Reality)

Mobile App

Training

THE PEOPLE PROBLEM

Learning from instruction manuals is tedious and time-consuming:

man-checking-airconditioning-manual.jpg
young-worker-checks-trucks-documentation
resetting-the-printer.jpg

And more:

Enterprise organized training is expensive and has a low retention rate.

It's hard to visualize how new instruments fit into the existing environment.

...

Clay Version 1_s.png

Meet Distat,

a mobile app that provides effective, relevant, and contextual learning solution through AR technology.

THE CHALLENGE

Design Problems to Solve

  • Design a mobile AR app that can recognize specific physical objects and superimpose dynamic and interactive instructions on top. 

     

  • Design a feature that allows users to select a 3D model in the app and place it in their physical environment through AR.

Constraints & Challenges Facing

Minimum Research

Due to the limited budget and the availability of previous research data, Distat decided not to perform upfront user research. They expected the designer to work with the company's existing knowledge of business needs.

Lack of Similar Products

The technology was relatively new and there weren't many similar products or established design patterns to refer to. Most AR training products were enterprise-facing and were not downloadable.

Existing Branding

Distat had an existing website and the app should be generally consistent with their current brand style.

 
THE SOLUTION

Final Design

UI Design Demo_Horizontal.png

Design Highlights

Highlight 1

Content Legibility on Unpredictable Background

The background changes in AR based on users' surroundings, which affects the legibility of text and icons. Different approaches were used in this design to make sure that the content was legible regardless of the background:

 

  1. White outlines were applied to texts and icons

  2. Shadows were applied to icons

  3. A progressively translucent white overlay was used at the screen top to further separate texts and icons from the life background without overly obscuring the view of the physical world.

  4. Billboard style (opaque background) was applied for some icons and texts that were more essential to user interactions.

Usability & Flexibility within Different Context

Users may use the app under different scenarios or in different environments. They may run into issues of insufficient lighting, occupied hands, etc. To enhance the ease of use in different situations, the following functionalities were provided:

 

1. QR code scanning to help quickly recognize physical objects if applicable to the objects.

2. Flashlight functionality to assist object recognition under low light situations.

3. AR/3D Toggle control for quickly jumping to the non-AR mode and learning with virtual 3D objects if necessary.

4. Audio instruction was enabled by default, considering it might be more efficient for people to listen to the instructions than to read them. (This could be further developed into a voice control in the future.)

Highlight 2
Highlight 3

Flexibility of Content Navigation & Note-taking

1. Button to open table of content was provided for users to quickly jump to a different section of the tutorial.

 

2. Users could take a screenshot of a step and add it to notebook to review it later. Voice note-taking was available to speed up input. Users could also link to other resources inside the notes.

 

How did I get here?

Move on to learn about the detailed design process.

 
THE DESIGN PROCESS
01 - DISCOVERY

Where are the design opportunities?

The Research & Discovery

I started by doing literature reviews and having conversations with the expert in the company to learn about the AR Training market and customer needs within the training industry. As my client had a very limited budget and they had already done some primary research themselves, they decided not to do upfront user research at the beginning. Also, this technology was fairly new at the time and very few people had used similar products before, so the client's strategy was to get something out there first and collect customer feedback and iterate after

 

I then did a competitive analysis to learn about how similar products behave in the market. Direct competitors were mostly enterprise-facing and did not have publicly available products to try out, so I examined their demo videos. I also played around with other mobile products that had AR training components built in.

 

I synthesized all findings to create research debrief including design opportunities found to inform my design process. Below are the highlights of the findings:

Pain Points within the Training Industry

  • Learning from instruction manuals is tedious, time-consuming, and arduous.

  • Organized training is expensive and has a low retention rate.

  • Hard to visualize how new instruments fit into the existing lab environment.

  • It’s laborious to work with different equipment's input and output system to collect and record data.

  • The experiments and curriculum used for teaching are limited to the available physical resources.

  • It is expensive and inconvenient for salespeople to travel with physical equipment and do onsite demos to prospective customers.

  • Labs are reluctant to purchase HMDs or wearable AR hardware because the cost is high and they are unsure of the effectiveness.

  • AR software that analyzes object components has bad performance in bad light conditions

Design Opportunity Highlights

  • Start with a design for mobile devices (phones and tablets) that don’t require people to invest in advanced AR gadgets, but be prepared to design for AR glasses for users who need their hands free to operate equipment.

  • Optimize the design to allow one-hand interaction whenever possible.

  • Increase content engagement and outcomes of e-Learning by leveraging multi-media technologies, like animations, audios, and interactivities.

  • Provide a mechanism to allow easier data monitoring and recording with the app.

  • Utilize QR code, barcode, or other technologies for better object recognition under low-light conditions.

  • Support on-demand learning for users to review training content even outside of the lab environment.

 
02 - DEFINE

Who's the User? What's the problem to solve? What's the Plan?

1 / 3

Persona Development

I created a provisional persona based on the secondary research data to define our target users. It also helped me keep the user needs and scenarios in mind while proceeding throughout the process.

Persona-Anna-Analytical Lab Technician_V
 
2 / 3

Product Requirements & UX Strategy

By synthesizing the project requirements and research findings, I created a feature list and developed a UX Strategy Blueprint as high-level guidance to my design throughout the process.

Feature Requirements

The first version of the Distat app should at least be able to:

  • Scan and recognize specific physical objects

  • Superimpose specifications and instructions on top of a physical object displayed through the app

  • Correspond to user interactions on the superimposed digital content

  • Detect changes on the physical object and update the superimposed content accordingly

  • Support browsing a wide range of imported 3D models in the library 

  • Support viewing digital models in AR and manipulate its size, location, direction, and other properties. 

UX Strategy Blueprint

UX Strategy Blueprint - Distat_V2.png
3 / 3

Information Architecture Development

Working together with some page layout sketches, I created a sitemap to map out the overall information structure of the app.

Sitemap Creation

Site Map of Distat-V3.png
03 - DESIGN

What are the flows, features, layouts, and looks?

1 / 4

Screen Sketches

I sketched out key screens to explore the possible flows and screen layouts while working on the site map. 

sketch for key screens_v1_edited.jpg
 
2 / 4

User Flow Creation

I then created user flows to map out the workflows that users will go through to accomplish their goals using this app. Two major flows were depicted.

Userflow_v2.png
Wireframe_Distat_v1.1.png

I developed a set of wireframes to demonstrate the features and layouts of the app. The layout and content of each screen were carefully arranged to support the two core user flows.

Wireframes

3 / 4

The Company's Existing Brand Style:

Distat's Existing Website Branding.png

An Earlier Version of the UI Design:

UI Demo_V2.png

Based on the company’s existing branding and my additional research and ideas, I developed the wireframes into visual mockups to define the look of the UI.

Visual Mockups (UI Design)

4 / 4
04 - TESTING

Is the design intuitive and useful to potential users?

1 / 2

Prototyping & Usability Testing

I then developed the visual mockups into a clickable prototype using InVision to prepare for a usability testing on the app’s overall workflow and UI design. I conducted contextual inquiry form of usability testings with the clickable prototype. The goal of the testing was to collect feedback on the general workflow of the app’s main features and the visual look of the app.

Testing Results Analysis

Original Data Points Example.png

Tagged original data points

Data Synthesis_High-level Demo.png

Data aggregation patterns

Summary of Findings

Participants all successfully completed the tasks and found the workflow straight-forward and intuitive. They also liked the visual design in general, though there were a few comments on the color scheme and the prominence of instructions that can be improved. Most of the participants’ feedback was on expectations, possible use cases or feature suggestions. Most issues observed were related to iconography and terminology

 
05 - ITERATION

Address feedback to make the design work better

1 / 2

Design Iterations

With the insights gain from the usability testing, I did several rounds of revisions to the original design. Below are a few examples of the revisions.

 Example 1 - Reconsider Terminology

Revision Comparison 2 - Terminology.png
The Problem

Users couldn't fully understand the difference between "Scan to Learn" and "Virtual Learn" initially. 

The Solution

Changed the two menu options to be "AR Learn" and "3D Learn", which was more straightforward and also corresponding to the mode toggle "AR/3D" present throughout the tutorial. 

 Example 2 - Improve Legibility and Visual Harmony

Revision Comparison 1 - Legibility.png
The Problem

1. The white text on top of the light green-blue background could be hard to read under bad lighting situation, so did the purple text.

 

2. The screen looked a bit jarring with the current color scheme.

The Solution

Used a simple and clean color scheme for this screen to ensure higher contrast and legibility of screen content

 
1 / 2

Final UI Design

UI Design Demo_V5.png
REFLECTION

What I've Learned

Working for Startups with Limited Budgets

Startups with very limited budgets might not support an exhaustive design process. The stakeholders probably couldn't see the value initially in fact. It takes great communications to reach a shared understanding and an agreed-on plan.

Designing for New Technology

For new and innovative products (e.g., VR/AR app), although doing smart exploratory research upfront is important, it's also critical to rely on secondary research data, design knowledge, and knowledge of the technology to quickly create something and validate the design later through evaluative research.

Putting Accessibility to the Front

For a special product which users may use under special environments or with unusual constraints, accessibility considerations need to be put at the forefront. When necessary we should sacrifice visual aesthetics or innovations to ensure high legibility of information.