Overview

Webex Teams is a cross-platform office collaboration application that streamlines office communication between colleagues.

Due to the complexity of the application, conversations between design and development teams can be tricky. The need of a live and sophisticated prototype grew as more functions were added to the app.

My role in the prototype team served the potential product users and the internal product teams.  My work allowed design teams to test new ideas quickly and hand off high fidelity assets to their development partners.

The Challenge

• Bring the vision of the app to life.
• Create a customizable test environment.
• Work across design teams to identify their needs
• Time is always limited. Test fast, learn, and repeat.

Designers

I want to show the experience over time, not just a click through. How the app transitions from step 1 to step 2 should be part of the testing.  I don't know how to code but I want to give my development partners what they need to get it right.

Engineers

I want to put the exact specs into the final product, but still images don't provide me with all the information I need. It would be great if there is something in place that I can refer to as I build new features.

Researchers

A click-through prototype is a great start, but we are missing the real experience in user testings. It will be great to have a prototype that is more realistic, so I can gather more information from the testing.

Executives

We have all these great ideas for our product. I want to be able demonstrate our future vision to business partners. They need high fidelity examples to feel the excitement of these ideas.

Solution

• Hi-fidelity prototypes demonstrating the interaction and visual design.
• Design Hub to document the progress of design decisions, including user testing results and conclusions.
• Design Hub collects all the design elements, including color, typography, iconography, and motion elements.
• Create an interactive, code-ready library for engineers to grab design elements as needed.

The Process

Prototypers like me serve as the communication liaison between design, research, and engineering.  We provide high fidelity, close-to-final product visualizations and log records of design decisions within the Design Hub. 

• Working with the interaction and visual designers, the prototypes mimic the actual experience.
• Sound and motion behaviors are integrated to raise the level of prototype fidelity.
• User researchers can utilize prototypes for usability testings and provide results for design teams.
• UX prototypers update prototypes to match design decisions, recording the changes on Design Hub for cross-function teams.
• Engineers can easily refer to Design Hub for visual elements and technical specs.

Outcomes

Here are some quick examples of the works been done.

See Them in Action 

Live Prototype Example
*Restricted access

Prototype Depot Site
*Restricted access