![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/6822939c-3012-4414-af12-6289549b7bc5_rw_3840.png?h=a9e837634a40101280dfd4f070cb8544)
Initial state of the Trip Builder component.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/e3d9d1dc-d232-4ed2-9111-3aa983b65ec0_rw_3840.png?h=33cda0bcdac0194afa3a743ae00f974b)
Primary and secondary buttons of the new design system.
The challenge of a new design system
One of my first main projects in the years I worked at Bus.com was to overhaul their legacy UI and user experience through a cleaner and consistent design system. At that moment consistency was a big issue and the UI was all over the place — different styles and behaviors everywhere.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/bb8e4fad-12ee-42e7-b6c8-3f6b5d1d4022_rw_3840.png?h=d2894d96c0c08ef428ec26869150e0ba)
Fresher color palette.
Design role in Fresher — a design system built from scratch
The new system — now called Fresher by the design team — was built from the ground up. I was responsible for building and organizing basic and and specialized UI components.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/d88c4064-a24a-428b-939e-5f68995f35c9_rw_3840.png?h=3d09ecadc38a2d0865f19075d72c67de)
Fresher modals.
Fresher iconset
As a natural part of the design system, an iconset was built. The goal was to have a fully consistent and mature family of icons that would be used in multiple areas of the product and of the marketing side of things.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/84263a75-c7e8-4e22-81a5-b8783abf8c93_rw_1920.png?h=b0f239ce6c11fe20c129fa3d891e7d01)
Fresher iconset.
Data tables
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/f9edf72d-6bff-4e2e-a3d4-e6df43e04bca_rw_3840.png?h=d9fa8df38a1bcd2359ecbb4b9d8f1848)
Data table component.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/37cdfef8-e8cf-4336-8de1-9c268d84b1af_rw_3840.png?h=53a839f3df48a4922df03693da35b511)
Table action bar for multiple selections.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/5340c002-a57c-4a62-9afd-74b9311cc2e2_rw_3840.png?h=2c3f102120b8214f687c9bce9a870455)
Mobile data table component.
Inputs
![Text fields](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/983e0484-10c4-4f35-bf9e-cfd6f8717d3c_rw_1920.png?h=0e16e0b56b704d58a1f4772d80788b1c)
Text fields
![Selects](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/3feedb9c-11ba-4e5d-a9b9-e815a25179b1_rw_1920.png?h=aa00eb80b7f8dad37037d539ac509fd7)
Selects
![Date picker](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/8dfdb765-c81e-469c-bf05-addc800b174c_rw_1920.png?h=3acb98228c7c7421857a21da18095aa3)
Date picker
![Other inputs](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/35f7344a-b146-4619-b35a-5a976c3a52c2_rw_1920.png?h=5646073bd2511c49e0f6bdcc27efa5ba)
Other inputs
Payment sheets
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/1be232c1-59e7-4f1c-bca6-edac5add48c4_rw_3840.png?h=9e2d5b82b8380723922ba85dfa226d4b)
Desktop and mobile payment sheets.
Trip Builder module
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/f8dce1db-cdbf-495a-a403-bebd14f8d893_rw_3840.png?h=69a151938e6eb367215d0ef21415fdb6)
Desktop version of the Trip Builder module.
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/f07fe59e-2ff6-4662-81ea-dc4defdacaa6_rw_3840.png?h=1e8c8a6d539ec26ffc3f393c89a47145)
Mobile version of the Trip Builder module.
Itinerary grid
![](https://cdn.myportfolio.com/eedc5962-b09d-41d3-89d8-e08e4ea40cac/1a5b2297-c364-433d-8709-99a2e1fcf85a_rw_3840.png?h=9ade33553fb3d92dd330e6dba016446f)
Complexity of itinerary grid structures.