Back
A design system to improve approachability and accessibility
CoinSpot is Australia's biggest cryptocurrency exchange, with over 2.5 million customers. I worked in a small team of designers and engineers to build a complete design system for the CoinSpot app.
The Problem
In recent years, CoinSpot's rapid growth has led to tech debt and issues, such as inconsistencies and accessibility problems affecting user experience and internal efficiency. Customer complaints and low app store ratings highlighted these problems. internally, the design and engineering teams faced confusion with when and how to use components.
Business Objectives
Elevate app ratings and enhance overall customer satisfaction.
Establish a unique presence in a crowded crypto trading app market.
Expedite design and development processes to streamline tech expenditure for future features.
Ideating on a solution to the business problems
Recognising the need for a more effective approach to design and development, we ideated on a solution. The objective was clear: eliminate inconsistencies, address accessibility concerns and instil harmony and uniformity in the CoinSpot design and development process.
A design system was the clear solution.
Setting ourselves up for success
To guide our collective efforts, I established a set of principles, to ensure we had a shared vision:
Improve Where Possible, Streamline Always:
The system should improve the current experience where applicable and make the experience easier for users.
Fluidity Over Rigidity:
The design system should be flexible enough to encourage exploration and creativity, whilst ensuring consistency platform wide.
Clarity & Efficiency:
The system should be built using clear and intentional design choices, to limit user decision fatigue and streamline design and development.
Auditing the platform to identify issues & requirements
Countless accessibility issues, including illegible type sizes and poor text contrast. The negative app reviews and customer feedback reinforced this point especially.
Inconsistent utilisation of styles and components, causing confusion for both designers and developers regarding their proper application.
Unclear navigation and page hierarchies, impacting user orientation within the app.
Our efforts yielded an exhaustive catalog of requirements, serving as our blueprint for constructing the design system.
Above: A comprehensive list of components needed, their requirements, use cases and more.
Setting up the foundations of the design system
Above: Some examples of the foundational styles set in the design system
Designing to be approachable for all skill levels
Being Australia's go to beginner-friendly crypto trader with older individuals and crypto newcomers occupying a large percentage of their user base, an interesting challenge was maintaining and improving the ease of use and simplicity of the CoinSpot app. To address this, we streamlined components, reduced interaction colours to guide users, and simplified call-to-actions to enhance the platform's user-friendliness and approachability.
Above: A before and after of the coin wallet screen, showing how interaction colours have been slightly adjusted and the treatment of buttons and button groups to reduce confusion and decision fatigue.
Construction in progress
Once our foundational elements were in place and component exploration had begun, we realigned with engineers to seek their technical feedback and align on the feasibility of our proposal. This allowed us to address potential roadblocks early before spending effort on component development in Figma.
Most components were built using base components, ensuring flexibility and easy editing. This approach allowed maximum flexibility and adaptation as the number of components, sizes, states, and colour modes grew (these days we have Figma variables for this!).
Above: Examples of how simple text inputs have been constructed using base components
To assist both current and future designers in creating consistent screens using these components, we integrated documentation directly into Figma. This approach not only maximised visibility but also ensured that documentation remained current and relevant.
Above: Screenshot of the documentation within Figma for Radio Button Groups
Above: Various screens of the CoinSpot app with the new design system applied.
Outcome
The final solution was a robust design system that emphasised CoinSpot's approachability by improving accessibility, consistency and usability. Unfortunately, due to privacy constraints set by CoinSpot, we couldn't access metrics to gauge the impact of our new design system. Nevertheless, the CoinSpot team considered the project a success for the following reasons:
Greater customer satisfaction: The app store rating jumped from an average of 3.2/5 stars to 4.8/5 stars, backed by nearly 20,000 user reviews.
Improved accessibility and usability: Users praised the improved accessibility and usability, especially when it came to text legibility and statistics (as these were common complaints previously).
More consistent designs for users and designers + devs: In terms of design and implementation, both designers and developers found it much easier to create consistent designs with clear component usage guidelines.
Learnings
Design to be as inclusive as possible: Whilst not a new learning, this project reinforced the importance of accessibility and designing for approachability by people of all skill levels.
Include documentation within Figma: Including documentation within Figma helps both designers and developers understand how components can be used and best practises without leaving view of the design.
Utilise semantic naming: Semantic naming in a design system allows designers and developers across teams to easily understand exactly how and where a style or component is to be used. This streamlines communication and reduces the reliance on heavy documentation.
Back
A design system to improve approachability and accessibility
CoinSpot is Australia's biggest cryptocurrency exchange, with over 2.5 million customers. I worked in a small team of designers and engineers to build a complete design system for the CoinSpot app.
The Problem
In recent years, CoinSpot's rapid growth has led to tech debt and issues, such as inconsistencies and accessibility problems affecting user experience and internal efficiency. Customer complaints and low app store ratings highlighted these problems. internally, the design and engineering teams faced confusion with when and how to use components.
Business Objectives
Elevate app ratings and enhance overall customer satisfaction.
Establish a unique presence in a crowded crypto trading app market.
Expedite design and development processes to streamline tech expenditure for future features.
Ideating on a solution to the business problems
Recognising the need for a more effective approach to design and development, we ideated on a solution. The objective was clear: eliminate inconsistencies, address accessibility concerns and instil harmony and uniformity in the CoinSpot design and development process.
A design system was the clear solution.
Setting ourselves up for success
To guide our collective efforts, I established a set of principles, to ensure we had a shared vision:
Improve Where Possible, Streamline Always:
The system should improve the current experience where applicable and make the experience easier for users.
Fluidity Over Rigidity:
The design system should be flexible enough to encourage exploration and creativity, whilst ensuring consistency platform wide.
Clarity & Efficiency:
The system should be built using clear and intentional design choices, to limit user decision fatigue and streamline design and development.
Auditing the platform to identify issues & requirements
Countless accessibility issues, including illegible type sizes and poor text contrast. The negative app reviews and customer feedback reinforced this point especially.
Inconsistent utilisation of styles and components, causing confusion for both designers and developers regarding their proper application.
Unclear navigation and page hierarchies, impacting user orientation within the app.
Our efforts yielded an exhaustive catalog of requirements, serving as our blueprint for constructing the design system.
Above: A comprehensive list of components needed, their requirements, use cases and more.
Setting up the foundations of the design system
Above: Some examples of the foundational styles set in the design system
Designing to be approachable for all skill levels
Being Australia's go to beginner-friendly crypto trader with older individuals and crypto newcomers occupying a large percentage of their user base, an interesting challenge was maintaining and improving the ease of use and simplicity of the CoinSpot app. To address this, we streamlined components, reduced interaction colours to guide users, and simplified call-to-actions to enhance the platform's user-friendliness and approachability.
Above: A before and after of the coin wallet screen, showing how interaction colours have been slightly adjusted and the treatment of buttons and button groups to reduce confusion and decision fatigue.
Construction in progress
Once our foundational elements were in place and component exploration had begun, we realigned with engineers to seek their technical feedback and align on the feasibility of our proposal. This allowed us to address potential roadblocks early before spending effort on component development in Figma.
Most components were built using base components, ensuring flexibility and easy editing. This approach allowed maximum flexibility and adaptation as the number of components, sizes, states, and colour modes grew (these days we have Figma variables for this!).
Above: Examples of how simple text inputs have been constructed using base components
To assist both current and future designers in creating consistent screens using these components, we integrated documentation directly into Figma. This approach not only maximised visibility but also ensured that documentation remained current and relevant.
Above: Screenshot of the documentation within Figma for Radio Button Groups
Above: Various screens of the CoinSpot app with the new design system applied.
Outcome
The final solution was a robust design system that emphasised CoinSpot's approachability by improving accessibility, consistency and usability. Unfortunately, due to privacy constraints set by CoinSpot, we couldn't access metrics to gauge the impact of our new design system. Nevertheless, the CoinSpot team considered the project a success for the following reasons:
Greater customer satisfaction: The app store rating jumped from an average of 3.2/5 stars to 4.8/5 stars, backed by nearly 20,000 user reviews.
Improved accessibility and usability: Users praised the improved accessibility and usability, especially when it came to text legibility and statistics (as these were common complaints previously).
More consistent designs for users and designers + devs: In terms of design and implementation, both designers and developers found it much easier to create consistent designs with clear component usage guidelines.
Learnings
Design to be as inclusive as possible: Whilst not a new learning, this project reinforced the importance of accessibility and designing for approachability by people of all skill levels.
Include documentation within Figma: Including documentation within Figma helps both designers and developers understand how components can be used and best practises without leaving view of the design.
Utilise semantic naming: Semantic naming in a design system allows designers and developers across teams to easily understand exactly how and where a style or component is to be used. This streamlines communication and reduces the reliance on heavy documentation.
Back
A design system to improve approachability and accessibility
CoinSpot is Australia's biggest cryptocurrency exchange, with over 2.5 million customers. I worked in a small team of designers and engineers to build a complete design system for the CoinSpot app.
The Problem
In recent years, CoinSpot's rapid growth has led to tech debt and issues, such as inconsistencies and accessibility problems affecting user experience and internal efficiency. Customer complaints and low app store ratings highlighted these problems. internally, the design and engineering teams faced confusion with when and how to use components.
Business Objectives
Elevate app ratings and enhance overall customer satisfaction.
Establish a unique presence in a crowded crypto trading app market.
Expedite design and development processes to streamline tech expenditure for future features.
Ideating on a solution to the business problems
Recognising the need for a more effective approach to design and development, we ideated on a solution. The objective was clear: eliminate inconsistencies, address accessibility concerns and instil harmony and uniformity in the CoinSpot design and development process.
A design system was the clear solution.
Setting ourselves up for success
To guide our collective efforts, I established a set of principles, to ensure we had a shared vision:
Improve Where Possible, Streamline Always:
The system should improve the current experience where applicable and make the experience easier for users.
Fluidity Over Rigidity:
The design system should be flexible enough to encourage exploration and creativity, whilst ensuring consistency platform wide.
Clarity & Efficiency:
The system should be built using clear and intentional design choices, to limit user decision fatigue and streamline design and development.
Auditing the platform to identify issues & requirements
Countless accessibility issues, including illegible type sizes and poor text contrast. The negative app reviews and customer feedback reinforced this point especially.
Inconsistent utilisation of styles and components, causing confusion for both designers and developers regarding their proper application.
Unclear navigation and page hierarchies, impacting user orientation within the app.
Our efforts yielded an exhaustive catalog of requirements, serving as our blueprint for constructing the design system.
Above: A comprehensive list of components needed, their requirements, use cases and more.
Setting up the foundations of the design system
Above: Some examples of the foundational styles set in the design system
Designing to be approachable for all skill levels
Being Australia's go to beginner-friendly crypto trader with older individuals and crypto newcomers occupying a large percentage of their user base, an interesting challenge was maintaining and improving the ease of use and simplicity of the CoinSpot app. To address this, we streamlined components, reduced interaction colours to guide users, and simplified call-to-actions to enhance the platform's user-friendliness and approachability.
Above: A before and after of the coin wallet screen, showing how interaction colours have been slightly adjusted and the treatment of buttons and button groups to reduce confusion and decision fatigue.
Construction in progress
Once our foundational elements were in place and component exploration had begun, we realigned with engineers to seek their technical feedback and align on the feasibility of our proposal. This allowed us to address potential roadblocks early before spending effort on component development in Figma.
Most components were built using base components, ensuring flexibility and easy editing. This approach allowed maximum flexibility and adaptation as the number of components, sizes, states, and colour modes grew (these days we have Figma variables for this!).
Above: Examples of how simple text inputs have been constructed using base components
To assist both current and future designers in creating consistent screens using these components, we integrated documentation directly into Figma. This approach not only maximised visibility but also ensured that documentation remained current and relevant.
Above: Screenshot of the documentation within Figma for Radio Button Groups
Above: Various screens of the CoinSpot app with the new design system applied.
Outcome
The final solution was a robust design system that emphasised CoinSpot's approachability by improving accessibility, consistency and usability. Unfortunately, due to privacy constraints set by CoinSpot, we couldn't access metrics to gauge the impact of our new design system. Nevertheless, the CoinSpot team considered the project a success for the following reasons:
Greater customer satisfaction: The app store rating jumped from an average of 3.2/5 stars to 4.8/5 stars, backed by nearly 20,000 user reviews.
Improved accessibility and usability: Users praised the improved accessibility and usability, especially when it came to text legibility and statistics (as these were common complaints previously).
More consistent designs for users and designers + devs: In terms of design and implementation, both designers and developers found it much easier to create consistent designs with clear component usage guidelines.
Learnings
Design to be as inclusive as possible: Whilst not a new learning, this project reinforced the importance of accessibility and designing for approachability by people of all skill levels.
Include documentation within Figma: Including documentation within Figma helps both designers and developers understand how components can be used and best practises without leaving view of the design.
Utilise semantic naming: Semantic naming in a design system allows designers and developers across teams to easily understand exactly how and where a style or component is to be used. This streamlines communication and reduces the reliance on heavy documentation.