@erikrosner - Designer, Photographer, Creative Problem-Solver
web_erik-rosner_fl-sim_hero.png

Forklift Simulator Dashboard

UI / UX

 

Forklift Simulator™

UI/UX
Dashboard Design
User Research

Forklift Simulator is a Virtual Reality (VR) training experience for learning how to operate warehouse forklifts and other machinery. Simulations are built on the Oculus platform and are fitted to a variety of terminal types. Forklift Simulator is a client of The Portal and this scope was completed while working as a product designer there.

web_erik-rosner_fl-sim_hero.png
 
 

Overview

With a selection of terminals and a growing library of VR simulations built on the Oculus platform, Forklift Simulator trains workers to operate machinery without the risk of damaging valuable inventory or equipment. Trainees are scored as they work through collections of simulations that mimic real-work scenarios.

Customers include General Electric, BMW, Nissan, Mercedes-Benz, DHL, L’Oréal, DHL, Nestlé and Unilever, among many others.

 
 
web_erik-rosner_fl-sim_overview-1.png
web_erik-rosner_fl-sim_overview-2.png
 
 

The Challenge

Design a dashboard for assigning exercise simulations, managing user profiles, updating curriculum and running performance metrics.  Specific needs include: 

  1. Separate profile types and displays for administrators and trainers.

  2. Flexible structure for adding, editing and removing entire courses in addition to specific exercises.

  3. Detailed metrics and data visualizations that can be tailored and customized on a client-by-client basis.

  4. Intuitive for foreign and non-native English speakers around the globe to understand and operate.

Additionally, the dashboard needs to be adaptable to a variety of terminals and display sizes, and be functional with both touch interaction as well as mouse and keyboard input. 

 
 
Reach truck Simulator.png
Order Picker simulator.jpeg
 
 

User-Centered Design

By following a user-centered design process actual human user needs are used at every stage, rather than just the final result. The groundwork is laid with observational and first-hand ethnographic research to identify key user frustrations, wants, needs and roadblocks.

This data sets the foundation for exploratory sketching, with additional user input gathered at various stages from wireframes to interactive prototypes. Finally, the product is user tested, where some features are validated and others are returned to for additional iteration.

 
 
web_erik-rosner_fl-sim_design-process.png
 
 

Observations & Research

I spoke with company stakeholders and simulation designers to understand the critical metrics of what is being assessed in any given simulation. 

I also observed a warehouse workers to see how forklifts factor into their day-to-day functions. I learned how forklift operation training is traditionally conducted, spoke with warehouse staff to understand their personal frustrations and suggestions when first learning to operate the machinery. 

Additional feedback was provided by the client from interviews conducted with customers overseas in Europe and in Asia regarding needs and experience.

 
 
fl-sim_warehouse.jpg
web_erik-rosner_fl-sim_notes.png
 
 

Demographic

The target users possessed a unique set of constraints that factored into the design and structure of the dashboard.  

Warehouse workers tend to be less tech-savvy on the whole relative to other user groups, particularly with Virtual Reality. Additionally, customers from around the world will be using the dashboard, so non-native English speakers must be accounted for as well.

 
 
web_erik-rosner_fl-sim_personas.png
 
 

Framework

A lean framework was designed to allow for the addition of new courses and individual exercises. In addition to first landing on the home dashboard overview, separate sections are dedicated to Curriculum, Metrics, and Trainers/Trainees [depending on login type].

While all users have need to access each of the sections, different types perform different functions [e.g. trainers assign curriculum while administrators add and update curriculum]. Staying within time and budget considerations, separate actions on similar screens will generate by user type.

 
 
web_erik-rosner_fl-sim_sitemap.png
 
 

Ideation & Exploration

Various layouts, arrangements and hierarchies were explored first by hand. Needs and constraints of my demographic that were found in research are front of mind at this stage.

Early stage sketches are loose and rudimentary as a ‘brain dumping’ exercise to simply get ideas out of my head and down onto paper. Certain directions that hold promise are redrawn with increasing fidelity.

 
 
web_erik-rosner_fl-sim_wireframes-analog-1.jpg
web_erik-rosner_fl-sim_wireframes-analog-3.jpg
 
 

Grid System

The dashboard was designed on an 8-pt grid system, meaning every box, button and margin is built on an increment of 8 pixels.

An 8-pt grid has the advantage of being scalable to the widest range of screen dimensions without the risk of anti-aliasing or uneven pixel alignments. Other benefits of 8-pt grids include a consistent overall visual harmony with content dimensions and negative spaces sharing a common denominator.

Additionally, time and energy is saved in decision-making when designing screens as well as with development on the backend. This is due to less time for developers spent referencing spec sheets and focusing on each additional margin as sizes are consistent and become more intuitive over time.

 
 
web_erik-rosner_fl-sim_grid-spacing.png
web_erik-rosner_fl-sim_wireframes-digital.png
 
 

The Solution

A straight-forward and intuitive dashboard with a muted background and color corresponding to features and navigation. Actions can be both applied to single profile as well as bulk applied to multiple selections.

Course exercises are housed in accordion style tabs so as to be seamlessly added to, rearranged and removed without backend development. Tables are filterable by a variety of metrics, with data points interchangeable dependent on customer needs. 

 
 
web_erik-rosner_fl-sim_dashboard-trainer.png
 
 

Color Theory

Color is used deliberately throughout. Each color corresponds to a certain set of actions or dashboard sections. The interface is built on varying grey tones to offer ideal contrast to each color.

 
 
web_erik-rosner_fl-sim_color-theory.png
web_erik-rosner_fl-sim_assign.png
web_erik-rosner_fl-sim_new-trainer.png
web_erik-rosner_fl-sim_metrics.png
 
 

Simulation Exercises

Simulator curriculum live inside cards and accordion tabs so as to easily add, move or rearrange exercises all from a single screen.

 
 
web_erik-rosner_fl-sim_courses.png
web_erik-rosner_fl-sim_course-expanded.png
web_erik-rosner_fl-sim_trainees.png
web_erik-rosner_fl-sim_screens.png