TotallyMoneys Icons Redesign
Role / Services
UI design
Role / Services
UI design
Role / Services
UI design
Year
2022
Year
2022
Year
2022
Details
A complete redesign of TotallyMoney’s core product icons, crafted to improve clarity, consistency, and scalability across their web and native app platforms. The new icons align with the company’s future vision, making the interface more user-friendly while addressing scaling issues that hindered smaller screen usability.
Redesign significance
Icons are essential in guiding users through the TotallyMoney platform. The existing 1px stroke icons, originally built for CRM, failed to scale effectively across mobile devices, leading to poor legibility and inconsistent user experience. By refining the iconography, we improved product clarity and created a more cohesive design language.
Identifying the Issues
The old icon set struggled with:
• Poor scalability at smaller sizes (especially 24x24)
• Inconsistent stroke weights leading to uneven visuals
• Complex designs that didn’t translate well across all screen sizes
The 'Car Finance' icon at 24x24 pixels became almost unrecognisable, a key example of why change was essential.
Details
A complete redesign of TotallyMoney’s core product icons, crafted to improve clarity, consistency, and scalability across their web and native app platforms. The new icons align with the company’s future vision, making the interface more user-friendly while addressing scaling issues that hindered smaller screen usability.
The Redesign Process
I began by analysing the existing set in Illustrator, focusing on simplifying the designs while maintaining recognisability. Using a grid system, I created clean, cohesive shapes with a 1.5px stroke weight for improved legibility.
The design process involved:
• Conducting competitor research to align with industry standards
• Applying the KISS principle (Keep It Simple, Stupid) for instant recognisability
• Using icon grids to maintain consistent spacing and proportions
Redesign significance
Icons are essential in guiding users through the TotallyMoney platform. The existing 1px stroke icons, originally built for CRM, failed to scale effectively across mobile devices, leading to poor legibility and inconsistent user experience. By refining the iconography, we improved product clarity and created a more cohesive design language.
Final Outcome
The updated icon set is simple, modern, and highly functional. Reduced complexity ensures legibility at all sizes, while the cohesive visual language strengthens the overall UI. Each icon effectively communicates its purpose, enhancing navigation and the user experience.
Identifying the Issues
The old icon set struggled with:
• Poor scalability at smaller sizes (especially 24x24)
• Inconsistent stroke weights leading to uneven visuals
• Complex designs that didn’t translate well across all screen sizes
The 'Car Finance' icon at 24x24 pixels became almost unrecognisable, a key example of why change was essential.
The Redesign Process
I began by analysing the existing set in Illustrator, focusing on simplifying the designs while maintaining recognisability. Using a grid system, I created clean, cohesive shapes with a 1.5px stroke weight for improved legibility.
The design process involved:
• Conducting competitor research to align with industry standards
• Applying the KISS principle (Keep It Simple, Stupid) for instant recognisability
• Using icon grids to maintain consistent spacing and proportions
Final Outcome
The updated icon set is simple, modern, and highly functional. Reduced complexity ensures legibility at all sizes, while the cohesive visual language strengthens the overall UI. Each icon effectively communicates its purpose, enhancing navigation and the user experience.
Before & After (Full Collection)
Before & After (Full Collection)
