A mobile-first AR boutique showcasing contemporary Dutch design.
Tulip features AR technology to help people visualize products in any environment they choose.
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
Empathize
Define
.png)
Ideate
Prototype
Iterate
Research and Competitive Analysis
AR furniture apps are becoming more common, but the technology that drives them is still developing. 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.
01
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.
02
Everyone wanted the ability to share screenshots or saved pieces with their network. This was especially true of people with partners or roommates.
03
Everyone was searching for items that didn't look like they came from the "Big Box Stores". They wanted an authentic 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. It has a cadence that makes me laugh. I like creating them even more, however. Developing an app map is an important step in the design process. It helps establish a practical, navigable framework with which I can
base my wireframes off of.
Design Patterns
Now that a conceptual framework for Tulip has been established, 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.
.jpg)
Wireframing
Can using an app feel familiar and unique at the same time? That's what I was tasked with building, and 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 feeling is that what makes our experience of an app or website "unique" extends beyond it's content and considers how to harmonize every element. I kept this in mind as I worked on fleshing out higher fidelity versions of Tulip. I needed it to look minimal but friendly, with a tech-y undertone.
UI Kit
After testing and iterating the wireframes with stakeholders and end-users, I could begin to think about creating a visual language to "tell the story" of Tulip. This is what a UI Kit is for. It's an archive of all of the different visual assets that will be used to flesh out the site. Color, font choice, animations, and other visual motifs are kept here, as they all play a key role in establishing a brand's identity. For inspiration, I took cues from the kind of merchandise that Tulip was offering. "Clean and modern with a touch of whimsy" was the style that I chose to move forward with. Below is a sample of the UI Kit that I created as a result.
High Fidelity Mockups and Prototyping
To start, I standardized and fine-tuned the spacing of all of the on-screen elements. This made it more navigable for end users and easier for developers to implement. Then I added subtle drop shadows to the buttons for depth and visual interest. On the home screen, I 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.
.jpg)
.png)
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 height of the drawer 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 and added subtle drop shadows. This was to ensure that people would be able to easily use these features regardless of the light conditions of space that they're in.
