Research and Design Process 

Home Interior Design Web Platform

 2020

Overview

Upspace is a web platform for planning the interior design of a space.

Users

Women and men aged 13-70, who do not have any previous background in design.

The Use

User uploads 2D images of the space he wishes to design. The software analyzes the images and translates it into a 3D illustrated space, in which the user can design.

Upload

Photos

System

Analyze

Design

Platform

 Upload Photos 

How to design a clear call to action?

Let's see how other products encourage their users to upload.

Google Photos

Screenshot (62).png

Yad 2

Screenshot (63).png

Wix

Capture12.PNG

A colored or big button, located in the center.

Clear Call to Upload

Desktop - 33_1.png
Desktop - 33_2.png
Desktop - 33.png
Desktop - 002.png

Adding a Step to the Upload Phase can Prevent Information Overload Later

Load of Information

A confusing load of furniture categories is expected in the design menu later on.

Competitor's Solution

"Room Planner"(3D interior design app) solved a similar problem by setting a different furniture menu to each room type.

Room Planner

IMG_6384.PNG.png
IMG_6418.PNG.png

Solution

In order to avoid the confusion, the user will categorize his images into room types, right after uploading the images.

Later on Upspace's software will offer a relevant set of furniture in the design menu for each room.

Selecting from different categories

Use or edit photos on Facebook press the icon on top of the image.

Payam Daliri

ce258e90d55dee410b7832ba35d25736.jpg

Facebook

Capture14.PNG

Categorizing 

The user will be asked to categorize the images he uploaded by room type.

Desktop - 16.png
Desktop - 17.png
Desktop - 21.png
Desktop - 22 (1).png
Frame 12 (1).png

Before tagging

After tagging

 System Analyzing 

"Users place more value in experiences where they feel a sense of personalized ownership." (The Art of Emotion — Norman’s 3 Levels of Emotional Design\ Justin Baker).

For example Gettaxi demonstrates the taxi search the system does especially for the user by a visual animation. Pango "proves" to its users that it is there for them in times of need by sending a message telling them Pango saved them from getting a report.

Pango

פנגו.jpg

"An inspector checked your vehicle ... but what does it matter? You parked with Pango"

Gettaxi

‎File_001‎.png

Customized Process

In order to strengthen the user's sense of customization, an analyze illustration will be shown "while" the system turns the user's images into a 3D space. This will reinforce the feeling that the system is working and making adjustments especially for the user.

ezgif.com-gif-maker.gif
Desktop - 35.png
Desktop - 36.png
Desktop - 005.png
Desktop - 4.png

2D to 3D Animation:

 Design Platform 

Start with research of other home interior design apps.

Lack of Control Over the Process

Problem

The load of categories in the menu creates inconvenience. The user can't be sure if examined all categories and how many more are there .

Shows a 2D planning and can view progress of the design process.

Room Planner

IMG_6081.PNG.png

Room Planner

IMG_6082.PNG.png

Room Planner

‎File_001‎.png

Room Planner

IMG_6084.PNG

An option to choose a design style.

Furniture editing options.

Visual Indication of Progress

Design Home is a home interior design game app.

How does it avoid the lack of control feeling?

Each category is represented by an icon, located in the space. When a category is being met, it's icon disappears. It is reassuring to see the progress of what categories remain to complete the process.

Different Ways to Solve the Lack of Control Feeling Problem

Design Home

IMG_6086.PNG.png

Design Home

Design Home

IMG_6126.PNG.png
IMG_6127.PNG.png

Undo is a useful design tool.

Search and filter.

Guiding Process Menu

Another way to minimize user confusion is using a progress menu. It guides users through the steps of the process and strengthen their sense of control.

Room Sketcher is web planning software that uses this technique.

Screenshot (59).png
Capture17.PNG

More ways of guiding users through the design process

In different "Design by Yourself" apps.

Mask Swag

Visual Steps instructor

Mask Swag

Screenshot (58).png
Screenshot (51).png

Brand Your Shoes

Screenshot (48).png
Capture.PNG

A map showing the progress

Hidden visual Steps instructor

Next screen in each Step

Tie Dye (an app game of Crazy Labs)

IMG_6089.PNG.png
IMG_6090.PNG.png
IMG_6091.PNG.png
IMG_6092.PNG.png
IMG_6093.PNG.png

An Interactive wizard can Solve the Problem

  • Structure the process into steps.

  • A visual progress indicator.

  • Represents each category clearly.

UI Wizards Research

756881fab819664ffc928cf1097a6479.jpg
IMG_6099.PNG.png
IMG_6101.PNG.png
576cf47114d9e7381a47ed1da98a1b91.jpg
IMG_6098.PNG.png
d382e7dabccf07ecd770f64bc3cb363d.jpg

Solution

Structured Process Visualization

The wizard displaying progress in different furniture categories along the process. ​

Group 51.png
Group 143.png
Group 72.png

Used or Not yet

Can filter in category.

Don't worry, if you want a bath in the living room, you can add it.

Each space will be offered a set of relevant furniture, thanks to the tagging of photos at first.

Group 51.png

Each category is represented by an icon. A category's icon will turn colorful after being met, that will indicate progress. Navigation between categories is enabled by clicking on each icon. 

Navigation Through a 3D Space

How does Google Street View enables navigation?

Group 125.png

To navigate in space Drag or Click

 Google Street View 

Screenshot (64).png

Orientation map

Group 123.png

Navigate between rooms

Shows Progress 

Orientation map

Displays the room at work in relation to the entire space. Enables navigation between rooms. Added elements will be shown.

Group 80.png
Component 17.png

Menu On Top of Work Screen

How did Wix design it's tools menus in the design screen?

Wix

Capture9.PNG
Capture5.PNG
Capture2.PNG
Capture4.PNG

Menus overlay the working screen and might hide some of the designed elements.

Main Menu and Object Settings Menu overlay the work screen.

Group 144.png

Opens on click

Vector.png
Group 145.png

Opens on click

Vector.png

Ready for the Whole Picture? 

Hidden mode

To feel present in the space.

Desktop - 26.png

See progress and navigate to other rooms.

Double click enables exporting a 2D planning sketch. 

Toolbars hidden.

The Design Work Screen

Undo tool

Save tool

Desktop - 28.png

Can zoom in\out.

Vector (1).png

Drag and drop to add

Group 125.png

To navigate in space Drag or Click 

See room tag. Can be changed if necessary.

Object edit tools:

  • Rotate

  • Adjust design

  • Remove 

Shows furniture dimensions and their distance from other objects.

Toolbars can be hidden.

Desktop - 30.png

Describe your image

press to zoom

press to zoom

press to zoom

Describe your image

press to zoom
1/8