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.
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.
And me, leading the end-to-end product design for web-based products.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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: