top of page

LEEG
Career OS

An end-to-end redesign that revealed one problem. Users couldn't understand what they were doing or why it mattered

A two-person UX team redesigning a career development app from the ground up — competitive analysis, usability testing across 11 participants, hi-fi prototype, and a full developer handoff.

Participants

11

Couldn't identify  Boost

100%

Couldn't connect actions to outcomes

82%

Found insights page overwhelming 

73%

Leeg Mockup 1.avif

What?

End-to-end redesign of Leeg, a career development app designed to help users build habits, track growth, and work toward meaningful career goals.

​Scope included redesigning the information architecture, building a hi-fi prototype in Figma, and producing a full developer handoff package.

For Who?

Early and mid-career professionals. Especially new graduates, newcomers to Canada, and career switchers who want structure and clarity without being overwhelmed.

My Role

UX/UI designer responsible for competitive analysis, heuristic audit, information architecture, usability testing (Round 1), hi-fi prototype, component library, and full developer handoff documentation.

What Leeg needs

A redesigned daily engagement flow that keeps users coming back consistently — with clear information architecture, an onboarding experience that sets the right expectations, and a handoff package that a development team can actually build from.

What users need

To understand what they're doing and why it matters. To feel like their daily actions connect to real career growth. To not be confused by terminology, navigation, or data that has no context attached to it.

THE SOLUTION

We redesigned four core areas after testing revealed users couldn't connect their actions to meaningful outcomes

Across 11 usability testing participants, the consistent finding was that users couldn't connect their actions to meaningful outcomes. They didn't understand what a Boost was, why their insights mattered, or how their reflections connected to their goals. Without clarity, tasks and progress felt arbitrary. This became the central problem we designed against.
 

DECISION 01 — NAVIGATION

We gave Goals its own dedicated tab after A/B testing showed users couldn't find it in the existing nav

Navigation was restructured to give Goals a dedicated tab in the bottom nav bar — five tabs total: Today, Boosts, Reflection, Goals, and Profile. Validated through A/B testing where participants responded positively to Goals having a clear, persistent location.

DECISION 02 — BOOST CONTENT

We restructured Boost content into four labeled sections so users knew what to read, respond to, and do

Boost content was restructured into four visually differentiated sections: Hook, Core, Do, and Takeaway. Users could now immediately understand what to read, respond to, and act on — removing the ambiguity that caused confusion in both testing rounds.

DECISION 03 — TERMINOLOGY

We added tooltip overlays for Boost, True North, Fading, and Evidence after 100% of participants flagged them as unclear

Boost, True North, Fading, and Evidence were all flagged as unclear across both testing rounds. Info icons were added next to key section headers triggering tooltip overlays with plain-language definitions — so users spend mental energy on their growth, not decoding the interface.

DECISION 04 — INSIGHTS PAGE

We simplified the insights page to lead with actionable metrics after 73% of participants found it overwhelming on first view

The insights page was simplified to lead with the most actionable metrics and reduce the number of competing tabs. Rather than presenting passive data, the redesigned system gave users clearer next steps tied to their actual growth patterns and goals.

How I did it

RESEARCH
Before touching the design, we audited the existing product and mapped what Leeg was competing against

We began with a kickoff meeting alongside the Leeg team — aligning on brand identity, product pillars, intended users, and existing pain points. They emphasized building a product that felt motivating and habit-forming without overwhelming users, and flagged challenges around retention, feature clarity, and engagement consistency.

COMPETITIVE ANALYSIS
We studied five apps with similar engagement models to identify what Leeg should adopt, avoid, and build differently

Focus: engagement loops, personalization, habit formation, data visualization. Five apps reviewed across four criteria. The Leeg Implication row is the most important — that's what each app taught us about what to build.

Duolingo

Habit loops, streaks, gamification

REFERENCE

Engagement hook

Streak is the primary re-engagement mechanism — losing it feels bad enough to prevent it. Daily XP goal creates a low-commitment daily anchor. Notifications are perfectly timed and personalized by learning pace.

Personalization

Content adapts to skill level and pace but the engagement layer (streaks, XP, leagues) is universal — same for everyone. Goal-specific personalization is limited to content, not the habit system itself.

Progress Visibility

XP, streaks, leagues, skill trees — multiple overlapping progress systems. Always shows how far you've come AND what's next. Never feels static.

What to Avoid

Gamification can feel trivializing — the hearts system creates anxiety not motivation. Leagues introduce unhealthy comparison. Progress can feel arbitrary if disconnected from real-world outcomes.

Leeg Implication

Streak + daily anchor is directly applicable. But Leeg needs goal-aware engagement — a user's streak should feel connected to their career path, not just "you opened the app."

Strava

Progress tracking, momentum visualization

REFERENCE

Engagement hook

Activity logging creates a visual history of effort — the feed shows your own progress over time, not just others'. Weekly summary pushes a personalized snapshot of what you accomplished.

Personalization

Goals are user-set (distance, pace, frequency) and the app tracks progress toward them specifically. Segments and PRs make progress feel competitive with your past self, not just others.

Progress Visibility

Training load, fitness/freshness charts, year-in-review — data feels empowering not overwhelming because it's tied to actions you took. You can always see the trend.

What to Avoid

Social feed can shift focus from personal progress to comparison. Data richness can overwhelm casual users who just want simple feedback.

Leeg Implication

Weekly summary model is strong for Leeg — a "here's what your reflections and boosts added up to this week" moment creates the compounding data payoff. Progress vs. your past self is exactly right for career growth.

Headspace

Daily engagement design, low-friction habit

REFERENCE

Engagement hook

Single clear daily action — "today's meditation" removes decision fatigue entirely. Home screen always answers "what should I do right now?" in one tap. Streaks are secondary to the action itself.

Personalization

Onboarding captures goal (stress, sleep, focus) and the home screen adapts content accordingly. The daily anchor feels relevant to what you said you needed, not generic.

Progress Visibility

Minimalist — streak, total minutes, mood check-ins. Doesn't overwhelm with data. Progress feels qualitative ("how are you feeling?") more than quantitative.

What to Avoid

Too much content variety can dilute the daily habit. If "today's recommendation" changes too often it loses the anchor feeling.

Leeg Implication

Leeg's home screen should follow this model — one clear "what to do right now" connected to the user's goal. The daily reflect prompt should feel as natural and low-friction as a meditation session.

Linkedin

What to avoid — static career profile

AVOID THIS

Engagement hook

Notifications are performative (profile views, post likes) not growth-oriented. Daily engagement is driven by social feed, not personal development. Returns feel optional not meaningful.

Personalization

Profile is manually updated — no compounding data, no behavioral insight. The "profile strength" meter nudges completion but doesn't connect to actual growth or goals.

Progress Visibility

Static. A profile updated in 2023 looks the same as one updated yesterday. No momentum, no trajectory, no sense of becoming.

What to Avoid

Vanity metrics (profile views, connection counts) over growth metrics. Manual data entry as the primary update mechanism. Career data owned by the platform, not the person.

Leeg Implication

Leeg's profile must feel alive and dynamic — not a form you fill out once. Every daily action should visibly move something on the profile. The opposite of LinkedIn is the design goal.

Notion/

Dayone

Journaling UX, data ownership, reflection design

REFERENCE

Engagement hook

Day One: streak + "on this day" memory surfacing creates emotional re-engagement. Notion: flexible but lacks built-in engagement hooks entirely — relies on user discipline.

Personalization

Day One surfaces past entries by date/location — context-aware memory. Notion is fully manual with no personalization. Neither adapts content based on goals.

Progress Visibility

Day One's yearly timeline and streak shows consistency over time. Notion has no built-in progress view — progress is invisible unless you build it yourself.

What to Avoid

Notion's blank canvas creates decision fatigue — too much flexibility kills habit formation. Open-ended journaling without prompts has high drop-off rates.

Leeg Implication

Leeg's reflection must be prompted and structured, not open-ended. Day One's "on this day" memory mechanic is powerful — Leeg could surface "a month ago you said X, here's how you've grown since."

Key insights for Leeg

1

The best habit apps have one clear daily anchor

Duolingo has the streak lesson, Headspace has today's meditation. Leeg needs one too — the daily reflect prompt should be that anchor.

2

Gamification works when it's tied to real progres

Strava's PRs and Duolingo's skill trees feel earned. Leeg's streaks need to connect visibly to career goal progress — not just app opens.

3

The engagement layer needs to be goal-aware

None of these apps fully solve personalized engagement per goal — this is Leeg's design opportunity. Different users' daily prompts should feel different based on their career track.

4

Progress vs. your past self beats comparison

Strava's PRs, Day One's memories — competing with who you were last month is more motivating and less toxic than competing with others.

5

LinkedIn is the cautionary tale

Static profile, vanity metrics, platform-owned data — Leeg is the anti-LinkedIn. Every design decision should ask: does this make the user feel like they're growing, or just performing?

HEURISTIC AUDIT
I audited the existing Leeg app on TestFlight and found 8 issues across 3 screens — 4 of them major blockers before testing even began

I audited the existing Leeg app on TestFlight across Registration, Onboarding, and the Dashboard using Nielsen's 10 heuristics. Every finding was rated Critical, Major, or Minor with a specific design opportunity attached.

Total findings

8

Major issues

4

Minor issues

3

Positive finding

1

Screens audited

3

THEME 01
Feedback moments feel like broken UI

Finding 2

AI Response card reads as an empty input field

H1 + H8 — Visibility of system status · Aesthetic design

MAJOR

After selecting a career stage, the app displays a gray card with a short response. Significant empty space below the text with no visual treatment — it reads as an unfilled text input, not a coaching reply.

Design opportunity

Add a Leeg avatar or left border accent, reduce card height to match content, use a speech-bubble container. The card should feel like a warm response from a coach — not a broken form field.

Finding 3

Typewriter animation removes control over reading pace

H3 + H7 — User control · Flexibility and efficiency

MAJOR

AI response text animates in character by character. Fast readers are forced to wait. Users who want to re-read cannot skim ahead. Animation adds time friction at the highest drop-off point in the flow.

Design opportunity

Display the full response text immediately on load. Onboarding drop-off is highest in the first few screens — any added friction increases abandonment before the user reaches the app.

THEME 02
Consistency gap in onboarding

Finding 4

Two different selection patterns in the same flow

H4 — Consistency and standards

MAJOR

Q4 ("What matters most to you at work?") uses a square card grid. Q5 ("What are your superpowers?") uses a vertical radio button list. No reason for the difference — creates a jarring experience within the same onboarding wave.

Design opportunity

Standardize on the square card grid — it matches the brand logo, is more engaging, and is more scannable. Consistency in interaction patterns builds trust and reduces cognitive load.

Finding 3

Typewriter animation removes control over reading pace

H8 — Aesthetic and minimalist design

POSITIVE

The square card selection pattern on Q4 mirrors the Leeg logo mark, creating visual brand cohesion. Orange selected state is clear and satisfying. Grid layout is scannable with appropriately large tap targets for mobile.

Design opportunity

Extend this pattern consistently across all selection interactions in onboarding. This is worth preserving — it is the visual language of Leeg.

THEME 03
Dashboard lacks personalization and momentum signals

Finding 1

Value proposition too narrow — implies leadership app only

H2 — Match between system and real world

MINOR

"Lead with clarity" as the hero headline implies Leeg is a leadership app specifically. A new user with non-leadership goals (creative direction, career change) may feel the app is not for them before they even sign up.

Design opportunity

Replace with a headline that captures the broader career OS vision — "Own your career growth" or "Your career, on your terms" better reflects the product and reduces sign-up drop-off.

Client response

Leeg updated the splash screen within one week of this audit — "Lead with clarity" replaced with "Welcome to career clarity" and the subhead broadened to include all career types.

Finding 6

No streak, no goal context — dashboard doesn't make the user feel seen

H1 + H2 — Visibility of system status · Match between system and real world

MAJOR

The hero card shows a generic daily insight quote with no connection to the user's goals or recent activity. No streak counter visible. No immediate sense of momentum, progress, or what specifically to do next.

Design opportunity

The dashboard is the app's daily habit trigger. The hero card should surface personalized, goal-connected content — one clear CTA tied to the user's goal, plus a visible streak counter. This is the core of the engagement problem.

Finding 7

Visual hierarchy flat — no single dominant action to anchor the user

H6 + H8 — Recognition rather than recall · Aesthetic design

MINOR

Four sections visible on first load, all with similar visual weight. No clear starting point. Compared to Duolingo and Headspace — which have one dominant anchor action — Leeg's home screen asks users to choose where to look.

Design opportunity

Establish one dominant hero action — streak + daily reflect prompt as the largest element. Secondary actions (Goals, Boosts) sit below. Collections could move to another tab entirely. Every element that competes for attention risks no action being taken.

Finding 8

Progress percentages lack context or meaning

H9 + H1 — Error recognition · Visibility of system status

MINOR

Daily Essentials shows circular progress indicators: Journal (60%), Goals (30%), Leadership (40%). It is unclear what these percentages represent. Without context, numbers are meaningless and may cause confusion or anxiety.

Design opportunity

Add a brief label explaining what each percentage measures — "Today's activity" or "Profile complete." Data should feel empowering, not evaluative. Unexplained numbers risk making users feel behind without knowing why.

DESIGN STRATEGY
Leeg provided two ICPs at kickoff — we kept them as a reference throughout every design decision

Leeg provided two Ideal Customer Profiles at kickoff, built from their early traction data — strong representation among women, newcomers to Canada, and new graduates. These became a consistent reference throughout the project.

The Ambitious Builder

Ages 18–35 · Early to Mid Career

Goal: Build a purposeful career path

▸Ambitious and learning-focused, investing in skills before anyone asks them to

▸Tech-savvy and hybrid/remote native, expecting polished, app-first experiences

▸Wants feedback, growth, and flexibility — craves visible progress

▸Needs structure and prompts to start building consistent habits

Design tension: Engagement vs. overwhelm. Gamification that motivates, not trivializes.

The Recalibrater

Ages 30–45 · Mid Career

Goal: Redefine success on their own terms

▸Values-driven, seeking balance rather than just advancement

▸Invested in their work and seeking meaningful, not performative, growth

▸Collaborative and often carrying caregiving responsibilities alongside career

▸Can sense their desired direction but needs clarity and language for it

Design tension: Clarity vs. complexity. Insight that reveals without overwhelm.

A gap I identified:

Neither ICP accounted for users with divergent career track goals. An Ambitious Builder pursuing a creative career has fundamentally different needs than one pursuing a leadership track. (different language, different success metrics, different content.) I flagged this as a recommendation: expand the ICP framework to capture career track, not just career stage.

USER FLOWS

We mapped the full user journey before wireframing to make sure every flow connected to a user goal

WIREFRAMES
We started with lo-fi wireframes to establish flow structure and fix navigation problems before applying any visual design

Early explorations focused heavily on onboarding and the daily engagement experience — the areas most critical to user retention and habit formation. We prioritized simplicity, motivation, and clarity: reducing friction while making daily tasks feel rewarding and purposeful.

Six screens established the core structure before any visual design was applied

AI response coaching, onboarding data summary, "Today" main dashboard, Boosts, Reflection, and a consolidated Insights/Me page."

HIGH FIDELITY WIREFRAMES
We built a fully documented hi-fi prototype in Figma, updating the component library after every round of testing

We transitioned into hi-fi designs using Leeg's existing visual identity and brand assets. All components were built in Figma with exact measurements, states, and properties documented using the Specs Classic plugin. We maintained a living component library throughout, updating specs as decisions evolved through testing. We met with the Leeg team twice a week to present updates, gather feedback, and iterate.

VERSION 1
5 screens

Flow

Onboarding Q4 → Wave 1 complete → Today (4-tab) → Reflection → Boost Takeaway

VERSION 2
6 screens

Flow:

Wave 1 complete (refined) → Today (5-tab nav with streak card) → Reflection (with subtitle) → Boost (with subtitle) → Goals tab → Insights/Me page

USABILITY TESTING
Across two independent rounds of testing, every participant struggled with the same thing — they couldn't understand what they were doing or why it mattered

I conducted Round 1 with 5 participants across early and mid-career profiles. My partner conducted Round 2 independently with 6 participants including career switchers. Both rounds were synthesized into a single report — issues appearing in both rounds carried the strongest signal.

Participants

11

Couldn't Identify Boost

100%

Couldn't connect actions to outcomes

82%

Found insights page overwhelming 

73%

Task

Onboarding flow

Daily engagement / Boost

Goal setting

Career profile insights

A/B layout testing

Round 1 — 5 participants

✓ 100% Completed

✗ 100% needed explanation of what a Boost was

✓ Highest motivation ratings — checklist felt natural

✗ 73% overwhelmed — True North, Fading, Evidence all unclear

✓  5-button nav preferred — Add Goals tab/ Insights consolidated into Me page

Round 2 — 6 participants

✓ 100% completed — lowest friction task

✗ 100% needed explanation of what a Boost was

✓ Highest motivation ratings — checklist felt natural

✗ 73% overwhelmed — True North, Fading, Evidence all unclea

✓ Dashboard Variant B preferred — cleaner, less redundant

"It feels like it's not clear what I'm supposed to do in the boost."

— Mid-career participant, Round 2

Once I clicked into it I understood, but the titles themselves don't give a lot of information"

—  early-career participant, Round 2

Refined

Charge review screen expanded to show two stacked charge cards for more context.

ITERATIONS
What i changed

ITERATION 01 - NAVIGATION

We restructured the bottom nav from 4 tabs to 5 and removed redundant icon buttons after A/B testing confirmed both changes reduced confusion

today.png
today.png

✗ Goals buried inside Profile — no dedicated tab
✗ Icon buttons for Boosts, Goals, Reflection redundant with nav tabs and Today cards
✗ Users unsure where to find goal progress

✓ Goals gets its own dedicated tab — 5-tab nav
✓ Redundant icon buttons removed — cleaner, less cognitive load
✓ Both changes validated through A/B testing

Insight

A/B testing revealed two things: users couldn't locate their goals without a dedicated tab, and the icon buttons for Boosts, Goals, and Reflection were redundant — those features already had cards on the Today page and their own tabs in the nav. Removing the buttons reduced clutter and the added Goals tab gave users a clear, persistent home for their progress.

ITERATION 02 - BOOST CONTENT STRUCTURE

We added a single line of context to the Boost entry point after 100% of participants couldn't engage without an explanation

boost.png
boosts.png

✗ No context for what a Boost is before entering
✗ Users arrived at Hook/Core/Do/Takeaway without understanding the purpose

✓ Subtitle added — "A quick, focused lesson to help you build one skill at a time"
✓ Users now understand what they're doing before engaging with the content

Insight

Even with Hook, Core, Do, and Takeaway already color coded and visually differentiated, 100% of participants still needed the Boost explained before they could engage. The fix wasn't restructuring the content — it was adding a single line of context at the entry point. One sentence changed how users approached everything below it.

ITERATION 03 - TERMINOLOGY EXPLAINERS

We added plain-language tooltip overlays after Boost, True North, Fading, and Evidence were flagged as unclear in both testing rounds

today.png
today.png
explainer leeg.png

✗ "True North" — no participant could explain it
✗ "Fading" and "Evidence" equally unclear

✓ Plain-language definitions on first encounter
✓ Tooltips triggered by info icon tap

Insight

Boost, True North, Fading, and Evidence were flagged as unclear across both rounds. Info icons were added next to every key term triggering tooltip overlays with plain-language definitions — so users spend mental energy on their growth, not decoding the interface.

ITERATION 04 - INSIGHTS PAGE

We redesigned the insights page to surface actionable metrics first after 73% of participants found it overwhelming on first view

insiights 2.png
insights 3.png

✗ 73% found it overwhelming on first view
✗ Metrics unexplained — no "so what" context

✓ Most actionable metrics lead the page
✓ Fewer competing tabs, clearer hierarchy

Insight

73% of participants found the insights page overwhelming on first view. The layout was simplified to lead with the most actionable metrics — giving users clearer next steps tied to their actual growth patterns rather than presenting every data point at once.

DEVELOPER HANDOFF
We prepared five handoff documents so the development team could build from the prototype without needing additional design interpretation

The final handoff consisted of five documents plus the Figma spec sheet. A beautiful prototype means nothing if the developer can't build it — this documentation was as much a design deliverable as the prototype itself.

01

 Figma Spec Sheet

Every component documented with exact dimensions, color values, spacing, and all interactive states using Specs Classic. Built to be handed directly to a developer without requiring additional design interpretation.

02

Design System & Style Guide

12 color tokens, 9 Montserrat typography styles with confirmed letter spacing, 9 spacing tokens, and exact specs for every component.

03

 Development Integration Guide

6 flows covered screen by screen. Conditional logic for all behavioral rules. 9 edge case scenarios. Full component spec table.

04

Design Principles

7 principles — including habit-first design, goal-aware personalization, and mirror not monitor — so future decisions stay consistent with the design intent.

05

Future Roadmap

3 phases: 12 critical pre-launch fixes, 11 V1 enhancements, 12 V2 features — all grounded in findings from both testing rounds.

06

Training Video Script

A full walkthrough script orienting the client team to each document in the handoff package and how to use it going forward.

image.png

Link to handoff:

Click here!

REFLECTION
"The most impactful changes weren't additive,
They were clarifying"

This project reinforced that users don't need more features — they need to understand the ones in front of them. The most impactful changes we made weren't additive. They were clarifying. Adding a tooltip, renaming a label, restructuring a content hierarchy — these small decisions had an outsized effect on whether users felt confident or confused.

​

Managing a real client relationship was also a significant learning. Presenting design decisions with clear rationale, responding to feedback professionally, and delivering a handoff package that a dev team could actually build from — these are skills that don't develop in solo projects.

​

"Once I clicked into it I understood, but the titles themselves don't give a lot of information."

That one quote summarizes the entire design problem. The app had the right ideas — users just couldn't find them.

​

If I were to take this further
Expand the ICP framework to capture career track as a variable — creative vs. leadership track users have fundamentally different needs. Add A/B testing on boost content framing to validate whether track-specific language improves comprehension and daily engagement rates.

Want to see the full prototype?

The full interactive Figma prototype is available — or let's connect and talk through the process.

bottom of page