ENTERPRISE UX DESIGN

Orion Labs

About Company

TLDR: we make smart walkie-talkies! 😎

Orion Labs is the leader in voice-activated business communication and automation for the mobile, frontline workforce.

With a focus on hospitality, transportation, logistics, and field services, we provide cloud-based enterprise services including alert workflows, indoor positioning, geofencing, language translation, Health, Safety, & Environment (HSE) compliance checklists, and more.

Design Goal

To make voice products and services more valuable, usable, and useful for people requiring constant communication with their teams.

Time Period

Jan 2019 - April 2020

The Product Team

  • Head of Product
  • Product/Program Manager
  • UI/UX Mobile Product Manager
  • UI Designer 👋🏾
    As the UI Designer, I was responsible for:
    • Discussing the “what and why” with the Product team to better inform my design decisions. Syncing with the engineering team to discuss interactions, implementation phases, and also ways to ensure happy user experiences.
    • Choosing appropriate levels of fidelity (and interactivity) at each point in a design project, from quick sketches to highly polished visual prototypes.

Accomplishments

  • Led the visual design of a ‘blue-sky’ concept to a shipped product (Orion Command Center - Dispatch Console). This product will enable us to sell our platform to more enterprise and public safety customers.
  • Responsible for the current and future aesthetic of everything that comes out of the Orion Command Center.

📌 Chelsea Note!
If you're in a hurry, check out the Dispatch Console Presentation instead.

DESIGNING FOR WEB-BASED PUSH-TO-TALK

Dispatch Console

To operate effectively, dispatchers need to speak directly to their team, monitor staff locations, and assign tasks rapidly.

The Orion Command Center’s Dispatch Console enables enterprise administrators, dispatch teams, and desk workers to instantly connect with their mobile workforce without the requirement of installing software or other limitations of traditional desktop tools.

Dispatch Console - Final Mock - Version 1Dispatch Console - Version 1

📑 Back to Top


Overview

BeforeOrion Push to Talk

One of my first tasks at Orion is to brainstorm and explore how features from the ‘Orion Push to Talk’ app would appear in the Orion Command Center.

What features, you say?

  • Send messages to a single person (DM PTT),
  • Send messages to an entire group (Group PTT),
  • Review + Replay recent messages,
  • Locate team members on a map,
  • And also look towards the future of multimedia messaging services.

SOLUTIONS

Referencing previous initiatives, using design intuition, and following UX best practices, I designed an interface that:

  • Influences the order in which the human eye perceives the information that is being displayed,
  • Respects, unites, and improves the current styling of Orion products,
  • And strives to be mindful of the Web Content Accessibility Guidelines.

THE PROCESS

🔍 Discovery

Since this project has gone through many iterations prior to me joining Orion, the Product team shared what they’ve tried, what was implemented, and also their research findings.

Research Method #1: Product Team

The team shared screenshots of the various competitor/comparative interfaces. They focused on elements they thought would make the product successful.

🗝️Key Finding #1: Prominent PTT button

To give a sense of familiarity to PTT’ers out there, we want to display the PTT button a bit large and in a findable location.

🗝️Key Finding #2: Learning Curve

Dispatch platforms are known to be overwhelming and not friendly. Our users have various technological literacy levels and it's important that we create a desirable interface that they won’t have to spend too much time figuring out “what does this button do...?” and “where do I start?”

Research Method #2: Comparative Analysis

Since there aren’t that many friendly web-based PTT platforms out there, I ventured down a rabbit hole into the gaming world. 🎮 Communication within the gaming community is HUGE. Many platforms have found efficient ways to streamline thousands of people chatting and sharing simultaneously.

🗝️Key Finding #1: Enjoyable and Explorable Interface

Discord is a voice communication and messaging service, and its product is constantly improving and adding new features. Discord does a great job with displaying welcoming illustrations, clear distinction between sections, and tooltips + icons.

Discord websiteWelcoming Illustrations
Discord website Clear distinction between sections
Discord website Tooltips + Icons
Discord website moar tooltips!

🗝️Key Finding #2: Make Room for Content

Continuing down the rabbit hole, I checked out Twitch. Twitch is a video streaming platform that enables gamers around the world to connect, chat, and stream their gaming sessions with fans and fellow enthusiasts. Twitch does a great job with content first and making room for more of it with expandable/collapsible panels and video modes.

Twitch website Channels + Chat expanded
Twitch website Channels collapsed
Twitch website Channels + Chat collapsed
Twitch website Theatre Mode

Research Method #3: UX/UI Audit

The UI/UX Mobile Product Manager led the previous iteration for the MVP. The UI is simple but could use a bit of love and structure. To prepare for taking the reins in the next iteration, I did a mini audit.

Dispatch Console - Earlier IterationDispatch Console - Earlier Iteration

🗝️Key Findings & Recommendations #1: User Identity

Relying strictly to names to identify a person might be a bit hard for our users. So to improve comprehension and findability, I plan to add avatars to create a connection to the name.

🗝️Key Findings & Recommendations #2: Contrast

The contrast in the interface is narrowed only to colors and battles to grab your attention. So I’m going to explore other types of contrast like shape, size, and position.

🗝️Key Findings & Recommendations #3: Content Scannability

The message log lacks a clear hierarchy which makes key elements hard to scan. Incoming and outgoing messages are not differentiated. Group vs DM messages could be emphasized more.So, in line with recommendations for #2, I’ll explore types of contrast to make the content more digestible.

📑 Back to Top

🎯 Strategy

Designing an enterprise app is an iterative process. To have a positive impact, it is important to design with scalability and flexibility in mind.

🎨 Design

Hand Sketches

Sketch v0

  • Navigate to Dispatch from other pages
  • Location of speaker indicator
  • Viewing Member details
  • Collapse Member list

Sketch v1

  • Multi-group interaction
  • Nesting member list in Groups
  • Map Log and Breadcrumbing

Sketch v2

  • Search and filtering
  • more Map Log
  • Detail view notes

Wireframes

Wireframe Prototype 1: Scenario where the dispatcher/manager/admin can:

  • Switch views between members availability
  • View/ and filter Group only messages
  • View and filter DM only messages
  • View messages sent between members (customer request)
  • Close Message Log for Full Map view


Wireframe Prototype 2: Updates

  • Added more status types. Changed Toggle component to a Single-Select menu
  • Added ‘Show map’ toggle. Some customers will not want the map feature. When off, the message log is in full-mode.
  • Broke the Message Log filter into ‘filter groups’. Will give users a clear view of their selections.
  • Explored a collapsed version of the Member List


Visual

After a few wireframe iterations and approval of direction, I venture into visual design.


Design Prototype 1

  • Organize Member List by status instead of controlling it with 'single-select menu'
  • PTT states: Message Transmits on-click and timer displays.
  • Avatar badges
  • Explored audio player styling to distinguish message type


🎉 🙌🏾 🎈 Dispatch Console (Version 1) - RELEASED 🔗

  • Relying on the audio player style to distinguish the message type got a bit messy...especially when multimedia came into play.
  • The best option was to specify an incoming and outgoing background color. And use an icon + clear labeling to indicate a DM.
Final Image

Orion Command Center and Dispatch Console (Version 2) 🔗

After shipping Version 1, the product team and I wanted to clean-up and organize the colors used in the OCC interface.

Our ‘brand blue’ is a bit mechanical and harsh for the interface so I defined a ‘ui blue’ (via Adobe Kuler) that’s easier on the eyes. This new blue will be used as the primary across platforms.

In Version 2.0, I focus on color contrast and typographic hierarchy. I also explore how to handle multimedia messaging and updating the rest of the command center.

📌 Chelsea Note!
Due to the COVID-19 pandemic, Version 2 is iced and I won't be able to lead this project into fruition. Below you'll find a few exploratory mocks I worked on for the future OCC.

Final ImageDashboard (Illustrations by: Toni Chen) Final ImageTable + Row Details Final ImageDispatch Final ImageSettings (Illustrations by: Toni Chen)

📑 Back to Top

Result

Stakeholder & Customer Feedback

Dispatch Console (Version 1) received a lot of enthusiasm and support from Stakeholders and Customers:

Business Wire: MBTA and Transdev Partner with Orion Labs for Advanced Communication, Dispatch, & Auditing

Transdev will be implementing Orion to deliver their critical transport services as part of the response to the COVID-19 public health crisis in service to the Massachusetts Bay Transportation Authority (MBTA) contract, one of the largest public transit agencies in the United States.

“Transdev chose Orion’s dispatch and cloud communication platform to ensure reliable public transportation and to protect the health of our customers and our contractor’s employees.” - Jim Nihan, Manager of Paratransit Operations

Retrospective

What went well?

  • Dispatch Shipped! 🙌 Our customers find it easy to use and get a lot of value out of it while helping others.
  • It’s super cool to work with engineers who have a working knowledge of (or care about) UX design principles.
  • The OCC needed to go through a massive code cleanup and I was included in conversations regarding UI component libraries.
  • I also enjoyed gathering feedback from the engineers when sharing wireframes, designs, and prototypes.

What didn’t go so well?

  • It would’ve been nice to have better visibility into what our customers are saying about our product at all times (got access to customer stories after the fact).
  • I think we did our best in dividing and conquering this project but having an enterprise UX strategy in place would’ve made the process a bit more efficient.

What have I learned?

What we create can be a case of make or break for a business.

📑 Back to Top