New website with a design system
Reading time: 4min.
Introduction
Capichi is a tech startup company based in Southeast Asia. Their main product is Capichi Delivery, a food delivery app that allows users to order food, drinks and groceries through their smartphone and have it delivered to the location of their choice. Alongside that app they have a website that serves the same purpose as the app. This project focuses on its redesign.
Goals of the project
The objective of this project was to redesign the website. The traffic and conversion rate on the website were not satisfying and the UI/UX was outdated. The goal was to give a fresh new look to drive more traffic and promote further the website through digital marketing. We aimed to enhance the overall site experience by considering the users first.
Date
2023-2024 (3 months)
My role
I have worked on this project as full-time product designer for the company. I got to work alongside the Product Owner, the CMO and the Head of Development. I planned the steps and organised the development of the project within the deadline given.
Location
I have worked remotely on this project, the company being based in Vietnam and myself being in France. The meetings were all held online. English language was mainly used alongside Vietnamese.
Preparing and early stages
The project began by overviewing and analyzing the previous website that was online for a few years. Traffic wasn’t high and the number of orders was not evolving. We listed the needed pages and worked on a new user flow. Once approved we moved on wireframing the main pages and then all the secondary pages. We worked in a way to confirm each steps and make sure we limit risks of losing time and effort over uncertain decisions.
Building a design system
Colors
The first part of the library is the color palette. To create consistency and balance they have carefully selected to match each others tints and shades. To keep the website simple and match the brand, one primary color only was made.
Typography
”Inter” font family was selected for its clarity and readability. As many users are internationals on the website, we needed a clear font. All sizes were after carefully selected following a 1.333 scale.
Icons
Icons were designed and/or modified proposing the right icons to illustrate concepts, ideas or actions. Each had filled, sharp and normal versions, that are all scalable easily as they don’t have strokes.
Grids & Spacing
To apply consistent spaces and make sure the design is equally proportionned, a set of spaces and grids were prepared using Figma’s tokens and grid styles functions.
Shadows
A set of outer and inner shadows were prepared to be used on various elements of the library and the website. All of them were made using combinations of layered shadows and blur to give more depth to them.
Components
Based on all the elements from the above, a library of components alongside their rules of usage were crafted. Variants were made with easy to use, practical properties from Figma. They were then adapted from desktop sizes to mobile sizes.
Designing the website
A collaborative process
Collaboration was key to the success of the website design. Working closely with the project manager and the head of the development team, we ensured that every aspect of the site was meticulously planned and executed. Regular meetings facilitated open communication, allowing us to address challenges swiftly and adapt to evolving project needs. This teamwork ensured that the website not only met the initial requirements but also exceeded expectations, providing a seamless experience for users.
Using the design system
The design system played a crucial role in the project. By crafting a comprehensive design library, we maintained consistency across all pages and components. This system streamlined the design process, enabling us to quickly adapt elements as needed. It was instrumental in aligning the visual identity of the brand with the functional requirements of the website, ensuring a cohesive and engaging user experience that facilitated user interaction and satisfaction.
Details matters
Attention to detail was paramount in this project. Every element, from typography to button placement, was carefully considered to enhance the user experience. We focused on the nuances that contribute to a polished and intuitive interface, ensuring that each interaction was optimized. This meticulous approach not only improved the overall aesthetic but also significantly impacted usability, making the final product both visually appealing and highly functional.
Responsive is a must
Ensuring a responsive design was a top priority. The website was meticulously crafted to adapt seamlessly across mobile and tablet devices, providing an optimal experience for users regardless of screen size. We utilized fluid grids and flexible images to ensure that the layout remained consistent and visually appealing. This approach not only improved accessibility but also significantly enhanced user engagement, catering to the growing number of mobile and tablet users.
To conclude
The release of the website marked a significant milestone, with performance metrics exceeding expectations. Online orders doubled, and daily traffic increased substantially. Feedback from users has been overwhelmingly positive, with many enjoying the enhanced experience compared to the previous version. The number of orders continues to climb, reflecting the success of our efforts.
Next steps
We are committed to continuous improvement, with ongoing monitoring and adjustments based on data and user feedback. A round of UX interviews is planned to gather qualitative insights and test specific website functionalities, ensuring we meet user needs effectively.
What would I do differently
Looking back, I would explore more efficient methods for creating the design library and planning its components. However, I am proud of the work accomplished and the positive impact it has had.
Visit the website here to see it live.
