2017
10 Months
Co-Founder & Product Designer
Product Management & End to end UI/UX design
KAPI is a mobile application that helps people find a cafe that meets their needs in an easy and effective way. In KAPI, users can find the nearest & preferred cafe very quickly through the custom map, we also provide a versatile filter to help the user to narrow down the search result.
Taiwanese people like to go to the cafe for different purposes. And there are many kinds of unique cafes around in Taiwan. People sit at Cafe for reading, killing time, working, hanging out with friends, and do other many things.
Cafe gradually became a unique culture in Taiwan, as you can always discover a special cafe and enjoy the vibe. However, find a suitable cafe isn’t always an easy thing. Usually, people go on the internet and search by keywords when they need a cafe that fits their needs, but thousand of results could be very overwhelming.
Then we saw the opportunity to help those people to find the cafe more seamlessly and effectively. That’s the beginning of KAPI.
Many types of cafe around the city, people can always find the good one that fits their personality and needs.
As a small team(only me and one Android developer), we wanted to move faster, get user feedback by testing the prototype before shipping the product. We designed the feature based on our assumptions and use data to inform design iteration. I worked closely with engineers to ensure our goal is clear, and every product detail will think through carefully.
Before the project started, we made simple questionnaires and interviews with potential users to understand their basic needs for cafe. We conducted a survey of 268 people, and then we found out something, and 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 feel tired of reading a lot of information about the cafe on the blog, they only want to know the crucial information quickly.
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
