We unpacked the given problem statement through collaborative framing and visual mapping, outlining the steps, actors, and benefits involved in campus switching. This clarified the opportunity space and guided later concept decisions beyond a single use case.

We reviewed the structure of the myCampus “My Registrations” page and observed that credits were listed per module but never aggregated. This clarified the core problem and framed the opportunity for a reliable ECTS overview within the existing student workflow.

I extracted key evaluation patterns from UX industry articles to understand how hiring teams scan applicant portfolios. The resulting criteria matrix reduced guesswork and established strict scannability rules for the final information architecture.

We extracted key steps, roles, and decision points from HSLU’s documentation on disadvantage compensation. The result was a structured starting model that guided our research questions and later comparisons.

We interviewed key stakeholders involved in disadvantage compensation to understand goals, constraints, and pain points. These perspectives revealed where expectations break down between roles.

We clustered interview findings into patterns across stakeholder groups, separating isolated issues from recurring ones. This created a shared language for the main breakdowns in disadvantage compensation.

Instead of jumping straight to solutions, AEIOU pushed us to document the process context in a balanced way. It improved alignment in interviews and made synthesis more systematic.

Empathy maps translated interviews into easy-to-share snapshots for decision-makers. They supported discussions about where support, clarity, and responsibility need to improve.

We translated early insights into a clear design challenge that framed campus switching as one recurring task across roles and transport modes. This focus aligned the team on scope, priorities, and success criteria for the first MVP.

I mapped the specific needs and frustrations of recruiters and design leads onto a structured canvas. This exercise translated abstract user goals into potential feature requirements, such as the standardized case study headers.

I broke down the main portfolio objective into three targeted design questions focusing on recruiters, hiring managers, and peers. This explicit framing shifted my focus from showcasing visual output to actively solving distinct stakeholder evaluation needs.

We created proto personas and mapped their locations to walk through campus switching scenarios from different perspectives. This helped reveal overlaps, constraints, and coordination needs that informed the concept at a structural level.

I created three distinct personas representing a recruiter, a hiring manager, and a peer designer. This clarified their differing time constraints, directly guiding the portfolio's dual-layered approach of fast scanning versus deep exploration.

We outlined the user journey from first awareness to implementation of disadvantage compensation measures. This highlighted key touchpoints where confusion, delays, or uncertainty were most likely.

We mapped activities and tasks for campus switching into a user story map covering both rider and driver roles. This clarified dependencies and ensured the concept addressed all necessary steps without designing isolated features.

Department-level flowcharts documented how disadvantage compensation actually moves through people and systems. The maps helped pinpoint responsibility gaps and friction points that weren’t obvious in official guidance.

We translated activities and tasks into a detailed user flow diagram covering decisions, states, and alternative paths. This made the full journey explicit and guided screen grouping, popups, and interaction logic.

I hand-sketched multiple layout concepts for the Workflow Atlas, pairing a chronological timeline with an impression gallery. This visual exploration clarified the core interaction model and structured how methods connect to real project evidence.

We explored possible UI components such as an ECTS total card, semester progress bars, quick links, and contextual panels to structure the dashboard. This helped identify a compact set of modules that surface the most relevant planning information directly on the registration page.

We sketched individually to propose different ways users could enter the app and start a campus switch. Comparing sketches surfaced assumptions early and helped us converge on a shared direction before detailing screens.

I built an interactive D3 code prototype using a structured dataset of my actual project methods. This early technical validation proved the timeline concept worked with real data distributions before committing to final designs.

We built an interactive mid-fidelity prototype based on the user flow, including conditional states and realistic transitions. This allowed us to test whether roles, steps, and key states were understandable before committing to high-fidelity design.

We created a design system to define reusable components, patterns, and states across the product. This made future screens consistent and supported efficient collaboration and handoff between design and development.

I structured a minimal, atomic design system in Figma using strict grids, typography rules, and Tailwind-aligned design tokens. This foundational setup ensured layout consistency across breakpoints and drastically accelerated the Next.js frontend implementation.

We derived typography, spacing, and color patterns from the existing myCampus interface and designed the dashboard to match its visual structure. We also explored a dark mode variant to support different viewing preferences while keeping the extension consistent with the platform.

We documented the interface as a component tree based on atomic principles and agreed naming conventions. This clarified component responsibilities and created a shared reference for planning, discussion, and implementation.

We translated mid-fidelity testing findings into concrete high-fidelity component improvements, refining states, labels, and decision cues. This turned identified friction points into a consistent, production-oriented prototype.

I ran a lightweight concept test with five participants to evaluate the interactive timeline and impression gallery. This confirmed the main navigation was intuitive while revealing that the detailed impression view required a clearer content structure.

We designed usability test scenarios that covered key rider and driver tasks, including comparing options and interpreting request and seat states. This revealed where users hesitated during decisions and provided evidence for targeted refinements.

We implemented the dashboard as a Chrome browser extension using HTML, CSS, and JavaScript to parse the myCampus “My Registrations” page and calculate ECTS totals. This produced a functional prototype that embedded the credit overview directly into the existing student interface.

We worked closely with developers to translate Figma components and states into reusable Angular components. This ensured design intent was preserved in code and validated the design system under real implementation constraints.

I built the responsive website frontend using Next.js and Tailwind CSS to translate my atomic Figma components into live code. This modern tech stack ensured rapid loading times and achieved PageSpeed performance scores of 98, validating the technical execution.

I structured a modular content model mapping phases, methods, and reusable building blocks inside Sanity. This decoupled architecture allowed me to dynamically update case studies and workflow impressions without touching code.