The team framed an academic concept for a municipal employment-support context. The intended audience was young adults whose fear of failure, performance pressure, or low self-esteem could make work, study, and everyday goals harder to approach.
Design question
“How might a digital tool help someone build confidence through small, visible steps toward a goal?”
01
Evidence over empty encouragement
Research pointed toward showing what a person had already completed—not relying only on motivational language.
02
A route, not a vague ambition
Step-by-step plans and manageable challenges made difficult goals feel more concrete.
03
Support without social pressure
The qualitative interview cautioned against notifications and community features becoming another source of pressure.
28
survey responses
1
qualitative interview
Multiple
usability sessions
Methods used
Survey
Interview
How Might We
Sitemap
Crazy 8s
Clickable Figma prototype
02 / Build, test, refocus
One concept. Three distinct passes.
Keeping the phases separate makes the work—and the ownership—clear.
01
Nov—Dec 2025·Group work
Frame the problem
The team turned research into personal goals, supportive guides, inspiration, and a gamified challenge map inside a clickable mid-fidelity prototype.
02
December 2025·Follow-up course
Put the flow in front of people
The prototype was reused in a user-testing course. Multiple sessions exposed where the concept demanded too much attention or failed to explain what had happened.
March 2026·Individual work
Protect the idea, remove the noise
I rebuilt the key flows as a high-fidelity prototype, applied the municipal visual language, and made the challenge map—not the feature count—the center of the experience.
What testing changed
The strongest feature was buried inside the busiest interface.
The useful signal was not simply that the first prototype felt unfinished. Testing showed exactly what to keep and what to reconsider.
01
Too much cognitive energy
The text-heavy inspiration area lacked a clear purpose and competed with the core task.
02
Split attention
Two-column layouts made hierarchy unclear; one participant missed half of the challenge screen.
03
Missing system feedback
After creating a goal, no visible confirmation explained where it went or what to do next.
03 / Before and after
Keep the climb. Clear the path.
Three screens show how the same concept became quieter, clearer, and more deliberate.
01/From feature menu to next action
From feature menu to next action
The start screen stopped treating every function as equally important and instead made the active goal the visual anchor.
Removed the separate Boost / inspiration area
Made the active goal and continue action primary
Moved guides into a secondary, lower section
BeforeThe group prototype presented several competing destinations at once.
AfterThe revamp creates one primary path and makes guides secondary.
02/From split screen to guided route
From split screen to guided route
The goal summary and secondary create action moved above a full-width challenge map, so the page could be read in one direction.
Replaced competing columns with horizontal layers
Preserved the map and emphasized the active step
Added hover states and a confirmation toast
BeforeThe split layout made the challenge map easy to overlook.
AfterThe new hierarchy reads from goal context into the next active step.
03/From assignments to supportive guidance
From assignments to supportive guidance
Guides became an optional source of practical tips rather than another list of things the user had to complete.
Used imagery to preview each topic
Shifted the tone from instructions to suggestions
Added stronger structure, scroll cues, and a summary
BeforeThe first guide hub offered little visual context for each topic.
AfterThe updated hub uses imagery and supportive language to set expectations.
04 / Responsibility
A group foundation, then focused individual ownership.
The project demonstrates two different modes of design work without blending their contributions together.
Part 1 · Group
Research and mid-fidelity concept
I helped move the work forward, set up and share the Figma and presentation files, contributed to research and ideation, owned much of the gamification work, built desktop flows, and connected the final frames.
Part 2 · Individual
High-fidelity UI revamp
I translated testing findings into the new hierarchy, reusable components, interactions, visual system, accessibility review, prototype flow, report, and final presentation.
Accessibility review
Measured improvements—and one unresolved trade-off.
The redesign used a summative checklist for hierarchy, feedback, readability, and accessibility. Step labels and header icons were darkened, and interaction targets were considered from the start.
2.5:1
earlier step-label contrast
4.5:1
revised step-label contrast
24px+
planned icon size
05 / Outcome
A case study in editing, not adding.
The final result was a presentation-ready high-fidelity prototype with a desktop flow and a proposed mobile hierarchy. It was not shipped, and the March redesign was not re-tested with participants.
What this work demonstrates
Turning research and usability evidence into concrete interface decisions
Protecting a well-received interaction while removing weaker features
Working across collaborative discovery and independent execution