UI/UX Flow Map

Figma Prototype: here

UI/UX Design

Home Screen

Github Links: (MainView)

• Company Name and Logo: Oceancat
• Simple, uncluttered opening interface
• "Create New Model" to begin scanning process
• Room Gallery displays each previously uploaded/made project or room
• Furniture Gallery displays each previously uploaded/made furniture item

These buttons were reworded slightly after some of our users' struggled during testing to understand the app's terminology and paths. For example, we found that loosely using the term "model" without specifying between a room model and a furniture model contributed to a low, 33.33% success rate among users asked to create a model of an object near them. Of those who succeeded in completing the task, the average number of clicks to do so was over five times the number expected. Thus, the "Room" and "Furniture" galleries are distinctly labeled as such. Additionally, we added a functionality where clicking "Create New Model" from the home screen reveals a pop-up that prompts the user to choose whether they would like to add a room model of a furniture model before proceeding to the Scan View. Having these three buttons on the Home Screen helps guide the user to each of the main functionalities of the application and therefore, improves the navigability and learnability of the app.

If the user chooses to create a room model, the above screen appears, prompting them to choose between two methods of creation: 3D scanning, which navigates to the Scan View, and file uploading, which navigates to the Upload View.

Upload View

Github Links: (Upload File View, After Upload File View)

In the Upload View, the user is given the option to select an existing json file that includes the details of a room and its furniture with respect to size, position, and orientation. The purpose of this functionality is to offer users an alternative option to scanning. Once uploaded, the view will preview a generated 3D model of the uploaded room and give the user an opportunity to give it a name with which it will be listed as in the Room Gallery, making it easier to locate later on.

Scan View

Github Links: (Scan View)

Upon entering the Scan View, the user moves around their room or furniture item with their phone camera, allowing the application to call on Apple's ARKit to collect dimensional/ spacial data. Once the user is done processing their object of interest, selecting the "Done" button prompts Apple's ARKit to process the collected information in order to generate a 3D model of the scanned room/item.

Room Gallery

Github Links: (Room Gallery View)

The scrollable interface displays every saved room project as a card with basic information, including an image of the room, the project name, and the date the project was created. Clicking on any card opens the 3D model view and editing tools for the corresponding room. The "New Room Model" button located at the bottom of the screen allows users to create a new room project by scanning or uploading a file. As previously noted, our user testing revealed that the term "model" was relatively ambiguous and confusing in how it was worked into our application. Therefore, this page, which was previously called the "Model Gallery" was renamed in hopes to lessen user uncertainty.

Furniture Gallery

Github Links: (Furniture Gallery View, Furniture Scan View)

Similar to "model", our post-test questionnaires revealed that users found our app's use of the word "object" unclear and sometimes misleading. As a result, we renamed the "Object Gallery" to "Furniture Gallery", in order to further distinguish it from the "Room Gallery." The setup of this view is meant to organize furniture items for the user and make them more easily located when trying to place a specific item into a room model. As with the rooms in the Room Gallery, the furniture items are listed in a scrolling interface with the name given to them by the user. Additionally, the items display the type of furniture they are and a "Preview AR" button that allows the user to place a saved item directly into their environment. This way, the user is able to click through their furniture items and move around the room to get an idea of what they might want to add to the room and where to place it. At the bottom of the screen is a button to add new furniture to the gallery, which will navigate the user to the Add Furniture View.

Add Furniture View

Github Links: (Furniture Input View, Furniture Upload View)

As with room models, users are given two different options for adding a furniture model to the application:

1. Via Scanning
2. Via Uploading a File

Here, they input the name and type of furniture they are adding. This allows the application to sort the furniture items into groups so the user has a easier time later on when finding a specific furniture item to add to a room. Once they have selected their desired method of adding, the view proceeds to either navigate to the Scan Furniture View and begin that process or prompt the user to select from their device's files, as shown below.

Scan Furniture

Github Links: (Furniture Input View)

Using object capture API, the user is prompted to scan their own furniture. This creates a model which we will then use to replace the white boxes of furniture. The furniture is saved to the furniture gallery for later usage. Users can also upload models of existing furniture. Once the object is in the furniture gallery, it can be previewed in AR and/or viewed later by navigating from the home screen, as noted above.

Room Model View

Github Links: (Edit Model View)

During our user testing, we found that only 66.67% were able to properly create a recommended room layout from our app. In addition, several of our testers either created or began to create a recommended room layout when trying to complete an unrelated task. Therefore, we came to the conclusion that previously-named "Smart Adjust" button did not use intuitive enough language and renamed it "Auto-Layout." Selecting this button would then prompt the user to fill out a brief survey for our algorithm to use to generate a new layout for the current room and furniture. Below that, the view has a the "Save to Gallery" button that logs the changes and adds/updates the room in the Room Gallery, and an "Export Json File" button to export the layout. By displaying these three buttons in the Room Model View, the application provides users clear paths to take in order to use any of the main room modifying functionalities that it provides.

Edit Furniture Model View

Github Links: (Edit Furniture Model View, Select Furniture)

If the user selects a piece of furniture in the room displayed in the Room Model View, the view will change to allow for adjustments to the selected object, as shown below.

This view provides users with a way to easily adjust the furniture's position and orientation in the room using the sliders and 90 degree rotation buttons. Once the user is happy with it, they can select "Exchange Furniture Model" to replace the box model with a more realistic representation of their desired furniture. The replacement options given are the items in the user's furniture gallery, sorted by type of furniture.

After the item is chosen from the furniture gallery, the view places it in the corresponding box model position.

User Preferences Survey

Github Links: (Request Survey View, Survey Algo View, Post Algo)

After selecting the "Auto-Layout" button in the Room Model View, the user is asked if they would like a recommended layout generated for them. This gives them a chance to go back before generating a layout in case they misinterpreted the purpose of said button or hit it unintentionally. In order to add an aspect of personalization to the recommended layout algorithm, the user to prompted with this screen to fill out a select few questions about their room preferences. Once this is done, the algorithm processes the answers to each questions and attempts to meet as many of the given preferences as possible with the resulting recommended layout. Upon displaying the new layout as a 3D model, the application allows users to modify the furniture in the setting and/or save the changes to the Room Gallery.