Cluey Bricks Design System

Employer: Cluey Learning
Role: Product Design Lead

Consistent, efficient and effective design fragments which make up the experiences to ensure Cluey's product design principles are made manifest.

Purpose

The Cluey Bricks Design System was initiated as part of the new website design. The project enabled new merchandising, discovery and enrolment flows for customer acquisition, and was also an opportunity for Cluey Learning to re-imagine its brand and tone of voice. By collaborating with the branding and creative direction teams to ensure the new direction of digital properties better reflected Cluey's personality, the design system began to take shape. Not just to standardise interface artefacts but to manifest the principles which were defined to ensure all product experiences felt "Cluey".

Beyond the website, the Cluey Bricks Design System would need to adapt to more design consideration and consider use cases in both the customer management environments and the Cluey Learning platform, each with a variety of different use-cases and different parts of the customer journey to support.

The Cluey Bricks Design System documents rules and guidelines, giving examples of acceptable and unacceptable uses of a variety of different atomic elements. The system provides a variety of elements and flexibility to create new components and flows efficiently, but also ensure Cluey digital experiences and product design concepts innately adhere to the guiding principles of Cluey product design.

The design system extended to UX Writing rules, including guidelines which cover everything from addressing users, to displaying time and alternative text rules and form micro-copy are also documented.

Documenting the design system

Design systems ensure scalability of design work but must be made to scale. Documenting the rules and guidelines was important to allow designers and developers to reference and adhere to the requirements of the interface elements as well as understand the rationale behind them. The implementation via Sketch Libraries and Symbols ensured the efficiency of its use across teams and update management of its elements.

Grids

Creating experiences which are Receptive and Resilient (see Cluey Design Principles) is founded on Grid systems which enable harmonious and responsive layouts, ensuring experiences are optimised for use across a variety of screen sizes and circumstances.

Cluey Bricks grid documentation Cluey Bricks grid documentation

Palette

The Cluey Product palette serves two important needs; the high contrast Poppin' (see Cluey Design Principles) colours align with our experience principles but also acknowledge that customers have varying accessibility (a11y) needs, and may be partially or fully colour blind or otherwise visually impaired.

Cluey Bricks colour palette documentation Cluey Bricks colour palette documentation

Typography

Cluey experiences are Acuminate, Receptive and Resilient (see Cluey Design Principles). The Proxima font family (Soft and Nova) allows for the flexibility required for typography variety, accommodating everything from headlines to micro-copy without affecting legibility.

Cluey Bricks typography documentation Cluey Bricks typography documentation

Forms and Buttons

Cluey forms make it easy to understand the data being requested and minimise the potential for incorrect data entry. Cluey experiences are Encouraging (see Cluey Design Principles). Buttons are used to action important parts of the user’s journey, either in submitting information, or continuing their journey via calls to action.

Cluey Bricks form field documentation Cluey Bricks form field documentation Cluey Bricks button options documentation Cluey Bricks button options documentation

Headers, Frames, Tabs, Accordions and Modals

Giving prominence to important information and applying content hierarchy in responsive layouts can require visual framing and dividing. Panels, tabs, accodions and modal windows in various contexts allow for experiences to remain Acuminate (see Cluey Design Principles) and the use of tabs can help filter content, allowing users to make decisions or and explore options before committing to a decision.

Cluey Learning design exploration sketches Cluey Bricks panel option documentation

UX Writing

Consistancy and clarity within the use of language on an interface is just as important as its visual language. Therefore, a comprehensive guide for copywriting across Cluey digital touch-points accompanied the design system.

Cluey Learning UX Writing documentation UX Writing documentation for addressing users and formatting timestamps. Cluey Learning UX Writing documentation UX Writing documentation for form micro-copy, calls to action and glossary of terms.
LP logo

Lorenzo Princi
Software design leader—Product strategy and experience

↑