Background
Prior to Habitat and Prism, the development team would write new codes for each project. While this could be flexible for small projects, it has become unsustainable due to the need to update multiple platforms simultaneously.
Client
LegalVision
User
LV tech team
My role
Precedent study,
Documentation,
Visual design,
Interaction design
Date
2023 (2 mths)
Background
Prior to Habitat and Prism, the development team would write new codes for each project. While this could be flexible for small projects, it has become unsustainable due to the need to update multiple platforms simultaneously.
Client
LegalVision
User
LV tech team
My role
Precedent study,
Documentation,
Visual design,
Interaction design
Date
2023 (2 mths)
Background
Prior to Habitat and Prism, the development team would write new codes for each project. While this could be flexible for small projects, it has become unsustainable due to the need to update multiple platforms simultaneously.
Client
LegalVision
User
LV tech team
My role
Precedent study,
Documentation,
Visual design,
Interaction design
Date
2023 (2 mths)
Challenge
It is not good practice to build a design system without the context of products, because there are no problem to solve. As ‘Habitat’ and ‘Prism’ continue to be iterated, We have gained knowledge of various user scenarios. Now is the time.
Challenge
It is not good practice to build a design system without the context of products, because there are no problem to solve. As ‘Habitat’ and ‘Prism’ continue to be iterated, We have gained knowledge of various user scenarios. Now is the time.
Challenge
It is not good practice to build a design system without the context of products, because there are no problem to solve. As ‘Habitat’ and ‘Prism’ continue to be iterated, We have gained knowledge of various user scenarios. Now is the time.
The team agrees the LV design system should set up the standard and identity, ultimately facilitating our product development.
The team agrees the LV design system should set up the standard and identity, ultimately facilitating our product development.
The team agrees the LV design system should set up the standard and identity, ultimately facilitating our product development.
Principles
Start with a board vision
Considering all the products this system is going to support, the goals are really about enhancing lawyer productivity and fostering inclusive interactions with clients.
After studying many design systems of industry standard, I have concluded these are the guidelines for LegalVision:
Principles
Start with a board vision
Considering all the products this system is going to support, the goals are really about enhancing lawyer productivity and fostering inclusive interactions with clients.
After studying many design systems of industry standard, I have concluded these are the guidelines for LegalVision:
Principles
Start with a board vision
Considering all the products this system is going to support, the goals are really about enhancing lawyer productivity and fostering inclusive interactions with clients.
After studying many design systems of industry standard, I have concluded these are the guidelines for LegalVision:
Familiar
Comprehensive
Focused
Familiar
Comprehensive
Focused
Familiar
Comprehensive
Focused
Structure
Follow modular system like nature does
Atomic design advocated by design system consultant Brad Frost, is well-adapted in the industry. It claims that products can be assembled by chemical-like elements in sequence: Atoms, Molecules and Organisms, which transfers to the front end language as foundation, components, and patterns.
My aim is to keep the system broad enough to accommodate different scenarios, but not too rigid to stifle creativity.
Structure
Follow modular system like nature does
Atomic design advocated by design system consultant Brad Frost, is well-adapted in the industry. It claims that products can be assembled by chemical-like elements in sequence: Atoms, Molecules and Organisms, which transfers to the front end language as foundation, components, and patterns.
My aim is to keep the system broad enough to accommodate different scenarios, but not too rigid to stifle creativity.
Structure
Follow modular system like nature does
Atomic design advocated by design system consultant Brad Frost, is well-adapted in the industry. It claims that products can be assembled by chemical-like elements in sequence: Atoms, Molecules and Organisms, which transfers to the front end language as foundation, components, and patterns.
My aim is to keep the system broad enough to accommodate different scenarios, but not too rigid to stifle creativity.
Foundation
Foundation
Foundation
Grid
The 8pt grid is the most common standard, because the majority of screen sizes are multiples of 8. Elements scaled by this would fit most devices naturally. However, some of our products are interaction-heavy, we need a neater approach. This requires finer control for smaller components. So the system would be a mix of 8pt and 4pt grid.
Grid
The 8pt grid is the most common standard, because the majority of screen sizes are multiples of 8. Elements scaled by this would fit most devices naturally. However, some of our products are interaction-heavy, we need a neater approach. This requires finer control for smaller components. So the system would be a mix of 8pt and 4pt grid.
Grid
The 8pt grid is the most common standard, because the majority of screen sizes are multiples of 8. Elements scaled by this would fit most devices naturally. However, some of our products are interaction-heavy, we need a neater approach. This requires finer control for smaller components. So the system would be a mix of 8pt and 4pt grid.
Typography
I selected ‘Inter’ as the font family, because it is elegant, practical, and does not occupy much space compared to other fonts. The type scale almost follows the Major Third increment with some minor tweaks, it is distinctive enough without exaggerated transition on pages that might already be busy. Last but not the least, all line heights fit into 8pt or 4pt grid.
Typography
I selected ‘Inter’ as the font family, because it is elegant, practical, and does not occupy much space compared to other fonts. The type scale almost follows the Major Third increment with some minor tweaks, it is distinctive enough without exaggerated transition on pages that might already be busy. Last but not the least, all line heights fit into 8pt or 4pt grid.
Typography
I selected ‘Inter’ as the font family, because it is elegant, practical, and does not occupy much space compared to other fonts. The type scale almost follows the Major Third increment with some minor tweaks, it is distinctive enough without exaggerated transition on pages that might already be busy. Last but not the least, all line heights fit into 8pt or 4pt grid.
Colour
Dark teal and bright orange are the LegalVision brand colours. I picked dark teal as the base for better accessibility in complex interfaces, reserving orange for accent. To ensure compliance with WCAG AA standard, I specified the foreground static colour to be used with each background.
Colour
Dark teal and bright orange are the LegalVision brand colours. I picked dark teal as the base for better accessibility in complex interfaces, reserving orange for accent. To ensure compliance with WCAG AA standard, I specified the foreground static colour to be used with each background.
Colour
Dark teal and bright orange are the LegalVision brand colours. I picked dark teal as the base for better accessibility in complex interfaces, reserving orange for accent. To ensure compliance with WCAG AA standard, I specified the foreground static colour to be used with each background.
Components
Components
Components
Button
All buttons have round borders in this design system, the rest of the components are structured in rectangular frames. This should make the action stand out on any page. There are two sizes: small is the default in the body of products, while large is used in less interaction-heavy places like login page.
Button
All buttons have round borders in this design system, the rest of the components are structured in rectangular frames. This should make the action stand out on any page. There are two sizes: small is the default in the body of products, while large is used in less interaction-heavy places like login page.
Button
All buttons have round borders in this design system, the rest of the components are structured in rectangular frames. This should make the action stand out on any page. There are two sizes: small is the default in the body of products, while large is used in less interaction-heavy places like login page.
Input
To cater to users with low tech-savviness, input field designs are kept fairly standard. What I have focused on is creating the most common variants used in form, such as text, search, passwork, payment, single select, multiple select, date and time.
Input
To cater to users with low tech-savviness, input field designs are kept fairly standard. What I have focused on is creating the most common variants used in form, such as text, search, passwork, payment, single select, multiple select, date and time.
Input
To cater to users with low tech-savviness, input field designs are kept fairly standard. What I have focused on is creating the most common variants used in form, such as text, search, passwork, payment, single select, multiple select, date and time.
Patterns
Patterns
Patterns
Side navigation
Navigations all come in two forms: expanded and collapsed. This helps enlarge screen real estate for content body when it becomes too busy. On tablet and mobile devices, it transforms into the sticky bottom where three main pages and one primary action are displayed up front.
Side navigation
Navigations all come in two forms: expanded and collapsed. This helps enlarge screen real estate for content body when it becomes too busy. On tablet and mobile devices, it transforms into the sticky bottom where three main pages and one primary action are displayed up front.
Side navigation
Navigations all come in two forms: expanded and collapsed. This helps enlarge screen real estate for content body when it becomes too busy. On tablet and mobile devices, it transforms into the sticky bottom where three main pages and one primary action are displayed up front.
Results
Since the LV design system was utilised, we estimate it has reduced development time by at least 50%
LegalVision stakeholders recognise the design system update on the client-facing portal boosts customer retention
Far fewer clients have trouble with usability and require support to complete tasks
Results
Since the LV design system was utilised, we estimate it has reduced development time by at least 50%
LegalVision stakeholders recognise the design system update on the client-facing portal boosts customer retention
Far fewer clients have trouble with usability and require support to complete tasks
Results
Since the LV design system was utilised, we estimate it has reduced development time by at least 50%
LegalVision stakeholders recognise the design system update on the client-facing portal boosts customer retention
Far fewer clients have trouble with usability and require support to complete tasks
Learnings
Focus on small details and big picture
Building a design system is an interesting exercise. If you proceed without a clear plan, it is likely difficult to reach a desirable outcome. There are times we need context to understand the problem to solve, and there are also times we need to avoid distractions and just concentrate on the craft and pixels.
Well-thought foundation makes a big difference
During the process, I spent a disproportionate amount of time experimenting with setting up the foundation. Because small elements like font family and grey colour define the character of your product.
Learnings
Focus on small details and big picture
Building a design system is an interesting exercise. If you proceed without a clear plan, it is likely difficult to reach a desirable outcome. There are times we need context to understand the problem to solve, and there are also times we need to avoid distractions and just concentrate on the craft and pixels.
Well-thought foundation makes a big difference
During the process, I spent a disproportionate amount of time experimenting with setting up the foundation. Because small elements like font family and grey colour define the character of your product.
Learnings
Focus on small details and big picture
Building a design system is an interesting exercise. If you proceed without a clear plan, it is likely difficult to reach a desirable outcome. There are times we need context to understand the problem to solve, and there are also times we need to avoid distractions and just concentrate on the craft and pixels.
Well-thought foundation makes a big difference
During the process, I spent a disproportionate amount of time experimenting with setting up the foundation. Because small elements like font family and grey colour define the character of your product.
NEXT PROJECT
LET'S CONNECT
ON SITE
OFF SITE
@2024 Max Zheng. All rights reserved.
NEXT PROJECT
LET'S CONNECT
ON SITE
OFF SITE
@2024 Max Zheng. All rights reserved.
NEXT PROJECT
LET'S CONNECT
ON SITE
OFF SITE
@2024 Max Zheng. All rights reserved.