Homely AR App

UX & UI Design | Visual Design | Branding | Prototyping

Tools: Illustrator | Photoshop | InVision | Unity

2018

Intro

A partner and I created Homely, an application for users looking for easy and affordable decor solutions. We used augmented reality to help users visualize their space before purchasing new decor pieces. We ask you the user a few questions and find pre-existing design themes from existing sources.

 
homely+title.jpg
 

Defining the Problem

My team started off by studying the interior design industry. We identified a few opportunities that could influence designers and consumers.

Some of the opportunities we discovered were:

  • Saving users time by not having to travel to stores to only see limited displays and cookie cutter layouts

  • Helping professionals and consumers visualize ideas in a physical space

  • Allowing user to share and gain approval efficiently

Challenges

Based off of our research we started to create our visual design, UX/UI work,  and the prototyping of our final app as well as showcasing the augmented reality.

Some of the challenges we faced were:

  • Creating the app using AR even though the soul purpose of Homely isn't to play with AR

  • Making sure that Homely's main objective was to help users design their space and was customizable to them based off of the questions we ask the user to gage their preferences

  • A short timeline which was challenging for developing a working prototype

 

Storyboarding 

We storyboarded three user scenarios that targeted various budgets and styles to demonstrate how our app would function for a variety of users. The users we selected were start-up studio owners, college students, and first home buyers. 

 
homely stroyboard sketch.png
 

Low Fidelity Wireframes

Because of our time restrictions, my team member created quick low fidelity wireframes so that there was something to base our design on. This became the building block for our high-fidelity mockups. 

 
Untitled-14.jpg
 

High Fidelity Mockups.

I designed our mockups using Illustrator. The user is first asked to determine what budget, room, and style suits them best. They can also take a photo of an already existing piece of furniture and Homely will generate different decor options based off of their responses. Augmented Reality is used to project the decor pieces in their space so they can visualize the look before purchasing items.

 
MOCKUPS_v5 copy.jpg
MOCKUPS_v5 copy 3.jpg
2.jpg
7.jpg
MOCKUPS_v5 copy 2.jpg
8.jpg
4.jpg
MOCKUPS_v5 copy 5.jpg
 

Prototyping Our Design

We presented Homely at the George Brown School of Design Year End Show. To showcase the app we prototyped it using InVision.

 
 

Presenting the AR

To present the Augmented Reality interaction, we designed four living rooms using the same pink couch as the focal piece. The themes we based the rooms on were, art deco, bohemian, minimalist, and industrial. We built the room in Unity using free assets and styled them using various textures.

We fabricated a 2ft x 2ft wooden cube made from plywood to display each of our rooms. We attached wooden boards to the perimeter to act like the "floor" of the space, as well as to have a spot to secure our AR markers. We created black and white AR markers and also included descriptions for each room. The cube was painted pure white to show contrast against the markers.

 
51070797_1985819954846952_6063436130420785152_n.jpg
51339510_235749560695009_5723603624878145536_n.jpg
51177617_2183310668584759_5908110450637144064_n.jpg
Screen+Shot+2019-01-26+at+11.11.00+PM.jpg
 

AR Markers

I designed the AR markers in Adobe Illustrator and imported them into Unity using Vuforia. Then using Xcode, built the AR to an iPad and our iPhones. We used these devices to present the augmented reality feature to people attending the year end show. 

 
art deco.jpg
bohemian.jpg
Industrial.jpg
Minimalist.jpg