Shuddle Design System
Intro
Hello ???my name is Marek and I’m a professional iOS Developer and junior Designer. I’ve been doing a Dribbble’s Design System course for the last few weeks and I’d like to share my impressions.
Every week of the course I watched training videos about Designing Systems, read corresponding books and attended live online mentoring sessions. At first we learned about different types of design systems, what they are and when to use them. After that we discussed the best methods and tools to create and document a design system of our own. Each week ended with an assignment and the last two tasks combined all topics studied in the course into a final project.
IPTS
As the Head of Digital for the newly launched?IPTS: the Interplanetary Travel Syndicate, a bustling transportation network that shuttles people from world to world within our galaxy my job was to create three websites or apps:
ipts.org, an informational website where you can find the latest news and happenings with the IPTS
IPTS Travel, a website where you can browse and book travel to and from multiple destinations within our galaxy.
IPTS Rail, a real-time updated web app where you can view lines, routes, and times for all the different commuter lines.
For the initial version of my design system, I decided to focus on a few key colors and fonts that would provide foundation for the brand identity. I chose a primary color palette from https://coolors.co/palettes/trending which I felt conveyed a sense of exploration and space adventure.
In terms of typography, I chose a standard iOS font because it looks good and is easy to read on a variety of devices.
Overall, I wanted my design system to be versatile and flexible, allowing me to create a consistent visual language for all digital products and therefore save a lot of work.
The next step was the most exciting! I started to work with the first view of the product. Even though it was just a splash screen, creating it helped me to adjust my initial ideas about the app’s style.
After my splash screen was finished,I decided to continue with a Home Screen. Each app has a similar but yet slightly different variation of it. Despite small differences between them I was able to isolate some reusable components like Cell, TabBar or common font sizes.
Just when I had moved those components to a Design System project, the second part of the assignment was released and it contained a very interesting plot twist!
Shuddle
Our leadership at the IPTS—the Interplanetary Travel Syndicate—just hired the prestigious branding firm MegaBrand to do a rebrand of the entire organization, and there are a few things that’ll affect the three products I’ve been working on.
MegaBrand discovered through focus groups that the IPTS name and logo felt very ominous, like it was cold, faceless corporation that was always watching. (“The eyeball-shaped logo doesn’t help,” said one candid participant.) In addition, the IPTS wants to appeal to a younger demographic!
After weeks of research and exploration, they’ve settled on the new name “Shuddle,” which feels more like a cool, new startup.
From now on the three apps / websites changed:
“ipts.org” is now “shuddle.world.“
“IPTS Travel” is now “Shuddle Visit”
“IPTS Rail“ is now “Shuddle Ride“
Final thoughts
Due to a good design and the fact that I used the Design System, changes in fonts, colors and logos introduced in one place were almost immediately applied to the three projects after updating.
Using tokens and building components and views from smaller elements allowed me to update the whole project within a few minutes. It shows the power of Design Systems but it also shows how important consistency is. It would be a nightmare to change every detail separately in a small two-week project not to mention a big project created a few years or even decades ago!
During the course I’ve learned a lot and met amazing people especially during the mentor sessions. I’d like to thank everyone for their support and encouragement! You are all awesome ?? I can’t wait to explore the world of Design Systems even further!
