UI/UX Design


KAPI App: Discover your favorite cafe


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.

Design Process

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.

User Study

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:


Using laptop at Cafe


Once a week


Wifi is important


It’s inefficient to find a right cafe.

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 | 19 years old | Student


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 | 25 years old | Salesman


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 | 29yr years old | Freelance Designer


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.

Problem & Goal

Google search is overwhelming, it’s hard to filter out the key information that they need.

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.

There’s no easy way to assess if the cafe is a right one for me.

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.

Challenges & Constraints

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.

Paper Sketch & Wireframe

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.

Information Architecture

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.

A few months later after released MVP, we learned...

Nearest button

70% click/session

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

2.6 times/day

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

4 minutes/average

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.

Design Iterations

These are design refinements based on the data and feedback.
The more powerful filters

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.

A new list view for all your needs

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.

Cafe community

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.

Design System

Consistent & reusable design components

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.

Next Iteration

H-ifi Prototype

Next iteration offers stronger filters, list view, community-related functions, and a more integrated user interface and better user experience.

Onboarding Flow

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.

Page Showcase

Learning & Takeaway

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.

Next Project

Beyond Localization - A tailored job search experience for Japanese job seekers

Back to homepage



User Research