Case Study

Spatial Asset Management System

Spatial Asset Management System

Overview

Artists and producers from client studios want to be able to quickly view their 3D spaces in a map-like top down view, so that they can identify the geographic location of POIs (Point of Interest) quickly and edit parts of the space with more speed and precision. 

This solution is meant to also help users more accurately place AR activations in the 3D space so it shows up in the right locations in the physical space.

Role and Outcome

I was given Product Requirements that encompassed client requests and features for an MVF with a fast turnaround. I designed the feature and the MVF launched on OKO web in the spring of 2023.

Web Development

Web Development

Feature Planning

Feature Planning

Client Relationships

Client Relationships

Systems Design

Systems Design

Designing a Site Map for Asset Management

The development of the "site map" began when a client requested a map-based spatial asset management system.

The development of the "site map" began when a client requested a map-based spatial asset management system.

Challenge: Design for These Requirements

Seamlessly Enter and Exit the Site Map 

Creators should be able to seamlessly go back and forth between the map view and the 3D space. 

Place, Edit, and View Details of POIs

Creators should be able to navigate the map, see existing POIs, edit POIs, comment on POIs, view details of POIs, and place new POIs. 

Search and Filter

Creators must be able to search and filter through existing POIs in the space. 

Additional Map to View Spaces as POIs

There should be a map view for each individual space, but also a holistic map view of all discoverable spaces in a geographic location.

Cross-Platform Development

The site map was a complex feature that would exist both within an individual space (“in space”) as a map of the space and in the space discovery page (“in hub”) as a map of discoverable spaces in a geographic location.

Early Research and Design

I drew inspiration from existing map products on the market that exhibited detail and complexity. Early designs were sketched out and taken through design critique before continuing iteration. 

Designing a System

The pin markers in the map had several elements that were designed to visually communicate different components of the spatial experience. These elements include the image, icon, color, size, and more.

The Proposed Solution

DESIGN CONCEPT

I created high fidelity mockups to visualize the feature in a more complete form. I also created mockups of the feature as it would appear in the early stages of MVF development and used this version for design handoff.

I created high fidelity mockups to visualize the feature in a more complete form. I also created mockups of the feature as it would appear in the early stages of MVF development and used this version for design handoff.

FAMILIAR MAP BEHAVIORS

Map behaviors are intuitive to users of Google Maps, Apple Maps, and other familiar map applications. Asset details can be viewed and edited within the map view through the side panel.

Map behaviors are intuitive to users of Google Maps, Apple Maps, and other familiar map applications. Asset details can be viewed and edited within the map view through the side panel.

MAP OF DISCOVERABLE SPACES

Map of discoverable spaces is accessed through space discovery page (hub). The same UI elements are used from the individual space map.

Map of discoverable spaces is accessed through space discovery page (hub). The same UI elements are used from the individual space map.

DESIGN HANDOFF MEETING

I led the the design handoff meeting where designs for the MVF were handed off to development and reviewed one last time by product managers.

I led the the design handoff meeting where designs for the MVF were handed off to development and reviewed one last time by product managers.

Reflection

The spatial asset management system was a project focused on meeting the needs of a high-value client as soon as possible. The obstacles that came with this focus were uncertainties in the feature development plan and fast turnarounds in design deliverables. Although it was a sudden development, what made everything come together in the end was the swift and frequent communications between developer, designer, and product manager.

Next Up

Next Up

Next Up

An assistive and augmentative communication app for mute people.

An assistive and augmentative communication app for mute people.

AI Integration

AI Integration

UI Design

UI Design

System Design

System Design

Prototyping

Prototyping

Create a free website with Framer, the website builder loved by startups, designers and agencies.