Building a connectivity platform end-to-end — from discovery to a working design system
Building a career exploration platform from the ground up
Choosing a career path can feel overwhelming, especially when students have limited exposure to real-world opportunities. The challenge was to create a digital platform that could connect educators, students and employers through a shared ecosystem of guidance, resources and opportunities.
We led the full product process: from discovery and research to final design, design system and clickable prototype. Two stages, twelve workstreams, and a final outcome that the team could maintain and grow on their own.
(Under NDA)
Research direction
(Volunteer side)
Experience Design
Wireframes · & flow design
Benchmark · Heuristic analysis · Iterative validation
Google Forms
From vision to a scalable product
The client envisioned more than a collection of tools. They wanted an ecosystem that could support educators, students and young professionals throughout different stages of their journey. Most career guidance platforms provide answers but little direction: a test result, a list of careers, an endless database to browse. Our challenge was to rethink that model and design an experience that could guide users forward while providing the foundations needed for long-term growth.
Our role was to lead the full Product process: understand the existing solution, redesign the experience flow by flow, propose a new brand direction, build a design system, and ship a prototype the team could maintain and grow.
The work spanned two stages: Understanding & Discovery, and then Ideation & Design. Twelve workstreams in total — each one a small artifact the client team could open, edit and use.
Two stages — understand first, design second
Understanding & Discovery
Immersion, alignment, roadmap, benchmark, student workshop, analysis of the preliminary solution, and a complete research plan with interview script.
Ideation & Design
Three visual proposals, brand identity workshop, moodboards, final solution flow-by-flow, design system, flow maps and a clickable prototype.
Understanding & Discovery
Starting from what the client already knew
The project started with an in-depth review of the information and research provided by the client. This initial immersion helped us understand the context, identify key challenges, and define the problem we would address moving forward.
Reviewing the client’s existing research and documentation.
Aligning vision, goals and constraints with the client’s team
We held a series of discovery and alignment sessions at the beginning of the project. The client walked us through their vision, shared their existing insights, and introduced their current solution.
This phase let us gain a deep understanding of the project goals and constraints, properly scope the work, and fully understand the problem we were designing for.
A visual timeline to track milestones
We followed the roadmap proposed, translating it into a clear visual timeline. This let us closely track progress and stay fully aligned with the defined milestones and deadlines throughout the project.
Visual roadmap — milestones and deadlines tracked end to end.
Looking outside before designing inside
We conducted a benchmark analysis across competitors, similar platforms, and solutions from other industries. This included reviewing existing products and approaches, as well as analyzing comparable user flows such as assessments, sign-in experiences and information access portals.
This research helped us identify patterns, best practices and opportunities relevant to the solution we were building.
Benchmark board — competitors, adjacent platforms and patterns from other industries.
Understanding the problem space from the user’s side
As part of the Understanding & Discovery phase, we designed a workshop with the target users to gain a deeper understanding of the problem from their perspective. The workshop was structured around three key axes:
Immersion & Perceptions
Exploring what choosing a career means to participants — including their feelings, motivations, frustrations and expectations.
Tools and Support
Understanding how users currently approach this challenge, what tools and platforms they use, the role of family and mentors, and what information or support they feel is missing.
Playful Ideation
Inviting participants to imagine ideal solutions and features, and gathering direct feedback on a proposed platform solution through comments, sketches and annotations.
This workshop allowed us to validate assumptions, uncover unmet needs and collect early feedback to inform future design decisions.
Workshop — board structured around three axes, run with students in person.
Reducing uncertainty before committing to design
We used Figma Make as an exploratory and ideation tool. It let us quickly prototype ideas, test different approaches and iterate back and forth on the solution before moving into the design.
Rather than creating the final product, this phase helped us shape and validate the core experience, align on direction and reduce uncertainty early on. Once the solution was defined, we transitioned into Figma to continue with the final design.
A heuristic look at what already existed
We performed an in-depth analysis of the preliminary solution through heuristic evaluation, flow analysis and consistency checks.
This process surfaced key issues and opportunities — all captured in detailed documentation to guide the evolution of the solution.
Heuristic analysis — surfacing issues and opportunities.
Findings consolidated, flow by flow
We consolidated the previous findings into structured documentation covering each flow included in the MVP. This documentation compiled the full analysis and served as a shared reference for team discussions.
Together with the team, we reviewed and discussed these insights to define changes to the preliminary solution and support the creation of the final solution documentation.
A research plan to align on what we needed to learn
Before creating the interview script, we developed a research plan to define the foundation of the study. The document outlines the purpose of the research, the context of the project and the key questions we want to answer. It clarifies what we need to learn from teachers and ensures the research is aligned with both user needs and project goals.
By defining background, research objectives and methodology, the plan acts as a guide for the interviews — ensuring the conversation is focused and the insights identify opportunities to improve the Teacher Book and better support teachers in their daily work.
A script that guides without scripting
With the plan in place, we created an interview script to guide the conversation with teachers. The document structures the interview into different sections and includes the key questions and topics we want to explore, aligned with the research objectives.
It ensures every interview covers the most relevant areas while still allowing space for teachers to share their experiences naturally. The script also defines estimated timing and the mindset for the conversation — focusing on understanding real behaviors rather than abstract opinions.
Interview script — structured, conversational, focused on behaviors.
Ideation & Design
Three distinct aesthetics, each anchored in a keyword
Before running an internal workshop, we explored three distinct visual proposals. Each was grounded in a different inspiring concept or keyword, intentionally chosen to evoke clearly differentiated moods and aesthetics. From these concepts, we developed three unique visual identities — one more joyful, another playful and colorful, and so on — allowing us to explore a range of possible visual directions.
This early exploration helped us understand which aesthetics resonated most, before diving deeper into the brand identity through the collaborative workshop process.
Proposal One.
Proposal Two.
Proposal Three.
Imagining the brand as a person
We facilitated an internal workshop to explore and define the foundations of the new brand behind the product. The session focused on imagining the brand as a person — how it would look, speak and behave — by exploring personality traits, tone of voice, values and visual and conceptual references.
Through this collaborative exercise we began shaping the brand’s direction, resulting in three distinct brand identity proposals to move forward into a final definition with the team.
Brand identity workshop board.
Three brand directions, each with its own world
The three moodboards were built from shared discussions and insights, exploring different potential brand personalities. Each direction was then used to define the brand’s core elements — positioning, central concept, brand personality, and voice and tone.
Three brand directions — Trusted cool mentor, Cosmos fantasy and AI inspiration.
Translating documentation into design, flow by flow
We then moved forward with the final solution. At this stage, we translated all the documentation and insights gathered from previous conversations into concrete design decisions for each screen and flow. Working closely with the team, we progressed flow by flow, defining the solution step by step.
The work focused on redesigning certain sections, refining others, and applying changes based on user experience improvements. The result was a cohesive prototype designed to deliver the best possible end-to-end experience.
A workflow that made iteration the default
Throughout this phase, we worked collaboratively to refine the designs through continuous feedback and iteration. Product Owners left comments directly in Figma, which we addressed by implementing design updates. These comments often sparked follow-up conversations that helped clarify decisions and align perspectives.
To support this process, we used a shared Excel tracker to manage design statuses, move items through review stages and flag updates for new iterations. This workflow allowed us to iterate efficiently on the prototype, ensuring the final solution was not only polished, but truly co-created by the entire team.
A scalable, consistent system the team could maintain
Once the final solution was defined, we created the design system. The goal was to translate all design decisions into a scalable, consistent and reusable system that could support the product’s growth over time.
Components
We defined the key components ensuring consistency across screens and flows — aligning visual language, interaction patterns and usage rules, while also improving efficiency and collaboration between design and development.
Foundations
We also defined the foundational elements that support all visual and interaction decisions across the platform — color palette, typography, spacing and radius rules. A shared baseline that ensures consistency, clarity and scalability throughout the product.
Design system — foundations.
User journeys, end to end
In parallel, we created final flow maps with final screens based on the approved solution. Flow maps helped us visualize complete user journeys end to end, ensuring all screens were designed, properly connected and aligned with the intended experience.
They also let us identify gaps and confirm no key steps were missing before moving into prototyping and development.
Flow maps — final screens connected into complete journeys.
A clickable prototype, navigable end to end
The next step was creating an interactive, clickable and navigable prototype. It was developed once all screens were finalized and updated with the latest design decisions.
The interactive prototype let us experience the product as a real user would — navigating through flows and interactions end to end. It helped validate the overall user experience, identify potential friction points and ensure interactions felt clear and intuitive.
Clickable prototype — navigable end to end.
What I’d carry into the next one
Learning
Designing the product was only part of the challenge. Equally important was designing the conditions for the product to evolve. By documenting decisions, creating shared frameworks and building a flexible system, we enabled the team to continue learning and growing the platform independently.