Web APP
SMACC - Accounting software
SMACC is streamlining financial and accounting tracking software with Real-Time monitoring of Incoming Invoice Processes.
Design System
Scope
- Branding and Visual Identity
- User Interface (UI) Components
- Layout and Grid System
- Design Tokens
- Documentation and Guidelines
- Developer Integration
my role
- Develop a strategy and roadmap for the design system implementation
- Directed the creation and evolution of the design system components, guidelines, and documentation
- Create and maintain design system repository update and accessibility.
- Conduct regular audits and reviews to ensure consistency and usability.
- Conduct user research and usability testing to validate and refine design system components and patterns.
ABOUT PROJECT
The Hyboard – Is a Standardised Design Package: An Assortment of Adaptable UI Components, Design Patterns, and Standards, Crafted to Elevate the Consistency and Quality of Digital Products.
THE CHALLENGE AND OBJECTIVE
Starting a new project can be invigorating as it offers a clean slate to let imagination soar. However, when multiple designers are collaborating on a product, and deadlines are fast approaching, having a harmonised system that offers tried and tested components and patterns can be beneficial.
This helps prevent duplication of effort, allowing designers and developers to tackle more complex issues and create superior work.
The front-end team at Hypatos originally created a limited component library to construct Studio for Hypatos brands. However, as the company expanded and multiple delivery teams utilized these components for various clients, the components became fragmented and resulted in inconsistent and hard-to-manage products with varying features and behaviours.
To resolve this issue, our team suggested the Atomic Design System as the most efficient solution to organize and distribute designs, code, and usage instructions. This could then be expanded to other Hypatos products.
QUESTIONS?
- What is the most effective way to establish a single authoritative source for all current Hypatos components?
- What measures can we implement to guarantee quality and uniformity across all products?
- How can we increase efficiency and productivity for designers and developers?
COLLECTING INFORMATION
Designers expressed frustration with the inefficiency of repeatedly designing common patterns without proper visibility of existing reusable components. Developers also noted that constructing and maintaining different patterns for each team was a time-consuming process. Both groups found it challenging to determine the correct Adobe file to use, as naming was consuming, and the absence of shared terminology often resulted in misunderstandings about breakpoints and functionality.
DESIGN PROCESS
- We start with conducting a design audit.
- Assess the value of a design system.
- Research other departments, including the VP, CTO, and Product lead
- We identify the most necessary components and begin the building process.
- We define naming guidelines before creating design tokens and ensure the guidelines are clear and understandable. (Naming protocols)
- We provide design specifications, documentation, and guidelines on how to use a particular component
- Last but not least, as design needs to be accessible to as many people as possible, we consider design accessibility as well.
DESIGN APPROACH & TOOLS
To figure out the best way to tackle this process, I conducted workshops with the teams to determine the technologies and tools that could improve our workflow, grid, breakpoint utilization, developer handover process, etc.
After exploring other alternatives, we opted to stick with Adobe XD for the UI kit. We had identified significant issues, such as symbol duplications and file versioning, which could be resolved by incorporating Abstract and shared component libraries into our workflow.
The resulting library is fully customizable for new different Hypatos projects. It utilizes shared color, layer, and typography styles for easy and efficient customization, similar to how they would be updated in CSS.
STANDARDIZED DESIGN LANGUAGE
We initiated the process by categorizing elements into Atoms, Molecules, Organisms, Templates, and Pages, as the Atomic design methodology was already familiar to the team. Additionally, the adoption of React as the JavaScript library by the development team also facilitated our alignment, as we all approached the project with the idea of constructing intricate interfaces using smaller building blocks.
Next, we conducted user testing of this grouping with external designers and product owners to guarantee a seamless handover for any team taking on a new project.
We gave each user a list of components of varying complexities (e.g. button, header, data extraction, data points, etc.) and asked them where they would anticipate finding these.
Our categorizations were not as intuitive as we initially thought when differentiating between molecules and organisms.
We experimented with a different grouping system based on the terminology already utilized within the company. Styles included typography, colors, and grids, while elements included atoms, molecules, and smaller organisms.
Larger organisms were placed under the category of components. Data Cards had their separate section, as did all elements related to a document extraction.
This terminology update received positive feedback from stakeholders, and I would have liked to have refined it further with the engineering team’s participation.
DOCUMENTATION
Well-written documentation outlines and communicates the visual design, user experience, engineering principles, and a standard design, development, and feature governance process. This helps internal and external teams to efficiently adopt the platform and work together harmoniously.
HyBoard was designed to be customisable, offering multiple variations of each component to ensure a streamlined and clean library. Designers can remove any version that does not align with their brand. The UI kit includes clear explanations for design decisions to help designers understand their reasoning. It’s important to highlight what is fixed and the potential consequences of changing certain aspects, as everyone has their approach to work and shortcuts.
The engineering lead and I collaborated with a technical writer to ensure all documentation was comprehensive and easy to understand. The design system’s homepage provides two access points, one each for designers and developers. These guidelines have been designed to be concise and relevant to the target audience.
FINAL OUTCOME
- The Hyboard design system combined the XD UI kit, React components, design principles, development values, and usage guidelines for the Atomic partner’s web platforms, resulting in consistent experience, accessibility, and performance standards for all new products.
- The system’s initial launch revealed a significant improvement in page-building time for developers, with a decrease of 75%.
- This also reduced the time it took for our designers to wireframe a partners responsive dashboards from a week to just half a day. By adopting the Hyboard design system, the team was able to quickly prototype new features, streamline the onboarding process for new designers and developers, and hasten the handover process.
Next Case study