Case Study

Site Maps for 3D Spaces

Site Maps for 3D Spaces

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

Site Maps Project Plan

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.

Feature Requirements

Feature requirements were articulated in a PRD Handoff Meeting with product manager, product designer, and developers. The "Site Map" MVF would be released on the web platform.

Feature requirements were articulated in a PRD Handoff Meeting with product manager, product designer, and developers. The "Site Map" MVF would be released on the web platform.

Feature Development Plan

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.

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. 

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. 

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 Site Map project 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.

The Site Map project 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

Design Sprint
with Barkly

Design Sprint
with Barkly

One week design sprint to create a health management app for pets.

One week design sprint to create a health management app for pets.

Design Sprint

Design Sprint

Branding

Branding

Prototyping

Prototyping

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