Proteus Motion: Help Resources
Role: Product Designer, UI/UX
For: Android App & Web
Tool: Figma
Role: Product Designer, UI/UX
For: Android App & Web
Tool: Figma
Proteus® is a revolutionary performance testing device combined with a powerful new resistance training tool. Proteus’ patented 3D Resistance and Software Insights unlocks the first and only way to measure strength and power for every human movement, so Proteus can deliver the most personalized training insights in history.
︎︎︎Learn More About Proteus
While working at Proteus I designed a Help Resources modal, which helps users find answers to all their Proteus usage questions.
︎︎︎Learn More About Proteus
While working at Proteus I designed a Help Resources modal, which helps users find answers to all their Proteus usage questions.
The Problem
Proteus is a complex product and therefore our users require education in its basic usage. Being a new product with mechanical and software components, customers frequently request support or are in need of reference content. The burden of addressing numerous field issues and educating our customers is handled by our Customer Service, Human Performance, and Engineering teams, which create significant demands on their time.
(Above) Previously, Proteus relied on onboarding and how-to videos to provide answers to usage questions but there was no central location for reference materials in the software
The Challenge
Our goal for the project was to create a central location for all Proteus support and reference content, which can be accessed from any screen in the app or any page in the Proteus web experience. The content needs to be accesible to all users whether they are logged into a Proteus account or not.
The help resources modal will contain multiple tabs that help a user familiarize themselves with Proteus, learn how to use the machine, and learn how to reach out if additional assistance is needed.
The help resources modal will contain multiple tabs that help a user familiarize themselves with Proteus, learn how to use the machine, and learn how to reach out if additional assistance is needed.
High-Level Goals
For the Business
For Trainers
For Athletes
- Reduce time spent by Human Performance onboarding new customers
- Reduce time spent by Customer Success and Engineering addressing existing customer issues
For Trainers
- Increase understanding of how to use Proteus
- Enable better day to day outcomes while using Proteus
- Provide easy access to reference materials
- Increase confidence that Proteus Motion is able to address their service needs
For Athletes
- Provide easy access to reference materials
My Role
I led the design of this new feature, working closely with Proteus’ Director of Product Design for feedback. I worked alongside the Director of Software Engineering, the Head of Field Operations, and 1 Software Engineer.
I participated in the process from start to finish, from creating user flows and wireframes to designing pixel-perfect UI and assisting with visual QA.
I participated in the process from start to finish, from creating user flows and wireframes to designing pixel-perfect UI and assisting with visual QA.
(Above) User Flows for a logged in user and a user who is not logged in or has not created a Proteus account
Sketching Ideas
User Flows and the First Round of Wireframes
User Flows and the First Round of Wireframes
It’s important that the Help Resources feature is available to users whether logged in or out of Proteus, as new users often have questions before creating their account. Based on the project goals and requirements, I started by brainstorming ideas for user flows, taking both scenarios into account.
(Above) In the first round of wireframing I designed two different directions for the new Help Resources modal
Refining Wireframes
An Emphasis on Future Scalability
An Emphasis on Future Scalability
After establishing the initial user flows I designed a first round of wireframes, which included two different approaches for how we might organize the different help categories and topics and where we might surface the option to submit a support request. Direction A divides each help category into tabs, while Direction B is a long scroll that prioritizes the help topics at the top and provides additional context for each topic.
Although we only have a limited number of help categories and topics at the moment, we want this feature to be able to scale as we add more in the future. For this reason, we chose to move forward with Direction A.
Although we only have a limited number of help categories and topics at the moment, we want this feature to be able to scale as we add more in the future. For this reason, we chose to move forward with Direction A.
(Above) Refined wireframes for the new Help Resources modal
The Access Point
Navigating to the Modal
Navigating to the Modal
In order to ensure the Help Resources modal can be accessed from anywhere in the Proteus app or web experience, I designed an icon in the global nav that acts as the access point. The global nav appears on almost every screen of the Proteus app and almost every page of the Proteus web experience, with the exception of the Log In page and Training Mode flow.
In these exceptions the access point exists in the top right corner of the screen or page, in the same position it would in the global nav.
In these exceptions the access point exists in the top right corner of the screen or page, in the same position it would in the global nav.
(Above) Permutations of the global nav and access point icon. 1920x1080 kiosk size
(Above) Responsive web designs for the global nav and access point
(Above) The global nav is not present in Testing Mode or on the Login screen but the access point remains in the top right corner. Testing Mode did not undergo a redesign at this time. The login page was reskinned but the UX did not change at this time.
Visual Design
Designing Pixel-Perfect UI
Designing Pixel-Perfect UI
Working from Proteus’ evolving design system, I created visual designs from the wireframes. Proteus’ Director of Product Design defined the baseline of the new design system and it is constantly evolving as existing features are redesigned and new features are added to the software.
(Above) Visual designs for the Basic Operations tab of the Help Resources modal
(Above) Visual designs for the About Proteus and Get Support tabs
Responsive Designs
Designing for Large and Medium Breakpoints
Designing for Large and Medium Breakpoints
In order to ensure users can access Help Resources in the Proteus web experience, I created responsive designs for desktop, laptop, and tablet sizes. The Proteus web experience does not currently scale to mobile.
(Above) Responsive designs for the Help Resources modal.
Additional Project Credits
Will Gabrenya
Director of Product Design
Jason Shaev
Director of Software Engineering
Marin Varney
Head of Field Operations and Engineering
Director of Product Design
Jason Shaev
Director of Software Engineering
Marin Varney
Head of Field Operations and Engineering