top of page
Launching Woof Design System to improve Ollie's visual consistency while preserving its playful and vibrant aesthetic
Feb - May 2024
With a focus on premium-quality dog food and expert pet care solutions, Ollie strives to provide nutritious and delicious meals tailored to each dog's unique needs. Dog owners could build up their customized recipes for their puppies. The website is well-categorized to fulfill user needs, while it still lacks a formalized design system to help organize design elements and ensure a smooth browsing experience.
Thus, we built Woof to provide extensive UX guidance and UI component implementations for designers, product managers, and engineers to streamline design processes.
CONTRIBUTION
Standardizing UI elements, creating components (badge, checkbox, footer, header, radio button, tag, and text input field), setting accessibility rules, UI documentation, holding weekly meetings, managing team progress, and pitching the design system.
TEAM
Bryony Hoare, Josie Xu, Roey Wang, and Todd Wu
Why does Ollie need a design system?
While Ollie's website and brand aim to cultivate vibrant and cheerful experiences, inconsistencies and accessibility issues within the site suggest the company's lack of utilization of a design system.
Why Woof?
-
Emphasizes personalized, adaptive, and expressive user experiences by transforming Ollie's dynamic color schemes and design elements into design tokens.
-
Features an approachable, fun, and friendly interface.
-
Helps designers and developers save time on design details and decision-making progress.
-
Benefits external users by allowing them to access the website more intuitively.
-
Suitable for various fields aiming to avoid a cookie-cutter look.
How Woof was "born"?
Step 1: Deconstruct
The project began with an audit of the existing site to get a better understanding of Ollie's existing design components. We screenshot unique instances of the main design assets, such as typography, buttons, icons, input forms, drop downs, etc, and categorized them in Figma.
Upon dissecting the UI inventory, we identified many inconsistencies in the design assets, which proved the need for a more systematic approach to documenting, communicating, and maintaining our design system.
Ollie UI Inventory Audit
Step 2: Establish Design Principles
Establishing our design principles prior to system development was pivotal, providing a compass for our decision-making process throughout the project. With a user-centric approach at the forefront, we prioritize simplicity, cohesion, and empathy as our core design values.
Simplicity
Prioritize simple UI elements, an organized page structure, and a clear hierarchy of information.
Cohesion
Unify design language through a pre-defined color theme palette, consistent elements, and systematically arranged sections.
Empathy
Cater to users with diverse needs, ensuring the creation of a digitally accessible environment.
Step 3: Atomic Design
Brad Frost's atomic design methodology deconstructs interfaces into small, reusable components known as atoms. These atoms are then combined to form larger, more intricate components and pages, facilitating easy updates and maintenance of designs over time.
Atomic Design Concept
Woof Atomic Design
To get the whole team on the same page, we focused first on the foundational elements of the design system, such as brand logos, grid systems, spacing, typography, color palette, and iconography.
Step 4: Components
A component library is a collection of reusable interface elements that promotes consistency and efficiency in design and development. We defined different variants and states for each component to simplify the design process and ensure accurate and consistent implementation.
Buttons
The button is a functional design asset with text, icons, and/or a border.
Hierarchy: The hierarchy in our button styles allows designers to apply them based on the importance of the actions.
Sizes: Our button styles are available in different sizes, allowing them to be used in a variety of contexts and screen sizes.
States: We also incorporated various states to provide users with proper visual feedback. These states include enable, hover, active, and disabled.
Interactive Cards
Cards are an excellent way to arrange key content visually. Each type of card holds a specific purpose, and the interactive components allow users to customize product selections. The card containers are responsive, too, allowing for a wide range of stylization options, and can be any light color (white or oat).
More Components
We developed a range of component templates for frequently-used sections such as the footer, header, and image carousels. By implementing these templates, we can maintain consistency across pages and screens while also significantly speeding up the design process for teams.
Design-led Documentation
To breathe life into the Woof design system, documentation plays a crucial role in translating our design concepts into tangible guidelines. Our team has meticulously crafted documentation encompassing our design principles, accessibility standards, components, and best practices.
Leveraging Zeroheight, an integrated collaboration platform, we seamlessly create and maintain our web-based design system documentation, ensuring clarity and accessibility for all stakeholders.
Our accessibility guidelines ensure that digital content is usable and understandable by individuals with disabilities, providing standards and best practices for designers and developers to follow and promoting inclusivity and equal access to information.
By demonstrating how to use each component of the Woof design system and examples of Do & Don't, the user is guided through the process.
Conclusion
The Woof Design System is created and maintained by four graduate students from Pratt Institute for Ollie, a pet food supplier. Our team was responsible for maintaining and updating it until May 2024.
From 0 to build a design system offers me invaluable lessons in organization, consistency, collaboration, and empathy. It shows the importance of creating cohesive visual and interaction patterns, fostering a deep understanding of design principles and best practices. Additionally, it hones my documentation, communication, and teamwork skills as individuals work together to establish and maintain the system. Making a design system also emphasizes the significance of user-centered design, ensuring that products are accessible and usable for diverse users. Overall, creating a design system gives me a holistic understanding of design processes and prepares individuals to tackle complex design challenges effectively.
bottom of page