Redesigning Capichi’s app
Reading time: 5min.
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.
Goals of the project
The objective of this project was to redesign the app's UI/UX, beginning with the homepage and the search function. This decision was influenced by feedback from the marketing team and the product owner. The project was divided into several stages, starting with a research phase followed by an analysis phase. The design phase was split into two parts. Due to time constraints faced by other stakeholders, the testing was scheduled to take place after the release of the latest version of the product.
Date
2023
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 interviews and meetings were all held online with people in Vietnam. English language was mainly used.
Research
For this project, I wanted to conduct usability tests to confirm the stakeholders' hunches and uncover any problems within the app experience. Since usability tests had not been conducted before, I also decided to begin the sessions with user interviews.
These interviews aimed to gain a better understanding of our users, their goals, contexts, and behaviors.
To find suitable users for our tests, we started by creating a screener that our internal team could use. With the assistance of a junior designer, I scheduled the sessions and prepared the script for the usability tests, along with the tasks to be accomplished within our product.
During the sessions, we recorded the interactions and took detailed notes, which were reviewed in the days following each session.
Analysis
Techniques used
To handle the qualitative data collected during the usability tests, I opted to use an affinity diagram and a customer journey map.
These techniques helped me organize the data effectively and identify areas that required improvement. Collaborating with the junior designer on the affinity diagram allowed for a fruitful exchange of ideas, leading to a more comprehensive outcome.
Results
Based on the results obtained from these two methods, we confirmed that the homepage and search function were the primary sources of friction for users in the process. Additionally, we identified other pain points that we shared with stakeholders. However, we made the decision to address these issues during another project.
Designing
User flows
Once the problems were properly identified, my next step was to create a new user flow for the home page and the search function. The goal was to restructure the app's experience by introducing a fresh flow for users interacting with both the home page and the search function. This phase also involved seeking approval from the stakeholders.
Sketching to wireframing
Given the time constraints in the startup, I utilized sketching as a quick and efficient way to generate ideas. These sketches served as the foundation for creating a series of wireframes for the home page, incorporating alternate design decisions that aligned with the desired outcome. After careful consideration, we selected two versions that we intend to blend together to create a final wireframe. This wireframe served as the basis for developing the ultimate design iteration.
Getting detailed
Since this project involved a redesign, the majority of the design library, including colors and typeface, had already been established. However, the usage was not completely fixed. To ensure consistency in the app's design, I created a quick set of components and fonts specifically tailored for the redesign. I utilized these resources to develop the final design for the homepage and the search function, incorporating the established design elements while ensuring a cohesive and consistent visual experience.
Making the content
As I was working alone on the project, I also designed the different icons and images that will be used throughout the app, such as the food categories or different sections. Illustrations were found through stock images and then reworked to match the overall aesthetics of the app and the brand.
Prototyping & Handover
Prototyping
To help validating and sharing the new design alongside all stakeholders, we’ve decided to make a high-fidelity prototype of the new pages. This was done in Figma. It was also a good way to share the ideas of the final look and feel with the development team. You can check the prototype here:
Prototype
Handing the design over
To facilitate a smooth handover, I took care to prepare detailed design annotations for each state and interaction. These annotations aimed to provide as much information as possible. Since we have an internal development team within our startup, communication between the design and development teams occurred frequently. After the initial version of the new design was completed, I provided a second round of annotations to further assist in achieving the final product.
To conclude
The app was then released to the users and the first reactions were really good. Now we need to prepare the second part of the redesign which consists of the other pages and functions.
Download the app here
Next steps
After the app is fully done and released to the public, the plan is to do a new round of testing through more usability tests to get users feedback and experience on the new product and see if we solved the initial problems, if more pain-points are uncovered, we will work more to make the Capichi Delivery app a better product.
What would I do differently
Given the opportunity, I would like to gather additional user feedback through various techniques, such as conducting surveys or conducting more usability testing. By doing so, we can gather even richer data to make more informed decisions. Additionally, this wealth of data can be instrumental in persuading stakeholders who were unable to participate in the initial research phase.
