Spotwork Design System - Currie
Foundation
Brand identity
Design principles
Consistency: Uniformity was given a strong emphasis in visual and interaction patterns across the design system. This is so that all products have a unified look and feel, which helps build brand identity and improve user experience. Additionally, it improves communication between designers and developers, as well as product scaling in the future.
UI elements
Components
Buttons: Two sizes of buttons were created with styles for different states (default, hover, active, disabled) and types (primary, secondary, tertiary, destructive, warning). Within the button itself is the ability to add icons as well.
Layout
Grid System and responsive design: A 12 column grid was used to define the layout grid, with breakpoints to allow for ease of viewing on different screen sizes so that the designs adjust themselves accordingly.
Navigation
Menus: A side bar menu was implemented for main navigation, while segmented controls are used for tabs when switching between contexts on a page.
Design tools
Sign up screens
Status messages
Sign in screens
Forms
Cards
As part of the Spotwork rebrand and web application design revamp, a new design system was created with a modern look and feel. The goal for this project was to improve usability, and accelerate the design-to-development handoff.
Before beginning the project, user research was conducted along with journey mapping in order to analyze feedback and identify key pain points in the current design system.
By using a comprehensive set of guidelines, reusable components and standardized UI elements that ensures consistency in design, this will help future designers at Spotwork to create cohesive user experiences so that the designs can be streamlined and completed more efficiently.
Throughout this process, I led the design and development of core UI components to establish the design principles and documentation.
Example screenshots
Dashboard
Settings page
Tabs and tab cards
Data tables
Design Software and prototyping: The entire design system was created in Figma, as it allows for ease of maintaining design assets. Prototyping was also done in Figma using their new prototyping features to demonstrate component usage and interactions.
Icons
Accessibility: Color combinations were checked against each other for accessibility standards using WCAG to ensure usability for all users.
Forms: Input fields, checkboxes, radio buttons, select dropdowns, and validation states were created with different states to let the user know the status of their input, whether it be success, error or warning.
Flexibility: Using the atomic design methodology, the UI elements allow for adaptability in different contexts without compromising the core design principles. Building up from atoms to molecules to organisms.
Modals & Dialogs: Overlays are used to draw the user’s attention to important information, we made sure to create these with concise details and ease of understanding. They are used in places where we want users to confirm or delete items, and to provide more context in areas where more information may be needed.
Tools & resources
Project length
May 2023 - June 2024
Roles
Research, UI/UX Design
Data visualization
Logo: As this is the first iteration of the new design system, we did not define a dark theme. In all situations the Spotwork logo will be shown in black text with a blue dot at the end.
Color Palette: For the color scheme, we expanded from the predefined Spotwork blue and added colors that complimented it. Additional colors and their respective shades were also used for success, warning and error states. This was all done while maintaining usage guidelines and accessibility considerations.
Typography: Poppins was used for body text as it is easy to read given its geometric structure even at smaller sizes, due to it being optimized for web use. Additionally, it has minimalistic appearance and blends well with other fonts. For anything titles related, Manrope was chosen as it gives off a bolder appearance. Its sans-serif qualities sets it apart as it is balanced and distinctive, which lends it to be more eye catching for title use.