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.
Distat (the startup), focusing on building AR training platforms for clients, wanted to create an iOS mobile app to better demonstrate their platform capabilities and 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 old prototype and a website. My responsibility was to do an entirely new product design for their app 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:
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.
...
Meet Distat,
a mobile app that provides effective, relevant, and contextual learning solution through AR technology.
THE CHALLENGE
Design Goal / Problem to Solve
Design a mobile AR app that
-
can recognize specific physical objects and superimpose dynamic and interactive instructions on top.
-
allow users to place a 3D model in their physical environment through AR.
Constraints & Challenges Facing
Minimum Research
Due to the budget and the availability of previous research data, Distat decided not to perform exploratory user research. They expected the designer to work with their existing knowledge.
Lack of Similar Products
The technology was relatively new and there weren't many similar products or established design patterns to follow. Most AR training products were enterprise-facing and not available to the public.
Existing Branding
Distat had an existing website and they expected the app to be generally consistent with their existing brand style.
THE SOLUTION
Final Design
Design Highlights
Content Legibility on Unpredictable Background
The dynamic background in AR affects the content legibility. Different approaches were used in this design to make sure that the texts and icons were legible on top of the ever-changing background:
-
White outlines were applied to texts and icons
-
Shadows were applied to icons
-
A gradient overlay was used at the screen top to further separate texts and icons from the live background without overly obscuring the view of the physical world.
-
Billboard style (opaque background) was applied to some icons and texts that were 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 improve the app's usability the following functionalities were provided:
1. QR code scanning - help quickly recognize physical objects
2. Flashlight functionality - assist object recognition under low light environment
3. AR/3D toggle control - quickly jump to the non-AR mode and learn with on-screen 3D objects if necessary
4. Audio instruction - increase learning efficiency through audio instructions so that eyes don't have to travel between objects and the textual instructions (This could be further developed into a voice interaction model in the future.)
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 can take a screenshot of a step and add it to Notebook for future review. Voice note-taking is available to speed up note input. Users can 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 in 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 more exploratory user research at the moment. Also, this technology was fairly new at the time and very few people had used similar products, so the client's strategy was to get something out there first and collect customer feedback and iterate after.
I then performed competitive analysis to learn about how similar products behaved. 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.
Below are the highlights of the research findings that informed my design:
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's 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) first that doesn’t require customers 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 for 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.
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
3 / 3
Information Architecture Development
I created a sitemap to map out the overall information structure of the app.
Sitemap
03 - DESIGN
What are the flows, features, layouts, and looks?
1 / 4
Screen Sketches
I sketched out key screens while working on the sitemap to explore the possible flows and screen layouts.
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.
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:
An Earlier Version of the UI Design:
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 InVision prototype and conducted contextual inquiry form of usability testings. The testing goal was to collect feedback on the general workflow of the app’s main features and the visual look of the app.
Testing Results Analysis
Tagged original data points
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 could 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. Below are a few examples of the updates.
Example 1 - Reconsider Terminology
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 say "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
The Problem
-
The white text on top of the light green-blue gradient background could be hard to read under bad lighting situation, so did the purple tab label.
-
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 content legibility.
1 / 2
Final UI Design
REFLECTION
What I've Learned
Working for Startups with Limited Budget
Startups with very limited budget 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 emerging 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 products 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.
