Seatfrog works with innovative partners throughout the travel industry to reinvent what travellers can do when they’re on the go. Among plenty of features, their bidding system gives the opportunity to grab a last minute upgrade to business class when it suits you. They work with some of the best talents around the world.
As a B2B2C company, Seatfrog doesn’t only have a mobile app for commuters but also a Dashboard for their customers. This Dashboard never evolved and needed to be partly revamped.
Seatfrog is a B2B2C product. They sell to Train Operator Companies (TOC’s) in order to sell to their customers. Currently, to service this market the team has two products: a mobile Apps for commuters and a Dashboard for the TOC’s.
While the App has seen constant work to develop it as product, the Dashboard has remained stationary since its launch. One of the first quick wins is building a Design System and adapt the UI elements such as filters, so that Seatfrog’s partners could easily navigate and filters data through the dashboard.
I’m facing here 3 challenges :
When revamping the different features of the Dashboard, it’s important to first frame our main problem.
What does that mean from a requirements point of view? Here is a non-exhaustive list of the main requirements for this project:
Atomic Design has been invented by the famous Brad Frost. He wrote a book which covers all that goes into creating and maintaining effective design systems. The idea is that a text can be an atom. This atom can be part of something bigger, a molecule (a button for example). This molecule can be part of something even bigger, an organism (a card for example). This organism can… Well… You got me right?
When designing a Design System, it’s extremely helpful to build it in an Atomic perspective. The idea is to create a collection of reusable components, guided by clear standards, that can be assembled together to build any number of products. Some examples of components redesigned for the dashboard:
To showcase the different datas and values, I went for the IBM Design Language and took inspiration. To have a nice contrast, I opted for a dark mode with flat colours and a medium saturation.
To showcase the graphs, I opted for hard edges so that the Revenue Managers would clearly see where the data points without having to hover over the graphs.
I like to explain my design decisions through detailed guidelines to the developers I’m working with.
There were regular meetings with the Engineers to know what’s possible and what’s not. Thanks to our amazing talented team, the project has been a success! I couldn’t be in Seatfrog to see the full Design System being created. But I’m sure the developers will take good care of the Atomic Library and make something amazing!
Creating such a Design System is not an easy task. I have to be technical here. If I had to design another Atomic Library for a dashboard, I would first class all the components we already have, detach them, and redesign them. I would then create new components in my library as soon as it’s approved only. I lost lots of time to create the elements and change them afterwards. It’s a lesson! Next time it’ll be even quicker!
