Mar. 2023 – May 2023
Figma, Google Workspace, Zero Height
Samika Rastogi, Vanshika Shah, Sharon Tao, and myself
Created UI inventory; standardized typography; wrote the overview, style, and resources sections of the documentation
Goodreads is a social cataloging website that allows readers to organize their digital bookshelves, connect with one another, rate and review books, and track their reading. However, the website includes inconsistent buttons, typography, and styles across the interface, which can be confusing to users.
Our team of designers built a consistent, clear, and familiar design system to assist designers, product managers, and engineers in improving the user experience on Goodreads.
A design system would not only allow users to achieve their goals with ease on the website, it would also provide an effective and efficient workflow for product managers, designers, and developers.
To create our design system, we completed the following:
UI Inventory
UI Kit
Documentation
As Goodreads is a sprawling website with multiple types of pages, I decided to narrow down our scope to just six: the homepage, dashboard, book page, the bookshelf page, genre page, and review page.
To catalog each component, I took screenshots of every unique component that I came across. As I took screenshots, I created categories for typography, interactive components, cards, images, buttons, text fields, navigation, and icons within my Figma file to add my screenshots to.
From there, my team and I looked for similarities and differences across the six screens. We were able to identify patterns that were used in Goodreads, such as how social cards were laid out, and note inconsistencies with iconography, images, and modals.
The UI inventory provided us with a solid starting point for the components we wanted to include and redesign in our system.
Brad Frost's atomic design is a methodology that breaks down an interface into small, reusable components called atoms, which can be combined to create larger, more complex components and pages. This approach allows us to create designs that can be easily updated and maintained over time.
To start our design system, we established a set of foundational styles for our atoms. Creating a design language ensures that our resulting molecules and organisms are visually cohesive and easy to build.
Defining a color palette and typefaces helped us achieve unity across our design system and to create a consistent look and feel. Furthermore, we defined spacing and layout rules across our interface to create balance and hierarchy.
With that, we kept accessibility considerations in mind such as color contrast ratios and typography hierarchy guidelines to ensure that more users will be able to achieve their goals with ease on the website.
We combined our atoms to create components that are a little more complex, such as buttons and navigational elements. Our predefined colors, typography, and spacing guidelines helped us take a systematic approach to creating cohesive molecules.
We built our most complex components by arranging our atoms and molecules together. Though our intricate components, such as social media modals, consisted of many working parts and seemed daunting to us at the beginning, having atoms and molecules simplified our design process and helped us maintain our consistent and cohesive visual language at the same time.
From there, we fused our atoms, molecules, and organisms together to build entirely new pages for Goodreads through our system. We defined specific page layouts, such as for displaying books and social posts, that can be used and customized as needed.
Our UI Kit is available to download on Figma Community.
As we began writing our documentation for our design system, we brainstormed some names and guiding principles. We eventually landed on Storyteller as a fitting name to support the needs of avid readers.
Furthermore, we decided that we wanted Storyteller to be consistent, recognizable, efficient, and effective. Our principles emphasize a user-centric approach and reflect our aim help more users have a delightful experience on Goodreads.
Our design system documentation can be found on Zeroheight.
Within our documentation, we introduce internal stakeholders to our system, principles, and values. From there, they have the option to explore our foundational styles and components to learn more about general usage guidelines and variants. Furthermore, we have a page that encourages contributions from the greater community.
Storyteller was designed with all readers in mind. A cohesive design will make it easier for users to accomplish their goals on Goodreads and having recognizable elements throughout the interface will help more readers find information quickly. Furthermore, accessibility has been baked into our design system and will empower more users users to read with joy.
In addition, a design system frees up time and effort for product managers, designers, and developers to brainstorm new and innovative solutions instead of working on the same problems over and over again. Moreover, our design system makes it easier to quickly create these new solutions based on current guidelines, components, and templates, reducing development time. It will also help streamline the onboarding process for any new team members of any role and to help align with adjacent teams.
Learn more in our pitch deck.
This was a very exciting project for me, as someone who is an extensive Goodreads user and avid reader. I learned so much about all the different pieces that go into creating, updating, and maintaining a design system, and I hope to work with developers and product managers in future design system projects to gain their input and expertise.
I also learned a lot more about creating components and variants as well as using auto-layout in Figma. I haven't had experience using a lot of these functions before, so it was a great opportunity to grow my design skills.
If I were to redo this project, I would want to conduct user research at the beginning to ascertain the usability of the interface and whether a design system is the best solution. Conducting interviews or usability tests will give my team and I more information about what Goodreads users need and prioritize.
Furthermore, I would want to reconsider naming conventions within the system to make it easier for my team and I to identify more complex components and how all the pieces of the puzzle fit together to create it.
