Room Area Viewer Editor (RAVE)

Enabiling SmithGroup Employees to reduce their data classification process by 65%

3D Box Graphic Element

Case Study

Client / SmithGroup
Project / Revit Plugin Software
Date / 2022, 6 months
Tools / XD, Figma, & Mural

Develop a product that improves employee workflow, visualizes spatial data, and creates central information hub.

Goal

Sole UX & Ui Designer

Role

1 Product Manager, 2 Developers, 2 Software Engineers, 1 UXR / SmithGroup’s Internal Technologies in Practice Studio

Team

Problem

Massive spacial usage datasets are left unclassified or difficult to find creating missed opportunity to utilize project data.

Lightbulb Icon

Solution

Established streamlined workflow through integrated data analysis tools that classify and record key project data firm wide.

FInal RAVE Interface Mockup

Product Solution

Custom Room Area Viewer Editor product that seamlessly integrates into an architect’s daily workflow, allowing them to efficiently record, track, and analyze data.

Project Timeline 2020-2022

Understanding the why

User Needs and Business Needs
  • Role: Shadow UXR during research phases

Insights

SG employees need an efficient workflow and integrated data analysis tool in order to effectively record and utilize key spacial classification data.

User Research Feedback Data
  • Role: Lead UX Design

Connecting insights back to the human experience.

Personas

Persona

User Journeys

User Journey

As a busy architect, Eric needs to be able to efficiently develop spacial massing plans so that he can balance his workload across multiple projects.

  • If Eric is able to quickly reference past project data,

  • Then he will be able to significantly reduce the amount of time creating a massing plan for new projects.

Establishing a framework for a new user workflow.

Reducing steps in process by 50%

Decorative Green Blur element
Current process showing 8 steps
New process with only 4 steps

Building the information architecture.

User Groups – Understanding the Internal Workflows

Information Architecture Diagram
Purple Blur background element
Wireframe sketches
50+ wireframes sketched
White Wireframe Background element
Wireframe sketches
White Wireframe Background element

Interface structured by the type of action performed by the user.

Data Input

3D Visualization

Data Output

  • Close collaboration with the dev team to work within their technical limitations.

Initial wireframe

Lo-Fi Prototype

5 Moderated usability studies

DESIGN UPDATE 01

Create distinct steps for users to follow when classifying project space.

Before

After

Before version of classification process
New version for classification process
Visuals of steps introduced

DESIGN UPDATE 02

Clarify data analysis visuals and allow users to customize output method for their specific needs.

Before

Before option data visual output as bar
After option data visual output as circle or bar chart

After

Visualization toggling between circle and bar chart

DESIGN UPDATE 03

Make distinct tool bar for interactive levels tool in the 3D display panel.

Before

Level indicator tool before

After

Level indicator tool after

Logo Design

RAVE logo

Ui Design

High contrast,
accessible color pairings

Ui Typography
Ui Buttons

Components

Launching the MVP

Putting it all together

Laptop Frame Mockup
Final RAVE Dashboard interface

20

Participants

Continued testing with a focused group of 20 participants. Conducted unmoderated usability testing and collected insightful feedback through interviews and surveys.

Results

  • 323 projects classified

  • Totaling 30,244,675 sqft classified to date

  • 150+ users actively classifying project data

  • Utilized regularly by at least 32% of project teams

Lessons Learned

  • Successful implementation of design concepts requires constant conversations with the developers and software engineers.

  • Interface design must be flexible in order to work on a large range of screen sizes

    • Next step: Continue to explore optimizing responsive designs for the R.A.V.E. interface.

  • Progressive design guides users through a potentially complex task by chunking information or actions into achievable steps.

    • Next step: Further refine & test data visualization out put methods.

Previous
Previous

Buddy – Mobile App for Youth in Foster Care

Next
Next

Accessible Routes Mobile App Design for Google Maps