DESIGN SYSTEM, WEB, iOS, ANDROID, 2019
As the TripActions design team grew, it became increasingly important to maintain a consistent style, visual language and user experience across all platforms. With multiple different products for travelers, financial teams, admins and support agents, it was clear that we needed a more systematic way to guide and leverage our collective and creative efforts.
Our initial goal was to have a collection of reusable components and visual elements, guided by clear principles, that can be combined together to create a more cohesive ecosystem.
I co-led a foundation initiative, establishing brand and product guidelines for Suitcase 1.0, our first official design systems project. This version included documentation for symbols, colors, components, iconography, illustrations, typography, grids, personas, white-label templates, and more – across the web, iOS, and Android platforms.
For over 4 years, Sketch was our main tool for visual design. We used Abstract for work collaboration, version control, and to manage our libraries and host our design system. We handed off designs via Zeplin.
This documentation is the result of the incredible effort and expertise of a talented team. Everyone made an enormous contribution to this project by dedicating time, brainpower and creative energy.
I collaborated with Diego Costa in documenting the guidelines to define the style of hundreds of unique icons that gave birth to our iconography library. Diego's contribution was essential to making this project possible.
Larsseit is the font family used in the TripActions brand identity. In our products, we use three different weights for titles, subtitles, and body copy: Bold (600), Medium (400) and Regular (300) respectively. We default black color for text over light backgrounds. We reserve blue for links and CTA buttons. Green text is used for success messages, orange we use to communicate warning or error states.
Suitcase was influential to multiple future projects that came after we launched and it became the source of truth for design guidance to drive consistent user experience with a renewed overall look and feel.
This is one of our redesign proposals for the home page and user profile. Ever since we've launched Suitcase, our product has been moving towards this visual direction and it's becoming more and more part of our user experience and brand identity.
A system is always an ongoing project that will keep evolving over time. We kicked this project off to solve a variety of creative and technical problems and to make our workflow more efficient and drive consistency across all of our products and brand identity. We have many plans to keep evolving Suitcase in order to help improve our product and user experience, such as accessibility, energy efficiency with a dark theme and making it accessible in multiple languages to support all of our customers throughout the globe.
After extensive use of the current version, many adaptations have been made over the course of multiple projects. As the team migrated to Figma, the system kept evolving and Suitcase 2.0 came to life: a newer, more flexible and collaborative version, guided by our design principles to drive work efficiency, communication and clarity.
Nike AdsInteraction Design
Do Not DisturbProduct Design
Micro InteractionsMicro Interaction
Design Social NetworkProduct Design
Pablo LlanquinWeb Design
Activity MonitorData Visualization
Add to TripProduct Design
Product Interface AnimationsInteraction Design
© 2020 Jardson Almeida