Astra Design System Case Study
As apart of the Dribbble Scaling Design Systems course the assignment included the following project. This project demonstrates the steps involved and the benefits of a design system.
Project Brief:
The company Interplanetary Travel Syndicate (IPTS) is a bustling transportation network that shuttles people from world to world within our galaxy. Leadership had decided to launch with three unique offerings:
IPTS Travel > a website where you can browse and book travel to and from multiple destinations within our galaxy.
IPTS.org > an informational website where you can find the latest news and happenings with the IPTS
IPTS Rail > a real-time updated web app where you can view lines, routes, and times for all the different commuter lines.
The project scope included creating three websites, each website must include five shared components. To assist in the effort a design system was created that included the visual language and five components documented within a reference site.
Research/Analysis
The research phase included reviewing websites that provided similar services; booking travel, metro/subway commuter lines, travel news and space-related nonprofits. Screenshots were taken to compare and gain insight on the common features and content for each service. Next I performed a feature prioritization exercise - what are the key features and what are nice-to-haves.
Each IPTS website has features specific to the content and functionality needed for each user experience. However, to speed up the development process I cross compared the features to determine which are shared components.
The key findings included:
All three websites need two levels of navigation.
There are multiple cards that are required for the different types of content. (ex. News articles, destinations, travel tips, career information and shop products.) There is potential to create one card component to cover most of the content needs.
A footer component can easily be used consistently.
Two levels of buttons are needed to emphasize some actions over others.
To test my theory on the shared components I created wireframes for all three website homepages. This exercise provided more insight on the specific needs of each component.
Design System Development
The first step in creating the design system was to build out the IPTS brand - the visual language that will be used across all three websites. I started with the IPTS Travel website wireframe and used the provided IPTS logo as a guide to influence design elements to create the homepage mockup.
Next I created the brand style guide off of the design mockup to include Colors, Typography, Icons and Spacing and documented them in a reference guide to begin the overall Design System. This design system was named “Astra” because of it’s meaning "to the stars" which is a space-inspiring representation of the IPTS brand.
Based on the key findings of common features I created the five shared components and applied them to the IPTS Travel design. Then I documented the components within the Astra Design System.
Using the IPTS.org and IPTS Rail wireframes I created the homepage designs for each website applying the components and visual language.
Challenges and Solutions
The biggest challenge was to keep evaluating what minimum design could be completed to decide on the five shared components. I leaned heavily on the discovery and feature prioritization to narrow down key components before starting any design.
Another challenge was deciding what minimal documentation could be written and created for each component in the reference site for it to be enough to include. Documentation within a design system is an ever evolving product in itself but analyzing other design systems was helpful in making these decisions.
Results and Impact
The biggest impact was how quickly I was able to create the other two website homepages once the visual language and shared components were set. Not only were they quick to create but a consistent user experience formed with ease.
Conclusion/Summary
Benefits of creating a design system:
Faster builds, through reusable components and shared rationale
Better products, through more cohesive user experiences and a consistent design language
Improved maintenance and scalability, through the reduction of design and technical debt
Stronger focus for product teams, through tackling common problems so teams can concentrate on solving user needs
Overall learnings from this course include:
The initial effort put into research and analysis saves a ton of time with design.
Hot potato concept. Instead of designing to pass off to development, having a shared conversation and workflow of quick iterations back and forth between designer and developer to get to a result faster as well as team buy-in.
I learned how to create shared components and steps involved to document them in a reference site.
I was able to dig into existing design systems and analyze how each approaches components and the communication within their systems.
Most importantly > I now have the skills to evaluate any user interface and determine what could be shared components and how to create and scale a design system.
Thank you Adelina and all my teammates for the support and feedback throughout the project.
References
Software and Plugins:
Dribbble, Figma, Chat GPT, Zeroheight, Streamline icons, EightShapes Specs, Unsplash, Lore, Contrast Checker
Reference Books:
Atomic Design, by Brad Frost
Expressive Design Systems, by Yesenia Perez-Cruz