UI/UX Design
iOS/Android
Mobile
Prototyping

2017

KAPI App: Discover your favorite cafe

Duration

10 Months

Role

Co-Founder & Product Designer

Responsibility

Product Management & End to end UI/UX design

Background

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.

Design Process

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.

User Study

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

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 feel tired of reading a lot of information about the cafe on the blog, they only want to know the crucial information quickly.

Persona

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

Positive
Curious
Friendly

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

Energetic
Outgoing
Passionate

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

Creative
Elegant
Calm

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.

Goal

Launch a simple Android app that helps people search & explore the cafe they like.

Hypothesis
01

Allow people to search by certain criteria will help them easily find a suitable cafe based on their needs.

02

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.

The MVP

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.

MVP

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

TOP

Background

User Research

Problem

Hypothesis

MVP

Principle

Deliverables

Outcome

Takeaway