turf design system
A comprehensive design system, providing a unified language of foundations, components, and patterns for experiences across all digital touch points.
Domain
Enterprise System — Real Estate
1 Lead Designer (Me) + 2 Product Designers + 1 Product Owner
Timeline
7 months (Nov’22 ~ May’23)
STATUS
Developed
UNDERTAKEN AT
Mindstix Software Labs
Overview
The Turf Design System is living entity that aims to redefine the design ethos to build enterprise solutions with not only an enhanced user experiences but also to facilitate scalability.
Why a design system?
For Turf, their digital landscape was filled with diverse products, built by different design teams without following a single source of truth. Thus, building a design system became imperative for maintaining consistency and efficiency.
Big Wins ~ Key Performance Metrics
100% Unified visuals
80% Faster time-to-market
40% Reduced costs
90% Improved Collaboration
Persona
Who are we building this for?
Designers
“A toolkit that resonates with the brand, providing a playground for innovation and a shortcut to visual consistency while adhering to accessibility.”
Developers
“A framework that aids in efficiency, offers a well-documented library of reusable components and clean code snippets.”
Product Managers
“An anchor that ensures our brand sails smoothly through diverse user experiences. A comprehensive system that facilitates scalability.“
Approach
Strategizing the roadmap.
Audit
Establish
Design
Hand-off
Govern
Included conducting in-depth assessments of design elements and scrutinizing existing product experiences.
Identified areas to improve, assessed the system's alignment with brand guidelines, and gauged its responsiveness.
Maintained a high standard of quality, consistency, and user satisfaction within our design system.
Defined the visual language that would shape the user experience.
Included crafting a cohesive color palette that resonated with the brand, selecting typography that embodied readability and style, and establishing a set of design principles that would guide the entire system.
Ensured a harmonious blend of aesthetics and functionality.
Shaped the visual and interactive elements that define our user interface.
Created a complete list of components needed for the digital products.
Ensured it not only met the functional requirements but also elevated the overall user experience with a cohesive and visually engaging interface.
Facilitated effective communication and collaboration between the design and development teams
Provided elaborate documentation, style guides, and assets.
Focused on clarity and precision, ensuring that every design decision was articulated in a way that developers could easily translate into code.
Conducted regular audits and evaluations to identify any deviations from established standards, making necessary adjustments to keep the design system cohesive.
Collaborated closely with cross-functional teams to address evolving user needs and technological advancements.
STRUCTURE
Building the design system.
Foundations
Basic elements to establish a visual identity and engaging user experience.
Colors
Elevations
Iconography
Logo
Layout
Spacing
Typography
Writing
Atoms
Reusable building blocks organized into six categories — actions, feedback, forms, graphics, way-finding, and status.
Actions
Accordion
Buttons
Dropdown
File Upload
Segmented Control
Toolbar
Feedback
Alerts
Badges
Confirmation Dialog
Modals
Notification Callout
Popover
Stepper
Toasts
Tooltips
Forms
Checkbox
Date-picker
Input
Radio
Slider
Toggle
Graphics
Avatar
Divider
Map
Metrics
Rating
Wayfinding
Breadcrumb
Carousel
Drawer
Tabs
Tree
Status
Loader Spinner
Progress Indicator
Tags
Timeline
Molecules
Groups of atoms functioning together as a unit.
Card Layout
Chart
Filter & Sort
Form
Header
Navigation
Pagination
Search
Table
IDEATION
Design considerations for the design system.
Sharp Edge
Sharp edges often convey a sense of precision, modernity, and clarity. Although, these objects with sharp edges may be perceived as sleek and high-tech they can also evoke a feeling of severity, depending on the context.
Beveled Edge
Beveled edges strike a balance between sharpness and softness. We went ahead with this as they are also perceived as more inviting than sharp edges, as they reduce the severity of the corners which fit perfectly for enterprise systems.
Rounded Edge
Rounded edges are associated with softness, approachability, and a friendly aesthetic. They can create a more comforting and ergonomic feel. Often used for items that people frequently touch, promoting a sense of safety and comfort.
documentation
Anatomy
The fundamental structure and elements of a design system component.
Types
Shows the variants of the same component.
States
Explains the different states that are needed for the component.
Additional Information
Any other supplementary insight that is needed for a particular component to aid the user.
How did we document components?
Serving as the compass that guides both designers and developers through the intricate landscape of consistent and cohesive user experiences, documentation is a necessary phase in a design system. We created a comprehensive documentation that outlined the intricacies involved for the components.
Additionally, it also helped us to improve and evolve the realm of design system.
Design SYSTEM DESIGN
Outcome
What was the impact of a design system?
“Uniformity in the visual elements of the product and brand.”
“Accelerated development and faster adaptation to changing user needs.”
“Shared patterns and guidelines facilitate smoother collaboration.”
Learnings
Key takeaways.
Building a design system is a multifaceted process that helped me meticulously examine and understand a product's visual and interaction patterns.
The creation of a design system showed the importance of scalability and adaptability and the need for a flexible framework. Documenting a design system transcends a singular project — it instills a culture that values consistency and collaboration.