Tulip is an e-commerce app for a boutique furniture outlet.  It uses AR technology to help people visualize the products in their environment. 

Project Overview

Tulip's mission is to give the customer an innovative mobile experience while shopping for their next piece of furniture or decor.  Their collection spotlights pieces by contemporary dutch designers while maintaining a global scope.  They allow their customers to preview each piece in their home or office using the latest Augmented Reality technology.  Welkom!

Design Process

Over the course of four weeks, I used a human-centered design methodology to determine how the Tulip app could be optimized to give its customers a fun and intuitive experience.

EMPATHIZE
DEFINE
IDEATE
PROTOTYPE
ITERATE

Research and Competitive Analysis 

AR furniture apps are becoming more common, but the technology that drives them is still in its infancy.  This means that the design patterns that govern our interactions with these apps are somewhat fluid, and can differ from company to company.  With that in mind, I set out to address the needs, wants, and frustrations of the user in the hopes of building an enjoyable and intuitive app that operates within the current limitations of the medium.  I looked at 4 direct and indirect competitors for analysis in addition to conducting user interviews.

Outcome of Interviews

My previous job allowed me to connect with lots of people working in and around furniture/interior design.  Talking to them gave me some great insights and helped me sketch out some provisional personas.  Everyone expected fast delivery and discount prices, but were willing to pay more for limited production runs.  Below are the major commonalities.

1

Seeing the piece in      person was less important to the younger users, but everyone was somewhat skeptical about the accuracy of the dimensions in AR.

2

Everyone wanted the ability to share screenshots or saved pieces with their network.

3

Everyone was looking for items that weren't available and didn't look like they came from the "Big Box Stores".   This was truly an expression of their taste.

Establishing the User

By combining the key attributes of the people I spoke to, I was able to create a persona I could refer back to while designing the app. This was a great help, and made me half-wish that I could combine people in real life to expedite projects ;)  Below is the persona I developed.

Ideation

Here's where I start to think about how this app is going to take shape.  In order to do so, I need to define some design patterns for myself, especially because are aren't really any industry standards yet.  I'm not quite an army of one, though, as there are quite a few apps for me to reference as starting points.

Information Architecture (App Map)

I like saying "app map" out loud.  I like seeing them even better.  This was an an important exercise for me, and helped me to establish a practical, navigable framework which I could base my wireframes off of.  

Design Patterns

Now that I've established a conceptual framework for Tulip, I can dive a little deeper into setting up some specific guidelines for myself vis-a-vie design patterns.  Here, I've created a "Do and Don't" chart which converts my research into actionable points that I can incorporate into creating Tulip.

Wireframing

Can something be familiar and unique at the same time?  That's what I was tasked with building, but I had to start somewhere.  My initial goal was to develop a legible framework for an e-commerce experience. These lo-fi wireframes are a result. 

 My thought is that what makes an environment "unique" extends beyond the variety of items a site offers, and considers how those items can be combined and configured.  I tried to keep this in mind as I worked on fleshing out higher fidelity versions of Tulip.  I also wanted it to look minimal, but friendly, and with a somewhat tech-y vibe.

UI Kit

Prototyping (First Draft)

Prototyping (Final Revisions)

1
2

1.  I got rid of the hamburger menu feature, as it was kind of confusing for some people.  I made all of the actionable items available with the user profile button.

2.  I added a subtle drop shadow to the buttons and changed the color of the background gradient to make the "browse by type" field more distinguishable.

I applied a similar treatment to the category page to differentiate the main tiles and the filter from the products.  Testers liked this, but thought it was a bit too assertive, so I toned it down for the final iteration.  I also changed the gradients to flat colors to make it a bit more modern  looking.

I rethought the actionable items that would appear when the user tapped on the profile button at the bottom of the screen.  I also moved the pop out to the center of the screen, changed the line height, and made the background blur darker  to increase screen legibility.

I increased the opacity of the buttons and information bubble on the AR screen to 100%.  I also bumped up the contrast.  This was to ensure that users would be able to easily utilize these features regardless of the environment that they're using the app in.

Thanks for exploring this project!

© 2020 by Kit Rosenberg

  • Instagram Social Icon