Research & Design
A Scalable Real-Time Screen Sharing and Collaboration App
UX Strategy, User Research, Interaction And Visual Design For A Multi-Platform Application
Impact
Delivered the first cohesive UX direction for the product.
Background
This collaboration platform enabled secure wireless screen sharing and other collaboration capabilities from any device for organizations of any size.
After recognizing UX issues with the solution’s existing mobile and desktop applications, the team tasked me with leading a redesign to better support user needs and business direction.
My Role
Gathered and addressed stakeholder input.
Synthesized research and design recommendations into a final approach.
Created high-fidelity interactive prototypes to illustrate the design direction.
Planned and conducted iterative user testing and design.
Redefined the look and feel and color palette in-line with brand requirements, to better support user needs.
Created detailed, annotated, mock-ups for developer hand-off.
Key Challenges
Pushing For More Change
During our initial research and design effort, performed by an external agency, we discovered the sales team was sensitive to introducing customers to too much change. The product had recently undergone a major UI update and the sales team worried further change would upset customers.
Unfortunately, by not introducing larger interaction architecture changes, we would let previous design decisions, which flew in the face of well-known design principles (such as direct manipulation), live.
Approach
To overcome this challenge, I quickly wire-framed ideas that pushed beyond the current interaction architecture. I discussed these ideas with the agency and challenged them to discover the right design, leaving me to worry about our approach to managing the necessary changes.
Outcome
One breakthrough that came from this encouragement was the ability to enlarge a piece of shared content by clicking directly on it (direct manipulation), rather than the previous method of hunting down and clicking on an avatar.
New method of viewing shared content: Interacting directly with the content.
Scaling Gracefully
The product can be tailored to an organization’s collaboration needs, resulting in a variety of configurations and scenarios to support. The simplest and most common scenarios involved a single meeting room with a single display with one participant sharing. However, there are also scenarios with rooms connected to conference calling solutions, multiple rooms joined together, multiple displays in a room, and multiple participants sharing across the displays.
Approach
Although the later scenario is less common, I had to ensure the design scaled to handle the more complex scenario. For a given piece of functionality, I asked myself how it would work in both the simplest and most complex conditions.
Outcome
This resulted in an app that feels natural no matter the complexity of the configuration.
Mobile design that gracefully allows easy viewing of multiple presenters across multiple, in-room displays
Adopting A New Color Palette
I ran into another challenge when moving from high-level interaction design, to visual design. After applying the company brand UI standards, two things occured:
The UI elements (buttons, icons, etc) were more salient than the shared content.
Due to lack of contrast, shared content, especially those with lighter backgrounds, blended in to the user interface, making it difficult to determine where the shared content started and the UI stopped.
Approach
To address this, I researched UI design best practices for media applications, which led me to explore a darker color palette for better contrast. I then mocked up several proposed visual design directions based on existing brand imagery, and discussed the need for a dark UI with product owners and marketing. Once the dark UI direction was approved, I created an on-brand component library to nail-down the final look and feel.
Outcome
This resulted in appropriate color contrast enabling comfortable viewing of shared presentation material, and drove consistency across mobile and desktop designs.
Final Design with Modified Color Palette.
Custom Component Library Composed of Dark UI Elements
Managing Change
With a new design direction that only slightly resembled the design of the existing applications, we needed an implementation approach that would allow the team to remain agile and not upset customers with another UI overhaul.
Approach
I worked with the Product Owners and Architect to break the new design into discrete stories and define a phased implementation approach, which the team then began incorporating into their backlog.
Outcome
This allowed the development team to begin moving re-design related stories into their backlog and size the work.
From Old to New: A phased implementation approach.