12345.png

Overview

Goal: Design mobile app for SEEM

Role: Product Designer, UX Researcher, UX & UI Designer, LOGO & Branding Designer

Tools: Pen/Pencil & Paper, Figma, Adobe Photoshop, Maze

Process: Research & Empathize - Define - Ideate & Design - Prototype - Test

 

Background

SEEM is a new app for interior design and they have partnerships with a number of top 10 furniture stores in the U.S. SEEM is currently scanning all the catalog items featured by these stores, as well as setting up processes to keep their catalogs updated.

This project aims to deliver an immersive and enjoyable shopping experience on the newest AR-ready devices and minimize the trouble that is associated with furniture shopping.

Along with the app, SEEM needs a brand design that aligns with their message of practicality, efficiency, and neat.

Note: this project was completed as part of DesignLab’s UX Academy program

 

Research

  • Market Research

  • Competitive Analysis

  • Surveys

Research goals

  • Understand how the online furniture/home decor purchasing process looks like and why people choose that way to shop and why they are afraid of this.

  • Recognize the competition – analyse the strengths and weaknesses and find space for improvement

  • Understand screens layouts/ information architecture of other AR apps for interior design

  • Recognize people’s experiences (bad and good) and expectations on how to make furniture/home decors online shopping easier

    See the whole Research Plan.

Market research

I began this project with secondary industry research on market trends and competitive analysis. What I have learned that the market for augmented reality is still growing and furniture is the top product people want to shop with AR (60%). I also found out that customers agreed that using this feature affect in a positive way they shop online. The most important information which gave me a big motivation was that all retailers who adopt augmented reality, have stated it has driven up their sales.

Competitive Analysis

There are numerous furniture apps in existence already. I walked-through through user journeys on competitive platforms compared to their solutions, app features, visualization capabilities, pricing, and availability. This analysis gave me a sense of how to approach building questions for primary research and where to start once I began to draw sketches.

Provisional Personas

Guided by my secondary research, I based each persona around how people shop patterns. I created provisional personas to begin thinking about who might make up SEEM’s user base. These provisional personas helped bring focus to my survey questions.

Survey

To get qualitative data as well I decided to use open- question surveys as I wanted insights from a large number of participants and save the time.

In the first part of the survey, we have general about users' habits about furniture shopping (online vs in person) and pains and fears about doing this. In the second part - I wanted to have the knowledge about customer experience with AR technology and other tools/features used for interior design.

Research synthesis

I collected 15 surveys. Key findings out of this research allowed me to came up with the point of view statements and how might we solutions, and this let me come out what SEEM app should include to be serviceable for their users.

Define

  • Persona

  • Customer Journey

Persona

I used the insights and needs of 3 different groups of customers, as well as much of the research gathered this far, to build a persona named Martha. She is a character that will dictate a lot of my design decisions moving forward.

Customer Journey

Continuing my defined process, I mapped out Martha’s journey of buying a new desk for her apartment using the SEEM app.

Coustomer journey v2.png

Ideation

  • App map

  • Interaction Design - user flow

  • Sketches

App map

I created an app map based on the most important features I found while conducting research. I referenced navigation design patterns in other furniture apps in order to make the application as intuitive as possible.

Interaction design _User Flows

I made a user flow for the primary solution the app provides. The User flow helped me plan which screens I need to design.

Sketches

The quickest way to start ideation was to draw sketches, which served as the basis for my wireframes, and eventual final UI. I decided to go with half screen sheet approach design.

Design

  • Wireframes

  • LOGO Design

  • Style tile

  • High Fidelity Designs

Wireframes

After verification of a few ideas, I took the next step and created the mid-fidelity wireframes. My goal for the app was to make it very simple to use, while at the same time more helpful to my users than competitor apps. I did so by providing features such as:

  • advanced product filtering

  • detailed instruction for AR tool

  • clean product presentation with all product details (where to see, assembly instruction ect.)

  • to screen with AR design view I added a product list of items used in a particular design. Users can add items to cart from this level.

Please, see all below screens in details.

LOGO Design

I wanted to create a logo that reflects "augmented reality" and "3D". After getting inspired by projects from Behance and Pinterest, I started to sketch several variations. Finally I decided to go with a cube symbol as this looks more professional and has a better association with the app's purpose while capturing the brand message.

During creation, I also had to ensure it could work across multiple sizes, including an app icon.

Style Tile

I made a style tile to use as a foundation and reference for when I would get into the high fidelity designs. I chose to go with a warmer color palette. However I wanted to keep the modern look as well.

I have chosen legible typography in two different styles. For headers 1 and 2 I chose a font that brought to my design a little bit of luxury. For the body text I chose San Serif to keep my design readable.

High Fidelity Designs

After creating my style tile, once again I went back to research outcomes I started to develop high-fidelity design. I designed:

  • Screens for on-boarding - with designed by me graphic

  • All screens we needed to show how filtration works

  • A screen where we can see product presentation and product description

  • All screens needed to show how AR function works

  • Screen with a list of products used in a particular design

All my designed screens are created with material.io rules. If you want to, see below screens in detail.

Usability Study

  • Prototype

  • User testing and Affinity Map

  • Next steps

Prototype

I chose to continue using Figma in order to do advanced prototyping in a reasonable amount of time. I had to re-touch some images in Adobe Photoshop to gain smooth user flow in this prototype. I decided to show color changing as well how easy users can add the product to the cart from AR view.

TASK 1. Starting from Main page, please go to the desks’ category page and try Copenhague Desk in your room. Select the blue color as well. Add the desk to your cart in a chosen color.

TASK 2. Starting from Main page, use design AR tool and scan your room. Add Copenhague Desk from your Wishlist and try this desk in your room.

User testing and affinity map

Three tests were conducted virtually using Zoom and its screen sharing function.  Six other participants conducted the test remotely using MAZE (2 testers abandoned test after several seconds).

You can see how users clicked and which path they took looking on some Maze screenshots.

Users' feedback, interaction behavior, and suggestions have been recorded and presented in Affinity Map.

Next Steps

  • Implement solutions found during the usability test stage

  • Expand the prototype and continue testing to improve results

  • Begin implementation

Conclusions

This project was instrumental for putting everything I’ve learned about UX/UI into practice.

As someone who have never used an app with Augmented Reality for interior design, a strong research study became that much more important to justify my design decisions and figure out solutions to give the product an advantage over the competition.

I learned that it is not only important to understand the users’ experiences with competitor apps, but also their experiences when doing what the app aims to help.

I also got a sense of the reality of the necessity of iteration. It took me many attempts to settle on a logo and a lot of trials to get the app just the way I both wanted it and needed it to be for a good user experience.

This project made me realize again that it’s always a good idea to start with old fashioned but still good pencil and paper. Is easier and faster when you are not restricted and good ideas come quicker when you are able to quickly eliminate the bad ones.