_

Interactive Map | Product Designer

_
Client:
inCitu
_
Role:
Product Designer
_
Team:
UX/UI consultants, Design director, Developers
_
Date & Timeline:
2023, 2 months 

_
Skills:
UX/UI design
Design systems
Wireframes 

_
Tools:
Figma 

Overview:

inCitu is an AR startup that utilizes public and/or client data to generate 3D models of planned building developments. Users can access these models in AR or 3D through the browser or the company’s app.

The problem

A central component of the product, the interactive map, was confusing for users to navigate. It was difficult for users to learn more about projects and required users to copy and paste a link and open a new browser tab. Project information was spread out in too many places and the commenting experience wasn’t intuitive. Additionally, the old map did not include exciting new features like the 3D view of the map and easy access to 3D models of specific projects.

Goals

The central goal of this redesign process was to make the interactive map more streamlined and include new features. Priorities included featuring the 3D models, updating the commenting flow and making the “share” functionality more accessible. Once these designs were finalized, everything would need to be adapted for all devices including computer, phone and tablet and all access point whether that was the browser or the app.

Design process

1. Creating low fidelity wireframes & iterating
2. Refining designs
3. Expanding UI
4. Adapting Design

Low fidelity wireframes

The first step after understanding the goals of the redesign project was to create low fidelity wireframes and start to iterate with the design team. My original sketch included a project detail panel on the side of the screen that would allow users to explore the map while easily seeing more details about specific projects. Additionally, I added a pop-out window so that users could see and interact with the 3D model. Through our interactive design process more features were added like the 3D view of the map, the user profile and the simplified commenting functionality.

Map iterations:


Project detail panel iterations:

The map

There were a lot of important updates to add to the new map. They included: adding a “my location” button, adding a toggle between the 2D and 3D views of the map, showing building footprints, creating a branded product header with a user profile and updating and expanding the UI.

We decided to switch the search bar from upper right corner (old map) to upper left corner so that it would nicely overlay with the project detail panel. Additional buttons and functionality are now clustered in top right for easy access. A header bar was added to the top of the entire map to help unify company branding and include user profile.

Old Map: 


New Map:

Project detail panel

On the old map, in order for a user to read project details and see the 3D model they had to copy and paste a URL that took them away from the interactive map. This created a lot of friction for users to navigate projects. The central goal of redesigning the project detail panel was to reduce this friction and allow users to easily browse different projects. The Secondary goal was to allow users to interact with the 3D model and to improve the commenting, viewing in AR and sharing experiences.

Old project detail page:

New project detail panel:

New commenting:

New share & AR pop-ups: 

Creating UI elements

After settling on new designs, I began to work on refining the UI. In order to do this, I referenced UI from other parts of the product to help establish a unified design system. I needed to create a handful of new icons and buttons.

Adapting design for all devices

After desktop designs were approved by the entire team including design team, engineering team and leadership, I began to adapt the design for multiple screen sizes and access points: tablet, mobile and the inCitu app.

In the initial sketching phase, I had considered how the project detail panel approach would easily translate to many screen sizes and devices. This proved to be true when adapting the designs to fit all devices.

Launch & next steps

inCitu users have started seeing the new designs! These updates are happening in realtime with each set of updates that the engineering team pushes.

Once all of the designs have been implemented I would like to do some testing to see if the design needs further refinements:

1. Is navigating around the map and toggling between 2D and 3D intuitive for users?
2. Are users leaving comments? If not, how can we encourage users to engage?
3. Are users looking at projects in AR? If not, how can we encourage users to engage?

An immediate next step is to start working on other aspects of the product to include new functionality and make the entire product experience more seamless for users.

Other project for inCitu 

︎︎︎ Booth Design for conference

︎︎︎ back