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
TEAM
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
Turf is one of the largest home construction and real estate companies in the USA, specializing in building residential communities. It offers homebuying, mortgage, and title services.
CONTEXT
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. A clearly defined design system with supporting tools helps designers avoid wasting time “pushing pixels” and frees them to focus on identifying such patterns and designing for positive business impacts.
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.“
PROCESS
Strategizing the roadmap.
1
Audit
Identified that there were multiple products that were made by different teams who had built their own mini libraries and in some instances the product had two different looking components doing the exact same task.
Included conducting in-depth assessments of design elements and scrutinizing existing product experiences.
2
Establish
Defined the visual language that would shape a homogenous user experience across all products and services within the Lennar organisation.
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.
3
Design
Created a complete list of components needed for the digital products. Shaped the visual and interactive elements that define our user interface.
Ensured it not only met the functional requirements but also elevated the overall user experience with a cohesive and visually engaging interface.
4
Hand-off
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.
5
Govern
Collaborated closely with cross-functional teams to address evolving user needs and technological advancements.
Conducted regular audits and evaluations to identify any deviations from established standards, making necessary adjustments to keep the design system cohesive.
STRUCTURE
Building the design system.
We created a library that focused on the basics, such as typography, color, grid, and iconography, plus essential elements like buttons, lists, and controls. Today it has become the UI framework for all of Turf's products.
The Turf Design System supports their designers with this robust set of basic elements while letting them freely explore. It’s the first piece of the puzzle, integrated with designers’ natural workflow, not something they check their work against at the end and should help them design faster while maintaining high standards and consistency.
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, and Toolbar
Feedback
Alerts, Badges, Confirmation Dialog, Modals, Notification Callout, Popover, Stepper, Toasts, and Tooltips
Forms
Checkbox, Date-picker, Input, Radio, Slider, and Toggle
Graphics
Avatar, Divider, Map, Metrics, and Rating
Wayfinding
Breadcrumb, Carousel, Drawer, Tabs, and Tree
Status
Loader Spinner, Progress Indicator, Tags, andTimeline
Molecules
Groups of atoms functioning together as a unit.
Card Layout
Chart
Filter & Sort
Form
Header
Navigation
Pagination
Search
Table
Deliverable
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.
Visual library of the design system.
Section Heading
Item Level 1 (Closed)
Item Level 2 (Closed)
Item Level 2
Item Level 2
Item Level 1 (Open)
Item Level 1
Section Heading
Item Level 1 (Closed)
Item Level 1
Sub-head
Title
999+
Success
Tag
Breadcrumb 1
/
Breadcrumb 2
/
Current Page
Button
Button
Unassign user
Are you sure you want to unassign the following user?
Cancel
Unassign
Label
mm/dd/yyyy
3
2
1
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
31
30
S
F
T
W
T
M
S
November 2022
11/19/2022, 19:30:32
11/18/2022, 07:30:32
Activity title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Joe Doe
JD
Activity title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Joe Doe
JD
Label
Choose an option
Helper text goes here
Drag and drop or
select a file
to upload.
File types supported: .pdf, .xlsx
Filename
(1.5MB)
Active Communities
September 2022
48
10%
vs last month
View Report
Notifications
1
Joe D. sent you a message.
Today at 2:36 PM PST
Reply
Joe D. tagged you in a comment.
Today at 2:36 PM PST
Reply
Image Pin
Status Pin
Control 1
Control 2
Control 3
75
0
100
Toasts communicate messages
Action
Label
Helper text
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
Cell
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
$ 3,000,000
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.