TripChamp Styleguide

While acting as the Lead Designer for TripChamp I created a UI/UX style-guide for the remodel of the app.  It covered everything from basic color and font choices to grid and module layouts. I wanted to make everything modularized to give consistency to the user as well as easy modular implementation for the development team.


Redesign the current application to fit our users needs.


We needed more research on our customer base since we pivoted from travel agencies to freelance travel agents. I interviewed many freelancers and compiled the common attributes into a persona to help lead the redesign.
With the help of this persona and feedback from our clients I was able to organize the data into different layouts.


We had very little time to put together the redesign. So, instead of beginning to make different screens I put together a style guide that the developers could use. This design system helped modularize every aspect of the application to create a device agnostic interface. The contents ranged from the color scheme, grid spacing, and modular responsive layouts.

Tripchamp Redesign styleguide

Creating this design system allowed me to rapidly develop responsive screens that I could add notes to the developer for faster and easier communication. I also would link examples that I made in to show interactions within the application.

List View:

Map View: