Rapid Website Redesign With Design-To-Code Tools

Client

The Cardano Foundation is an independent, Swiss-based not-for-profit organization tasked with advancing Cardano as a public digital infrastructure across a wide range of industries, users, and use cases.

Challenge

The client needed to enhance its digital presence and create a more user-friendly, visually appealing website to better represent its mission and growing influence in the blockchain space.

The key objectives for the redesign were:

• Developing a modern, engaging, and intuitive frontend for the website

• Ensuring seamless navigation and clear communication for users, enterprises, and the broader blockchain community
• Designing the website in alignment with the Cardano Foundation's innovative and tech-forward ethos
• Improving site performance and user engagement through better UI/UX design

The team worked closely with the Cardano Foundation’s internal team to align the frontend with their existing backend systems, ensuring a cooperative and efficient integration.

We began with a kick-off and planning. This allowed us to gain a better understanding of the client's needs, review their goals for the website, and align on the project scope. Our design team then worked on crafting a visually appealing and functional layout during the design phase. The goal was to ensure Cardano’s blockchain ethos was reflected in every detail, from the color scheme to navigation design.

We utilized Locofy for parts of the frontend development. Locofy is a design-to-code platform that converts Figma and Adobe XD designs into production-ready front-end code. By streamlining this process, Locofy enabled the rapid delivery of key web components, contributing to a 24% increase in sessions, a 54% boost in event count, and a 24% rise in events per session.

Through a collaborative process, we fine-tuned the site’s functionality and user interface, ensuring optimal performance and ease of use.

Technology stack

• Locofy: Used to speed up the development of web components, allowing for fast prototyping and efficient frontend creation
• Tailwind CSS: Chosen for its utility-first approach, helping to quickly apply consistent styling across the site
• TypeScript: Used to ensure the code's reliability and maintainability by adding strong typing to the JavaScript

Results

• A more modern and user-friendly website that reflects the brand and its focus on blockchain technology
• A well-received improvement in site navigation and layout, ensuring a better user experience for visitors and potential partners.
• Streamlined performance, making the website more responsive and accessible on various devices.
• Organic traffic growth of the website redesign has proved better accessibility for its users.