Coaching Program Configurator
An enterprise application for internal admins to create and manage custom health and wellness coaching programs.
The Challenge
As Rally continues to offer new health and wellness coaching programs, the complexity and level of content customization requires configuration tools that are scalable and sustainable. Our goal was to create a web application that will help our product and content teams build and manage these coaching programs efficiently and effectively for the long run.
Initial brainstorm and early ideas sketched out on paper
My Role and Process
As the interaction design lead for this project, I led the end-to-end design process. I created sketches and user flow diagrams, led brainstorming sessions with design and engineering, and created wireframes and high-fidelity mockups, while iterating on a living component library.
1
Research
Met with stakeholders to define the scope and investigated similar products to identify patterns in information architecture and common user flows.
2
Ideation
Held ongoing design team brainstorming sessions to ideate through the design of program components and app layout.
3
User flows
Based on initial brainstorming, I mapped out configuration user flows through collaboration with product, design, and engineering.
4
Wireframes
I created low-fidelity wireframes illustrating main page layouts which helped facilitate discussion about the app experience from a high level.
5
High-fidelity mockups
I created high-fidelity designs in Sketch and a living prototype in InVision. I presented my work to a team of 40+ stakeholders. Then, I iterated on additional features.
6
New feature iteration
I continued to work with product and engineering on upcoming features for the v1.5 and v2 release.
Design team Jamboard session where we ideated through various configuration flows
One of the tool’s main user flows mapping out the cycles of versioning through build environments
Early to mid wireframe designs
Solution
Within 14 months, the Coaching Program Configurator was built and in the hands of our internal admins. Some of the key design decisions that made this app successful included:
Filter & search
Filters and searchable tables were crucial design elements that allowed our admins to easily scan and search by varying sets of metadata.
Filter & search
Filters and searchable tables were crucial design elements that allowed our admins to easily scan and search by varying sets of metadata.
Drag-and-drop
Being able to seamlessly drag-and-drop program components allowed for efficiency and flexibility throughout the track and course creation processes.
Wizards for guidance
Creating a program requires many nested actions. A wizard was a major element that helped guide the admin throughout the process by breaking up tasks into manageable chunks.
Wizard for guidance
Creating a program requires many nested actions. A wizard was a major element that helped guide the admin throughout the process by breaking up tasks into manageable chunks.
Notifications & alerts
Banners, toasters, and pop-ups were essential elements that inform or warn users about the status of their program progress and ask for an action to be taken when necessary.
Lessons Learned
- The earlier the better - Deep diving into low-fidelity wireframes and architecture with FE and BE engineering as early in the process as possible will help avoid friction down the road.
- Ongoing collaboration with engineering - Often times, the simple action of pulling up a chair to sit down with an engineer and look at code together made all the difference and cut down digital communication time.
- Meet in the middle - When it’s crunch time and pressure is high, your non-designer team members may push to just get something built, pushing back on that little icon you wanted in your button. Strive for a design that meets in the middle and don’t forget to write up a friendly post-MVP ticket for the backlog.
