logo

The Command Center MVP

Orion Labs 2017
responsive priview
Background
About Orion Labs

Orion Labs is dedicated to connecting people, organizations, and devices through seamless voice communication. Combined with their push-to-talk device - the Onyx, and their mobile app, Orion Labs has been working on a plan to spearhead their way into the enterprise space. Within 8 months of joining, the platform I designed was announced at the IWCE conference in Las Vegas on March 27, 2017.

Problem
How can we improve communication for businesses that rely on hands-free and real-time collaboration across teams?

Industries, such as healthcare, construction, and transportation, currently use some form of push-to-talk (PTT) devices to fill their communication needs across their teams. These devices are often clunky and hard to use, and do not come with administrative properties for managing users, which can result in a conversation channel riddled with chatter unrelated to the users' task at hand.

Our business goal aimed to cater to enterprise use cases, meaning we had to cater to a large amount of users, where a hierarchy may exist (ex: manager with team) and we needed to enable organizations to set-up Orion voice services on an administrative level and be able to manage their teams and communication groups.


  • Pain point 1: Can't communicate reliably due to channels dropping off, lack of clarity, or battery life
  • Paint point 2: Can't ensure communicate channels or teams are protected and secure
  • Paint point 3: Can't manage teams remotely
Role
The Team
  • 1 Service Engineer
  • 2 Back-end Engineer
  • 1 Product Manager
  • 1 Quality Assurance Engineer
  • 1 User Researcher

And me, leading the end-to-end product design for web-based products.

Use Case
Industries in need of hands-free communication

Any industry that comprises of people needing direct, hands-free communication (i.e. voice activated tools), with multiple groups to aid in coordinating efforts across any distance is a potential user. With the addition of the Command Center, this means the ability to create and dispatch teams from a desktop without having to be out in the field, while also being able to track real-time locations of their teams.

Past case studies include being able to organize with a team of healthcare professionals to provide better quality care through reduced response times or a bike maintenance service that required truck drivers to be able to communicate with operation managers on where to drive to for their tasks and to keep their team updated with their location and task status.

Users
Administrators need to
  • be able to provision accounts to manage user permissions
  • be able to set-up their organizations to use our subscription service

Managers need to
  • be able to manage their teams in real-time to keep everyone on track
  • have controls over chat channels to voice instructions

Employees need to
  • be able to hear their leads clearly through the Onyx devices
  • have provisioned accounts organized across company devices
Discovery
Site Map & Information Hierarchy

After reading the product design document thoroughly, I drafted a map to show the information architecture and basic user flows for the proposed feature set. Knowing I would be sharing this with our product and engineering team, I color-coded portions of this map to show what parts we should prioritize.

I presented this to a variety of stakeholders to capture any potential issues anyone could find early in our process and to ensure our goals aligned. What were we missing? What should we consider for the future? What is our expected timeline for parts of this flow? These were the answers we all sought to discover.

Our First Feature Priority
User Set-up Flows

To get users into our product, we needed to allow users to create their own account for the Command Center and a way create an organization account that would consist of other user accounts. The main reason for prioritizing the "set-up" flow is because we did not yet have a sales team or a customer success team. Without this self-service way to manage their own organization, Orion Labs would have to spend extra costs on hiring (which we weren't in the position to do yet) or have someone else (most likely, a very busy founding employee) to deal with customers, which would dampen productivity.

User Flows
Flows for Account Creation

I worked with our user researcher to document comparisons of different sign-up flows. We discussed which flows worked best from our observations and what could be better or improved upon. After our brainstorming session, I created an idealized flow based on our findings. I presented the flows to the engineering team for feedback to see where the flow could be optimized to decrease development time and to understand any technical constraints with my proposal.

Paper Prototypes

I explored a few different layouts for Orion Command Center by creating sketches, then turning those sketches into paper prototypes. I used this method to quickly test my ideas with the team to red flag any issues. The outcomes of these design reviews led to some whiteboarding on user flows, which helped me refine the designs during the wireframing/grayboxing phase.

I advocated for mobile-first screens, but due to time-constraints, we decided to table it for later. To me, it wasn’t a matter of if we’d do responsive, but when.I kept this in mind and it was the main reason I designed widgets and self-contained sections for content on all the pages. (Spoiler Alert: we ended up making this mobile-friendly about 1.5 years later.) The platform would need an "overview" screen, and a "details" screen. I found that a single panel layout that could expand into a dual panel layout was the most versatile for what we were trying to achieve with the Command Center.

Design Library
Creating a New Design Library

Since this the first enterprise platform the company has ever launched, it called for a more subdued style guide - a far cry from the pink-orange-purple gradients that graced their consumer-facing website. I worked closely with the mobile product designer to come up with a new enterprise style guide. The mobile apps used a less colorful palette, but had brighter colors for the buttons and system notifications. For the Command Center, I didn't want the brightness of the UI elements to give a jarring impression, so I derived a more gray-toned version to be easier on the eyes and the neutrality of the colors would work well with other company logos if/when we allowed white-labeling.

Colors

Derived from the mobile app, I desaturated the colors to put less strain on the eyes when viewing via web. The notification colors are in two sets. The lighter versions with a border are for toasts or banners, while the harsher colors are for inline error states.

Navigation, Inputs & Text

I chose to use Open Sans font because it was already being used in our marketing collateral, and provided great legibility for text-heavy content.

Buttons & Dropdowns

The ghost button and solid button allowed us for options, where a solid button may be too bold as the main call to action. Since the pages themselves are primarily white and light gray, having a block of color could look out of place if it's the only color on the screen.

Wireframes for Account Creation

I created gray-scale wireframes to refine my paper prototypes. I presented this to the design team and user research, and facilitated a quick user test of the account creation flow using a clickable prototype to understand where the flow could be improved. It was unanimous that the wizard step-by-step flow was hard to mess up - but the error messaging and constraints around uploading a picture file could be clearer.

Wireframes for the Command Center

Focused on delivery, I designed reusuable components for the Command Center to shorten development time- which is why the groups and users tab look the same. Both have a wide list view, then a secondary view for a panel to slide out to reveal details about a selected row. I treated the home tab as a dashboard for quick actions and figured it could remain flexible as we learn more about what our users would like to see here. At this point, I wasn't sure if we'd want a customizable dashboard depending on the user type (administrator vs manager vs employee).

The main use case for the groups tab was to allow admin to manage and provision teams by creating new groups and adding members to them. The main use case for the users tab was to allow admins to add and manager who in the organization will be provisioned a smart-walkie talkie and what organization role they will hold. For MVP, we would have three roles: an admin (doing the setup here), the team lead or group lead (who could manage their own group), and then a regular team member who would be given an account to access whatever group they've been assigned to.

Refinement
Creating Mocks

With the new design library set-up, I created mocks of these wireframes. Our routine was to have weekly design reviews with the other mobile designer, our ux researcher, and on occassion, the head of design and VP of product. Below are the final mocks for our MVP.

After engineering handoff, I worked closely with the front-end engineers to ensure that the designs were accurately followed. I helped QA the designs with the team once a version was up on our staging environment.

Mocks for Account Creation
Mocks for the Command Center
The Debut 2017
International Wireless Communications Expo

On March 26, 2017, the Orion Command Center was officially unveiled. We achieved our goal: to showcase the Command Center at the International Wireless Communications Expo (IWCE) to generate interest and get potential customer leads from key industries. This was my first time manning a booth at a convention, and it was a wonderful experience to walk people through our MVP product and get reactions. I got to talk through and learn about different potential use cases with interested parties, while also learning more about the current tools and frustrations in the communication space we were aiming to improve.

The obvious reason for being at IWCE is - profit. We wanted to capture as many leads as possible with those who would be interested in learning more and potentially signing contracts in the future. Aside from gaining valuable insights from those that could benefit from our product, creating this MVP was a huge money saver because we didn't have to allocate resources to build everything that we thought was "right" for the product, but instead built minimal managerial functions to allow admins to manage their organizations through the Command Center, which in turn, gave us an established base point to churn interest in different market sectors. You can read more about the public announcement here.

Conclusion

When designing a product from the ground-up, it's important to understand all of your stakeholders' goals. In the early phases of my design process, I listened to both objective and subjective feedback and parsed out the reasons "why" this feedback was being given. If we're better aligned on project goals from the start, there will be less chance of misunderstandings down the road. This has helped create a smooth pipeline for my design process, and helped me build trusting relationships with those involved. After a trying 8 months, our team successfully shipped these features:

  • View, add, remove users from an organization
  • View, add, remove groups from an organization
  • Assign group leaders within communication channels to manage teams
  • Edit group name and what groups users can participate in
  • Sync data with the Orion Mobile App to give users a seamless experience