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.

Objective:

Redesign the current application to fit our users needs.

Research:

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.

Execution:

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  
http://www.prestonbezant.com/wp-content/uploads/2017/04/system_v1.pdf

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 codepen.io to show interactions within the application.

List View:

Map View: