Projects
SwissBorg is a digital wealth management app that aims to make crypto investing fun, fair, and accessible. The SwissBorg website, crucial for user acquisition and conversion, faced performance and security issues due to external hosting. To address this, the team decided to migrate and host the website internally. The existing site had a low performance score of 20, far below the desired 90. Leveraging this migration, I initiated a comprehensive design audit and revamp, resulting in the creation of the SwissBorg Web Design System. This aimed to boost performance, targeting an average score of 90 or higher.
I collaborated closely with the Chief of Growth, Website Product Manager, Product Design Head, and Web Developer to plan, research, and execute this revamp. While back-end development had begun months earlier in anticipation of the full website migration, I initiated comprehensive workshops with the marketing team and stakeholders to audit the existing website, identify areas for improvement, and prioritize tasks. Due to limited resources, we decided to launch an MVP version, finalizing a new website architecture, sitemap, and a list of critical UI/UX issues to address.
The old website was created in haste without any unifying principles or system. The file was disorganised and difficult to use for the internal team making the work flow inefficient and slow.
To kickstart the UI development phase, I tailored design tokens from the existing global system to ensure brand cohesion and consistency. By establishing clear foundational elements, I created a sustainable framework for future expansion. Prioritizing simplicity, I eliminated redundant elements and focused on essential components, refining the color palette to 28 variations and 14 unique hex codes. I designed key components such as buttons, links, and forms according to the new palette and standardized their states. Collaborating with the front-end engineer, we established a naming system for styles and components to ensure clarity and efficiency. Additionally, I worked with other designers to standardize icons and illustration styles, reinforcing brand identity across all platforms.
I developed new components, updated the styles and UX of existing ones, and ported reusable components from the app to the website. I prototyped and conducted internal testing with the team before pushing changes to production. The new components were also updated in Figma, organised, and categorised to enhance the component library’s usability, making them easier for other designers to find and use.
The design system revamp led to improved consistency and cohesion across main pages, ensuring easy navigation and clear calls to action. It optimised mobile performance with faster loading times and enabled agile creation and iteration, allowing for quick testing and overall enhanced website performance.
The revamp led to a 245% increase in the general performance score, a substantial improvement even though we didn't hit our target of 90 or higher. The MVP design system played a key role in this progress. With a solid framework now in place, the team is well-equipped to build a more robust system and iterate faster, further enhancing the website’s functionality and user experience.
