Pathloom / Design System
Design system + responsive web design for an outdoor trip planning product launch
My Role
I was a contract UX Designer with the following responsibilities:
Competitor Research
Design Audit
Responsive Web Design
Design System
High Fidelity Screens
Product Category
Health
Outdoor
Travel
Web application
Team structure of the project
Design Applications
Figma
Timeline
March 2021 (4 weeks)
About Pathloom
Pathloom is an early start-up that is planning to release the product to the market in a few months. Their mission is to get more people outdoors. They help people to plan outdoor trips by providing a comprehensive planning tool - such as searching for the campsite, booking, getting safety information, adding for the hiking trails and attractions, and sharing the itinerary.
Constraints
1. The product is in the later part of the design process. So there was no user flow I needed to revisit.
2. They built desktop web screens first and transitioned them into the mobile web.
3. The client didn’t have an organized design library/system yet.
Design Audit
Client’s request: Audit to make sure the high fidelity screens in pixel-perfect.
Design Audit
The client requested me to conduct the design audit for a total of 7 user flows, to review their screens with fresh eyes. I mainly audited for the consistency of typography, use of uppercase/lowercase, spacing, and use of color. Below are examples of areas I audited and made suggestions;
The location and sizing of the buttons at modals suggested being consistent. (before the audit)
Through the exercise, I learned what elements we need to pay attention to for pixel-perfect product shipping. Also, this helps me to understand Pathloom’s design language. This was a good foundation to organize their existing design library and upgrade to the design system, which is stated in section Design System.
Responsive Web Design
I considered how the elements are applied responsively in different viewer environments
Desktop to Mobile Web Pages
Pathloom primarily built its product on desktop web pages. The team needs to set up a few screens as an example of the mobile web page so developers can take the patterns to the rest of the similar screens. Below are few examples of my work on responsive web design.
Datepicker example - menu got simplified, size of the card and the button got modified
Design System
Organized & established the design system
The Purpose
Pathloom has its components, typography, and colors set up in its Figma design file. However, the elements were scattered and need to be organized to be a design system. Pathloom asked me to establish a design system in their working Figma file so it could be used directly as well as giving them guidelines.
The previous design library in Figma needed housekeeping.
Competitor Research
As a first step, I researched competitor’s design systems and apply my findings to the high-level framework. You can see the full report of competitor research here.
I choose to refer to Lonely Planet Rizzo the most because of the following reason;
1. Both Lonely Planet and Pathloom have a comparable mission - to encourage people to travel more.
2. Lonely Planet has a lot of similar UI components to Pathloom, such as destination cards, maps, and types of icons.
Lonely Planet Rizzo
Through the research, I learned the following insights;
1. The way how to sort complicated icon sets by the purpose.
2. UI elements have been sorted into parts such as Navigation, User Input, and Components.
3. Lonely Planet shows the example of external widgets (such as car rental pop-up) as well - applicable to Pathloom’s as they developed further.
The Process
For the easy navigation, I sorted them into 6 categories with a color-coded system.
Grids & Guides
Colors & Fonts
Navigation
Input
UI Components
Iconography
After sorting the elements under the big umbrella, I organized the elements by the hierarchy of purpose > state > size. You can see one part of the example below.
Organization in Card UI element
After the update, the Pathloom team commented that they find components much quickly from the Figma design library. Also, the system will help them to add the additional elements in the future since I have established the rules on how the components should be organized and labeled.
Design System Before
Design System After
Conclusion
Contributed to speed up the team’s process and helped in pixel-perfect UI details.
I worked on 3 areas with my 4 weeks at Pathloom;
1. Design Audit
2. Responsive Web Design
3. Design System
All 3 areas are the key part to make the product consistent to be professionally shipped. I appreciate that I was involved in such an important part of the process. I learned what areas to watch when conducting the audit, and how to set up an expectation of the design system.
I got familiarized with many different UI elements through this project - such as map, date picker, navigation, onboarding, destination cards, etc. I considered how the elements are applied responsively in different viewer environments.
With all the learning through this project, I would keep applying the principle of consistency and responsiveness for my future work process since the principles are applicable to many other product types.