italink - train booking site
Software Used:
Figma
Duration:
14 Weeks, August - December 2023
Background
The prompt of this project was relatively simple: create a booking site fir a travel service with service in and out of 3 or 4 cities. The project had two main goals. One was to familiarize ourselves with Figma's new Variables feature, the other was to develop a design system and gain a deeper understanding of how design systems work and are structured.
early Design
This project was divided into 4 sprints where we were to make as much progress as possible within a 2 week period, ending with a critique at the end. My early design pulled on a collage style showing the history and culture of Italy. The early iterations are shown below.
Final Design
This final approach and prototype can be seen below. The collage style did not seem to be working, so I decided to shift the approach to pull homage to Italy's history through full images instead.
Design system
The design system for Italink, Vivo, was made to understand the deep layers that are stored within a design system. The full system can be clicked through in the Figma file below.
Design tokens
Within Vivo, you'll find tokens encompassing brand colors, typography scales, border radius, grid guidelines, and additional elements. Design tokens serve as the cornerstone of a design system. Leveraging these tokens is crucial for seamless developer hand-off, streamlined design processes, and ensuring adherence to brand guidelines.
figma styles and variables
In the Italink site, both styles and variables were used to keep consistency throughout the design. The typescale was maintained through styles, while color was now maintained using variables. The variables could then easily be changed states upon interaction.The typescale and color system can be seen below.
components
A series of components was made for the Vivo design system. They are shown below with their respective guidance.
Buttons
Buttons should always be made in auto layout. Refer to the “Spacing Guidelines” for specific measurements. Since there are only these are made in a Figma Auto Layout, the size will adjust accordingly
Breadcrumbing
During the checkout process, the user is given these clear, easy steps to know how many more steps they have to complete the checkout process. The user can click through these steps to go back if there is anything they need to change.
entry fields
These entry fields are found when the user is inputting their name, address, payment method, etc.
Cards
These cards show to allow the user to select which time they would like to leave, as well as which type of ticket they would like.
calendar dropdowns
The calendars below allow the user to select their return and departure dates. The different states of the calendar are shown below.
city dropdowns
This is the dropdown menu for the user to select their arrival and departure cities. The different states of this can. be found in the full design system.
Accessibility
Accessibility is one of the most important things, if not the most important thing, to keep in mind, while using the Vivo design system, or any design system.
Our principles of Accessibility are:
1. Observable
2. Navigable
3. Comprehensible
For more of Vivo's Accessability Guide, as well as guidelines for other parts of the system, check out the full Vivo Design System Figma File.
OPEN FIGMA FILE
Project takeaways
In the end, this project taught me so much about how design systems work and how to follow them. It also taught me a LOT about Figma and their new variables feature. With that, it taught me a lot about how these two things work together. It helped me understand how the variables help to ensure consistency throughout a design system, and the importance of this consistency.
What comes next?
Currently, I am in the process of creating a mobile version of this site. The mobile site will also contain a digital ticket that the user can access their ticket that will be scanned upon entry of the train.