ELLIE

Augmented Collaboration

An MVP app that uses AR technology in order to help technicians in the field get advice from experts.

Overview

Our team developed an augmented reality (AR) enterprise-ready platform in the form of visual operation guidance, aiming to improve the efficiency of technical staff and preserve their knowledge, and by making it reusable over time.Our AR platform can provide easy-to-use, step-by-step procedures that guide technicians of any experience level at the physical site. 

https://www.research.ibm.com/haifa/dept/imt/cvar/index.html

The Challenge

The high level goals were to:

 

1. Redesign technician side mobile app to be more user-friendly and easy to use based on feedback from field technicians.

 

2. Design an AR Modeling Studio that enables customers to build and maintain their own self-guided AR experiences.

My Role

I was part of a team which included a product manager, developers, researchers and two senior designers.

My responsibilities included the design of the entire product, which included:

  1. Technician side iOS mobile app

  2. Expert side iOS mobile app

  3. AR modeling web application

 

In the technician side app I had to optimize the usability of existing interfaces for an application that already had an advanced sketch that needed to be redesigned and restructured.

For the design Expert side iOS app and the AR modeling web application I had to create a new design from scratch.

Date

Sketch, Adobe Illustrator, InVision,

IBM Research Lab

Tools

Sep. 2018 - May 2019

Company

Design process

Research, design, develop, iterate. 

 

My design process includes developing a user experience strategy and proposals supported by research, interviews, identifying user insights and needs, designing user flows, wireframes, visual design, and high-fidelity interactive prototype

I based my designs to deliver upon the following key areas

1. Research

Project goal and vision

Study previous design

Competitive Analysis

User persona

2. Insights

Product goals

Product roadmap

3. IA

User Flow

Wireframes

4. Design

High-fidelity wireframes

Prototypes

1. Preliminary research

In this phase I start by understanding the technology, goal and vision of the product.

I discussed the current structure and design with the PM and analysed the existing features of the current product.

Before starting to work on these apps I made sure I understood the iOS design guidelines and how they applied to the apps together with the IBM design guidelines, to do that I contacted an IBM senior iOS designer from Austin and we conducted several meetings where he helped me understand the different dos and don’ts of IBM and iOS design.

As part of the research I identified the persona of the user that will use these apps (field technicians, experts and modelers) and their different pain points.

Referring back to this persona during the design process helped me stay aligned with user goals and remind me of the problems I need to solve for users.

2. Insights

From the research process I gathered key insights that guided me later on when I made design decisions.

 

My insights during the research process fall into two categories: user flow and structure insights, and appearance insights.

 

A few examples of such insights are:

 

  • The current flow and structure was too packed and had many redundant features, which really went against the persona’s story.

  • The buttons and icons are too small, the technician works in the field and needs a very simple interface which includes large icons and buttons without extra features so he won’t be led to make a mistake when working.

3. Information architecture

Based on the insights I collected I started creating the information architecture for the different apps.

This meant fine tuning the architecture of the already existing application (the Technician app) and creating whole new architectures for the two other apps.


 

After having a go-ahead from the product manager, developers and stakeholders on the mockups, we prioritized the most important features in the development cycle and I began to create the low-fidelity wireframes.

4. Wireframes and design

After several iterations and creating an IA of the platform, I captured my ideas quickly by sketching with pen and paper. It also enabled me to examine my ideas before putting everything through the time consuming process of digitizing. then I proposed flows and mock-ups for the three apps: one main AR modeling web application, two mobile apps for the expert and the technician, shared the wireframes with the team to get early feedback, after a few iterations, I was ready to move to the next phase: hi-fidelity wireframes and user testing.

 

At the end of the process, we had a few iterations of user testing in order to get some feedback on our work and to try and understand how the different users reacted to different features.

Based on these tests we made final modifications to the apps before migrating the project to IBM’s product support team.

Usability Testing

I conducted both in-person and remote usability testing with participants, noting down any mistakes, slips, or confusions they encountered.

​In addition, we had monthly meetings with the larger team that included a larger number of participants, as part of our review process, we wanted to let the team experience the app, test it, and give feedback on it, as well as determine if they had any frustrations along the way and if it was intuitive and friendly. After collecting all the feedback, I discussed it with the product manager.

These tests helped me refine the rough edges in the flows and interfaces, making sure that everything is user friendly

Let’s Talk!

If you’d like to get in touch with me about a project, collaboration, or just to say hello, send me a message :]

Tel: +972 - 52 - 6442771