Eddy Chen
Atomic Design | Design Principles | UIUX
Defined design principles and created a design system to guide the design project as well as future design needs of the School District.
I was responsible for creating the design principle through user research. I also worked on varients for key patterns.
Although the concept of using a set of standards and guidelines to build products has been around for many years, design system is a relatively new concept that has become more widespread in recent years, as the complexity and scale of digital products have increased.
A design system that follows atomic design principles breaks down a digital product's components into smaller, more manageable pieces and provides a consistent approach for designers and developers. It also helps ensure that the product is user-friendly and intuitive for users by providing clear design guidelines for designers to follow when creating the interface.
A design system consists of a set of standards, guidelines, patterns, etc. that can be used to design and build a product. But everything starts from the design principles that best fits the organization's goal …...
STAR aims to create a flexible system that can adapt to the changes and fluctuating wave of information and brands within the Seattle Public School.
STAR is about displaying information in a friendly way for a wide range of users, creating easy information navigation in every interaction.
In consideration of the diverse set of users, STAR ensures our design system is inclusive and accessible to all intersections of diversity for our students, families, teachers, and community members.
STAR focuses on making information easy to find for users, helping them minimize errors and misinformation. We balance providing straightforward instructions and leaving room for exploration.
Giving the design system an acronym makes it easier to remember and refer to, and it can promote consistency and understanding within a team. An acronym can also be used as a branding tool to make the design system more recognizable and memorable. The S.T.A.R design system for the Seattle Public School is mainly considered with the following two user personas ......
Mainstream user
Diverse User
We referenced the original Seattle School’s website and noticed that there were several patterns such as announcements, cards, footers, etc. so we defined each of theses in our own design system.
In addition to that, we also added calendars and maps to the patterns because we believe those are important in our user’s journey.
When choosing our colors and typography, we considered the Seattle Public School District is a student-centric, growing, diverse community. Our purple color replaces the original blue color. Purple means wisdom and energetic, and it also passes AA standard for accessibility.
The design library for S.T.A.R again consist the original Seattle Public School website pattenrs, with additional components like calendar that is one of the most frequently used feature for our user.
When creating the library, we used varients and boolean to practice Atomic Design, and use component-based interaction to created things like dropdown, input indicator, etc.
I really cherish the opportunity of to explore and build a design system for social good during my undergraduate studies. This is the first-ever design system class taught at the University of Washington. During the first half of the semester, we explored Figma and identified the design system of various websites. Then, we moved on to rebuild the design system of SPS.
However, as we moved on in the process of design (following the course structure), we identified a huge problem of misunderstanding or confusing about the organization’s value, and what the users really want. We then notified the instructors, and they did make a huge mistake here:( Therefore, we took a step back and re-evaluated the value and researched some of the competitors, online resources, and interviewed a couple stakeholders to get a better understanding of the organization’s needs.
In addition to some of the design standards, I learned a lot of lessons.
