Refining a Raw Experience

CaveWhere Application UI

 
 

Project Overview

Working with the developer of an open-source cave-mapping application, CaveWhere, I was responsible for elevating the raw interface with refined aesthetic sensibilities, while improving user experience and usability.

 

Roles

UI/UX designer

Iconography

Animation Development

 

UI Comparison

While fully functional, the original CaveWhere interface lacked cohesion and a consistent experience.

 

Workflow Breakdown

The CaveWhere application consists of 2 main sections:

 
 
View icon bare_Light_250w.png

View

This is where users interact with a 3-Dimensional representation of mapped caves.

 
Data icon bare_Light_250W.png

Data

The primary work environment of the application, this is where users catalog and input information from various cave expeditions.

 
 
View icon bare_smll.png

View Section

 

In addition to providing a single compiled visualization of multiple surveys of the save cave system, the View section is also used to print to-scale maps for future expeditions.

 
The minimal dark environment draws focus on the interactive map.

The minimal dark environment draws focus on the interactive map.

The View and Export tabs alternate between map navigation and utilities for printing maps.

The View and Export tabs alternate between map navigation and utilities for printing maps.

Tab Refinements

 

View Tab

  1. Dynamic GUI touchpoints are consistent (radial dial and toggles)
  2. Specific degrees can now be typed in or adjusted using the radial dial.
View_Tab.png
 

Export Tab

  1. Removed redundant scale icons.
  2. Removed extraneous “layer group” box.
Export_Tab.png
 
Data icon bare_smll.png
 

Data Section

This section is segmented into 2 halves: the input area and the reference area.

 
 
 
01    Input Area
This area contains section navigation and data entry fields.
02    Reference Area
Scanned images of survey notes and hand-drawn maps appear here. These maps are selected by the user for 3D view generation.
Data_Overview.png
 

Data

“Leads” Window Optimizations

In cave exploration, leads are points of entry to unexplored passageways or caverns.

Uncharted, it is important to know the qualities of the leads and if special equipment will be needed.

 
 
Lead_info_1_scaled.png
01
The original Leads window had preset clickable descriptions that would add data to an editable text box.

This method was redundant, cluttered, and took up a lot of visual space.
 
 
Lead_info_2_scaled.png
02
Initial refinements aimed at removing the text box and opted for a guided solution. Descriptions were still separated by type.

These were populated by adding preset descriptions, which were accessed via a pop-up window.
 
 
Lead_info_3_scaled.png
03
After further discussion with the client, it was revealed that users typically ignore the presets and will input descriptions manually using the text box.
 
 
CW_ColorWheel_Thinner.png

The Role of Color

 
 

Differentiation

Blue is used to identify editable text in areas where they may be confused as static text.

Color_differentiation.png
 

Attention

Color is also used as an accent and highlight, specifically in the note selection and application animations. It is also used to draw awareness to critical actions, like deletion.

Color_attention.png
 

Busy Indicator Animation

This thematic busy indicator is inspired by droplets of water that frequently drip from cave formations.

 

A Natural Influence

The client specified an overall dark visual theme for the application. This paved the way for specific color highlights that would serve as identifying elements.

Conversations with the client brought up the idea of Karst springs, which can be found alongside many cave sites. They are bodies of water that are end-points for cavern drainage systems.

 
Color_library.png

Reference Library

Using found images of karst springs, I distilled their color profiles into a reference library. This would form the basis for the color highlights.

 
Color_main.png
Previous

SMB Solutions