Team Nutrition B2B SaaS Onboarding

UX-driven design for Dossier’s onboarding, guiding the UI team to completion.

Overview
Team Nutrition, offering private consultations through dietitians, aimed to enhance the user experience of their "Dossier" platform by creating an onboarding process. 
The project focused on UX research, identifying key features, and addressing pain points, which were then translated into informed UI designs.
My role
As the UX Lead designer, I collaborated remotely with the CEO, focusing primarily on:
• UX research & strategy.
• UI design (Low-fi and Mid-fi).
Users
The primary users of Dossier are nutrition professionals in Canada, particularly in Quebec. We focused on two main groups:
•Internal users from Team Nutrition.
•External users (nutritionists and dietitians).
Scope
The scope was established as a first time user onboarding, supported by a research-driven framework and mid-fi prototype. 
This served as a guide for the UI and development teams to ensure alignment in the final design implementation.

Methodology: A non linear design process.
1. Research
UX audit, Value proposition analysis, Best practices, Task flow, User interviews ,Onboarding flows.​​​​​​​
2. UI Design
Mid-fi prototype​​​​​​​

UX Design process

UX AUDIT
Initial explorations: Uncovering opportunities for improvement.
Through a detailed exploration of the platform, I identified key functionalities and areas for enhancement. Applying UX principles, I proposed over 30 improvements to streamline onboarding and reduce confusion. These suggestions formed a comprehensive UX audit, complete with prioritized recommendations to guide stakeholder decisions. 
Key insights:
1. KoalaPro App activation: Clarify the app activation process for users. This was critical as the premium version drives revenue, making clear activation essential for business objectives.
2. Side navigation update: Add KoalaPro App, Feedback with CTA, and Help Center to the navigation menu.
VALUE PROPOSITION
Understanding Dossier’s value proposition.
I began by reviewing a video presentation from Team Nutrition's CEO, which introduced both Dossier and its accompanying app, KoalaPro. To dive deeper into the material, I selected key slides containing the most relevant information and conducted an in-depth analysis.

Dossier's value proposition analysis.

To organize my findings, I used color-coded post-its:
•Yellow for the CEO's direct explanations.
•Blue for AI-refined copy.

"This systematic approach allowed me to understand both the formal and informal aspects of Dossier's value proposition and its key benefits."

Additionally, this analysis helped generate ideas for marketing copy that can be used during onboarding, while supporting a Time to Value approach.
TASK FLOW
Mapping the user journey for alignment and clarity.
After exploring the platform, I created a task flow to map the user journey. Collaborating with the CEO, we aligned on key steps for a nutritional evaluation, identified pain points, and prioritized design elements. Key actions were highlighted for clarity.
•KoalaPro Invite: Allows users to invite clients to the KoalaPro app and track their activation status for data sharing.
•PES Suggestions: Offers automatic recommendations for Problem, Etiology, and Signs/Symptoms during the diagnostic process.
•Adding Recommendations to Action Plan: Enables users to incorporate suggested diagnoses   and recommendations into the client's personalized action plan.
USER INTERVIEWS
Validating assumptions and uncovering new valuable insights.
I conducted 2 remote, semi-structured interviews with active nutritionist users: one internal Team Nutrition professional and one external nutritionist. Each 45-minute interview (one in English, one in French) was recorded, analyzed, and integrated into the document with video links. The interview framework included: 
•Intro • Demographics • Motivations • Walkthrough scenario • Pain points • What works best • Imagination • Conclusion.
Key findings:
•PES recommendations often missed: Highly valued but often missed during consultations due to time constraints.
    Recommendation: Add a step-by-step PES guide in onboarding.
•KoalaPro activation unclear: Users are unclear about the activation process on the app side.
    Recommendation: Create a step-by-step modal with clear instructions and app visuals.
•Notes page overlooked: Users were unaware of its role as a customizable summary.
    Recommendation: Rename the page, add direct access in follow-up navigation, and explain with a tooltip in onboarding.
ONBOARDING FLOWS
Defining a clear process by combining tasks, features, and UI patterns.
I combined research findings with our task flow and created a visual board to draft the onboarding design. By breaking it into five key areas, I used a checklist approach to simplify the process. Through prototyping and feedback, I merged the Follow Up and Notes flows, reducing them from five to four for a more efficient experience. The initial flows included:
1. Main Navigation
2. KoalaPro App Invite
3. Nutritional Evaluation
4. Follow Up
5. Notes (later merged with Follow Up)
"This approach made it easy to explain and iterate quickly, turning an abstract process into a clear and actionable plan."

Dossiers Onboarding flow

TIME TO VALUE 
Helping users understand the platform's value right away.
The Time to Value flow helps new users quickly grasp key features and benefits in two steps:
•Highlights key features: PES recommendations and KoalaPro integration, increasing productivity.
Introduces the onboarding process: Shows how the checklist makes their job easier and more efficient.
CHECKLIST 
Making onboarding easier with a clear, step-by-step guide.
I introduced a checklist in the onboarding process to break down tasks into simple, manageable steps. "This gives users a clear path, reducing cognitive load and helping them understand key features more easily" (Appcues).
Why I chose this approach:
•Clarity: Breaks onboarding into smaller, easy-to-follow tasks.
•Efficiency: Helps users see what needs to be done quickly, saving time and reducing confusion.
Progress: Encourages users by showing their progress step by step.
1. Step by Step onboarding guide
Visual checklist indicating the remaining steps in the onboarding process to keep users informed and engaged.
2. Checklist progress indicator
Displays progress percentage and incomplete tasks with a floating button, using red to indicate actions needing attention.
FLOW 1: MAIN NAVIGATION
Starting with the basics: highlighting the KoalaPro app and feedback gathering.
I improved the side navigation by rearranging links following UX best practices, adding the KoalaPro app, "Give Feedback" CTA, and Help Center to improve accessibility and interaction.
A priority was given to ensuring access to the KoalaPro app to align with business objectives, while feedback was emphasized as it's essential in shaping these early versions.
Tooltips were included for the KoalaPro app, "Give Feedback" CTA, and other key actions:
•Adding a new client
•Starting a nutritional evaluation
•Checking KoalaPro status
•Accessing the KoalaPro app
•Connecting the Keenoa tracker
•Submitting feedback
•Using the Help Center
Each tooltip included concise copy to clarify the value and functionality of each feature.

You may also like

Back to Top