Heem (Fictional Project)
UI/UX Design

Heem, a new interior design company, asked me to create a store application with augmented reality functionality so as to offer an even richer experience to its users.

Heem Logo

About the Project︎
Heem is a US young and exciting furniture company well known for its outstanding customer service and a great catalog selection. Its goal was to make available an application that could reflect the company’s values and generate more engagement with its customers.

Heem’s requests for this project were mainly to:

1) Create an app from which the user could easily browse the company’s wide catalog and select their desired product

2) Improve the user experience by including in the app the AR functionality so the client could virtually place the product in the desired location.

UX Challenges︎
1) The first problem I faced in this project was in creating the Heem brand from a blank canvas.
I studied competitor websites and apps to find out how they visually express their brand identity and values. To get the right inspiration, I used multiple moodboards to visually describe Heem's identity and the one of its users.

2) The second problem I had to deal with was understanding how a furniture application works. Using the Ikea application as a reference, I first identified the user flow and the user interface components. Subsequently, I identified the problems present in the system and looked for feasible solutions through the analysis and comparison of similar applications.

3) The third challenge of this project was defining the style of the UI components for the Heem app. Considering the brand identity that I created previously (point 1) and integrating the latter with further inspirational mood boards of UI components I started to develop the visual language (typography, image style, color palette etc.) for the Heem application.

4) The fourth and last challenge that I had to face was about finding a way to integrate the AR function in the Heem app.

I started this phase by doing some research focused on finding out what AR is and how it is currently being utilised in the interior design sector. This helped me to concentrate my attention on the potential benefits that a user can get by using this type of technology.

App and User Map

App Map and User Flow

UX Solutions︎
Bearing in mind the design considerations made in the research phase, I first schematized the structure of the mobile application through the creation of user flow and app map, as this allowed me to visualize the organization of content in the app.

First, I chose a font face Helvetica because this reflected Heem’s values and provided a nice visual contrast within the app. Subsequently, I developed a typographic scale.

The established proportional scale 2/3 was the most suitable for the project because it provided a variegated number of readable dimensions for the text and, at the same time, these were sufficiently contrasting to be able to create dynamism within the composition.  Subsequently, through a modular grid also based on the 2/3 ratio, I structured the space with the aim of obtaining modules of variable sizes suitable to accommodate the varied content of the application.

Style Guide

Using the simplicity of navigation as a reference concept, I first developed the menu in three levels. This system helps the user to start their search from a generic level and progressively go into specifics; I also designed the filter functionality to allow the user to have more control in his search by reducing the number of visible products.

Later, I focused on how to display the products. I equipped the product page with a menu tab that allows the user to move from the image gallery to the product AR, and vice versa.
As a last element, I created the AR with the aim of further enriching the user experience. This feature has an initial guide, which helps the user to get comfortable with how to use and enjoy the AR technology. So the user can efficiently approach the technology and try different solutions in order to have a better vision of the product and virtually place it where they desire. Once they are satisfied with the result, they can take a picture of the scene and save or share it in their device or go straight to the cart to complete the purchase. Otherwise they can return to image mode and change the product.

Product Page

Considerations ︎
I really loved this project because I approached the design from an unexplored point of view and this allowed me to further expand my skill set.

In order to have a solid ground for designing the brand identity and the application, I focused my attention, especially on the visual information rather than textual ones. In doing so, I created mood boards to strategically organise all the information (typography, images, color, graphic style) necessarily to concretely translate the Heem concept into something tangible.

The next step that I really would like to take is to add a VR feature to the application. This is something that would be completely new for me and this would certainly give me the opportunity to improve my understanding of product design and user experience.
United Kingdom