TripChamp — UI/UX Style Guide
Led the UI/UX redesign of TripChamp's travel agent platform, creating a modular design system covering color, typography, grid, and responsive component layouts.
Overview
While acting as Lead Designer for TripChamp, I created a comprehensive UI/UX style guide for the remodel of the app following a pivot from travel agencies to freelance travel agents. The goal was to produce a fully modularized design system that gave consistency to the user experience while enabling faster, more predictable implementation by the development team.
Key Contributions
- Conducted user interviews with freelance travel agents after the company’s pivot to better understand the new target demographic
- Synthesized research into a persona (Christy) to anchor design decisions throughout the redesign
- Built a device-agnostic design system covering color scheme, typography, grid spacing, and modular responsive layouts
- Produced annotated screens with linked Codepen examples to communicate interactions directly to developers
- Delivered rapid high-fidelity screens using the system, accelerating the redesign timeline
Research
The pivot from travel agencies to freelance agents required fresh research. I interviewed freelancers, compiled common behaviors and goals into a persona, and combined that with product feedback from existing clients to structure the layout hierarchy.
Execution
Rather than designing individual screens from scratch, I built a style guide the development team could use as a single source of truth. This modular system covered every aspect of the interface — from the color palette and type scale to grid spacing and component layouts — enabling a device-agnostic interface that scaled across screen sizes.
The system also served as a communication bridge: I would annotate screens and link live Codepen examples to show exactly how interactions should behave, reducing back-and-forth with developers.
Style Guide
The full TripChamp redesign style guide is available as a PDF:
