2017
10 Months
Co-Founder & Product Designer
Product Management & End to end UI/UX design
KAPI is a mobile app that makes it easy for people to find the perfect cafe for their needs. With KAPI, users can quickly locate their nearest and most preferred cafes using a custom map. The app also includes a versatile filter that allows users to narrow down their search results to find exactly what they're looking for.
In Taiwan, cafes are a popular destination for many different purposes. From reading and working to hanging out with friends, there are many unique cafes in the country that offer a range of experiences.
As a result, cafes have become an integral part of the culture in Taiwan. However, finding the right cafe for your needs can be a challenge. Often, people will search for cafes online using keywords, but this can result in a overwhelming number of options.
This is where KAPI comes in. KAPI is a mobile app that makes it easy for people in Taiwan to find the perfect cafe for their needs, allowing them to discover special cafes and enjoy the unique atmosphere that they offer.
Many types of cafe around the city, people can always find the good one that fits their personality and needs.
As a small team of just myself and one Android developer, we wanted to move quickly and get user feedback on our prototype before launching the product. To do this, we designed features based on our assumptions and used data to inform our design iterations. I worked closely with the developers to make sure our goals were clear and that every detail of the product was carefully thought out. By taking this approach, we were able to move faster and improve our product based on real user feedback.
Before starting the project, we conducted a survey and interviews with potential users to understand their basic needs for a cafe-finding app. We surveyed 268 people and found that the results showed the following:
38%
Using laptop at Cafe
46%
Once a week
82%
Wifi is important
Insight
Many people had hard time when they looked for a cafe that fits their needs.
Many people said they were tired of reading long blog posts about cafes and just wanted to quickly find the essential information.
I consolidated the research result and created three personas based on what we learned from the research. It helped the entire team better understanding who we're designing for and what would be the most important things we should focus on.
Josh is a senior student currently studying in business management, he likes to learn new knowledge, also had internship experience in different company. and wanted to be a cross-fields talent. He used to go to cafe for working on the class notes or taking the online courses at the weekend.
Lucas is a sales manager who is passionate and energetic. He's currently working in an e-commerce company. He is keen on his work and always wants to take care of his clients. He often goes to the cafe with his clients for business purposes.
Emily is a freelance designer, she has huge passion and continuous energy in Design. She believes she can get inspiration from her daily life, so she loves to talk to people and observe the interaction between people. She's also a coffee lover, she often takes her laptop and working in the different cafes 3 days per week.
When people search on Google, there are too many search results that could be overwhelming. People want to see the most important information at a glance then decide if they want to spend more time knowing more about the cafe.
The search results on google(blog, user reviews, photos) are usually unformatted which could be hard to digest in a short period of time. And it's also time-consuming to assess if the cafe is right for them.
Launch a simple Android app that helps people search & explore the cafe they like.
Allow people to search by certain criteria will help them easily find a suitable cafe based on their needs.
Browse cafes on the map will help people discover more cafes in their desired location.
Limited time
Since we only had two people when we started the project, we need to carefully prioritize our tasks in order to ship the product, we worked closely to make sure the most important things have been implemented.
API constraint
When we started the projects, we used the open-source API, which means we were not able to change or add the information due to the existing data structured. We decided to focus on the user-facing features and create our own database later on.
After I finished the information architecture, I started looking into the paper wireframe that allows me to visualize how each component and visual element should be positioned on the page. It also gave me a chance to think about information hierarchy that I can present the content and function in a more structured way. I had a bunch of discussions with the team and I iterated the wireframes to make it more concise and align with everybody's expectation.
Before I dig into visual design and creating page layout, I tried to figure out what would be the reasonable information architecture that users can easily find their way in the app.
After scoping out the features we would like to deliver for the first launch, I started working on the visual design and address the interaction detail. This MVP version is fairly simple and it only took us around two weeks to build it. We want to use this MVP to see how people would interact with it and gather more feedback to help us keep iterating on it. The core features for this release includes browsing on the map, search by keyword and filters, check the nearest cafe, as well as switch cities.
Nearest button
Over 70% of users click on the “nearest” button, which gave us a signal that people might want to find a cafe around them or they want to find a cafe immediately when they on the go. The data is based on 739 times click events.
Return users
Each user opens the app 2.6 times per day on average, and daily active users were growing gradually, which is not bad but there are definitely a lot of rooms to improve. How to increase user engagement would be our next big goal.
Stay time
This MVP only provide the basic information of the cafe, there are not many functions that users can interact with, as soon as people find the cafe they like, they will tend to leave the app. So we need to think about how can we provide more value to users of staying longer in our app.
We've built a filter function that allows people to search the cafe more effectively by filtering their preferred criteria. We also provided pre-set filters that users can quickly use and see the result.
Apart from map view, we've added the list view that provides users a different aspect to discover cafes, users can seamlessly navigate between map and list as they need. I also refined the UI for the cafe card to make it more readable and neat.
Another big part we focused on was building a community. We hope people can come to our product not only just for getting the cafe information, but also be a contributor that other people who love the cafe can be benefited. People can review, leave a comment of cafe they've visited, also upload the photo, even add a new one they discovered.
I believe a good product not only provides the good functionality but also a good experience, to ensure our users have a consistent experience throughout the app, I defined a basic design system to reinforce the consistency.
By building the design system that helped me think through every piece of component I created, it is necessary? how should we use it? Is the logic makes sense in the flow? Is the information hierarchy clear enough? This design system also bridged the gap between the engineer and me to have a smoother communication during the project.
Live demo
The core features MVP includes browsing on the map, search by keyword and filters, check the nearest cafe, as well as switch cities.
H-ifi Prototype
Next iteration offers stronger filters, list view, community-related functions, and a more integrated user interface and better user experience.
We also added the onboarding screens which when users first launch the app, we will show a series of feature highlights, that give users a quick overview of what can they do in this app.
By building this product from the idea to execution, I learned three most important things in the process:
1. Always think about user value: the product we deliver to people should be meaningful, that requires a deep understanding of what people really need and want.
2. The user experience shouldn't be sacrificed by MVP: We want to deliver a product faster doesn't necessarily mean we have to compromise user experience to speed up, users can wait for the new features in the next release, but they cannot bear the bad experience.
3. Solve real problems: We might have a lot of assumptions and ideas we want to build, but we should carefully validate those ideas in order to land on the right solution to solve the real problem.
We're working on redesigning the entire app to make it more friendly and usable.
Beyond Localization - A tailored job search experience for Japanese job seekers
READ CASE STUDY
TOP
