DESIGN SYSTEM, WEB, iOS, ANDROID, 2019

Suitcase – TripActions Design System

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.

Arrow-Down-Black
4-Suitcase-Project-Cover2
5-Suitcase-Project-Cover2
My role in the system

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.

Sketch + Abstract

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.

7-Suitcase-SketchAbstract2

Team Work

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.

9-Suitcase-Icons-Guideline

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.

13-Suitcase-Typography

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.

12-Suitcase-Illustration-Guide

I also collaborated with Justina Leisyte and Diego Costa to define the guidelines for colors, shapes, and scenes composition to create our illustrations and visual elements.

Learnings

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.

15-Suitcase-Learnings

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.

Next Steps

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.

Dream Team

Kudos to the amazing design team that led the initiative of the first version of Suitcase. Teamwork makes the dream work. You guys rock!

Kevin-Lanceplaine2@2x

Kevin Lanceplaine

Diego-Costa@2x

Diego Costa

Ali-Ozturk@2x

Ali Ozturk

Marta-Ceffa@2x

Marta Ceffa

Rus-K@2x

Rus Khaydarov

David-Lecoutre@2x

David Lecoutre

Jardson-Almeida@2x

Jardson Almeida

CONSIDERATIONS

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.

App-Store-Badge
Google-Play-Store-Badge

All Projects

YouSoundProduct Design

OpenStageProduct Design

Nike AdsInteraction Design

Do Not DisturbProduct Design

Micro InteractionsMicro Interaction

MondrianizmMicro Interaction

Design Social NetworkProduct Design

Pablo LlanquinWeb Design

Activity MonitorData Visualization

Add to TripProduct Design

Product Interface AnimationsInteraction Design

Say hi, let's work together.

60×60-Dribbble
60×60-Twitter
60×60-Linkedin
60×60-Instagram

© 2020 Jardson Almeida