DOORS

Exploration app with Augmented Reality component

UX | UI | 3D MODELING | WAYFINDING

DOORS is an innovative, social platform that allows you to get out into your community and explore your area through the eyes of a neighbor.  DOORS presents you with a unique chance to wear somebody else’s shoes for an afternoon and get a taste of the ideal time in their favorite neighborhood. Incorporating the latest technology of augmented reality and the eternal excitement of a scavenger hunt, DOORS is the crossroads at which technology meets real life.

Problem: A lot of new-comers and tourists would love  to experience the city beyond its top crowded attractions. They want to go off the beaten path and visit places recommended by locals rather than travel books. Unfortunately not everyone is lucky to have a local friend or afford a personal guide to show them around. 

Challenge:  Within an eight week span, create and prototype an app that takes a user to five locations. Incorporate unique wayfinding system, Augmented Reality component, and a Physical token presented at the completion of route. This app must be a sister brand of Augment and must include 3D models and a laser-cut token.

Solution: Create an app that would allow a user to experience an area through the eyes of a local. The user would explore a neighborhood of their choosing with the help of a wayfinding system and Augmented Reality. They will go to five different destinations based off of their set preferences or trending routes.  The users will have an opportunity to explore new areas and share their findings with friends, all while enjoying today's latest technology.

My role: User  Expereicen Design,  User Interface Design, Prototyping, 3D Modeling, Creating unique wayfinding system

Tools: UxPin, Sketch, Rhino, Marvel, InDesign, Illustrator, Keynote

Timeline: 6 weeks

Collaborators: Hannah Riley

[unex_ce_button id="content_lzal94u4m,column_content_o82bm94om" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="2px" button_bg_color="#00d699" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#b2ffed" button_border_hover_color="#000000" button_link="https://marvelapp.com/2269j94#12782516" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SEE CLICKABLE PROTOTYPE[/ce_button]

Any User Experience project is about making educated choices backed up by research and data. To make sure the application met our user's goals and needs, our design process went through the following phases:

PHASE 1

 

The first step in the process was to create a brand for the app that fits within the family of Augment. After researching the brand, we matched the typeface to Augment and created a complimentary color scheme and logo with 3D elements for a cohesive fit.

PHASE 2

 

Perhaps one of the most integral phases of the project was developing a compete user persona. This stage helped steer our decisions along the way, making sure we were meeting Kyle's needs and addressing his goals.

To create a better understanding of how Kyle would be using this app, we focused on analyzing his lifestyle, interest in technology, and personal goals. We created two sets of goals, sharing and exploration, knowing that we would need to address them throughout the app.

PHASE 3

 

To help keep both of us on track, we developed specific scenarios in which Kyle's goals would come up. This helped us better hone in on how exactly our app would fit into Kyle's lifestyle.

Creating specific scenarios for Kyle's goals helped set parameters, in which DOORS would fit into Kyle's lifestyle. Because the app's specific functions were not fully flushed out at this point, we creted a UX comic that could be shown to other team members and stakeholders to further illustrate the overall fuction of the app and explain how exactly it would fit into Kyle's life.

PHASE 4

 

This phase consisted of us diving deeper into the list of heuristics to further understand the technical standards of the IOS system and how to best create the most fluid UI for our users.

For this process, we researched an app that had a similar function as our app would (minus the AR and wayfinding system) – Gogobot. Through this process, we were able to evaluate the most important heuristic elements to apply to our own app. 

One of the most prominent things we wanted to focus on was creating a seamless experience that would help our user navigate the app to complete his goal. We also wanted to keep the interface clean and simple, using help prompts and color to guide the user through his task.

PHASE 5

 

Phase 5 included task flows and wireframes. 

The research prompted our next steps of creating the task flow. Because of our timeline for creating the app within a few weeks, we concentrated on a single task to showcase how this process would be repeated through the app.

Multiple iterations of paper wireframes were created before we went into UxPin to finalize the wires (seen here). We concentrated on maintaining a straightforward flow for the user.

[unex_ce_button id="content_zes8ofqhy,column_content_r7ni6n989" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#21d398" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#4fffdb" button_border_hover_color="#000000" button_link="https://marvelapp.com/2269j94#12782516" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]SEE CLICKABLE PROTOTYPE[/ce_button]

AUGMENTED REALITY

 

A unique challenge to this app was the Augment Reality component. For the final two weeks of creating the app, we dove into a crash course of Rhino to learn how to make our 3D avatar guides. Although the learning curve was steep, the end result added a whole new element of exploration to the app.

We created unique, branded QR codes that we attached our 3D elements to, as would be seen in the app. These avatars appear at each location, holding a clue as to what your next destination may be.

Above is an example of the route that can be generated by users. It shows its approximate length, distance between the stops, as well as the possible types of destinations. This map cannot be seen by the user, but rather serves as an inside-facing document.

Try it out! Scan the stickers with your Augment app.