KAPI
Timeline
Sep 2022- Mar. 2023
Roles
Co-Founder & Product Designer
Responsibility
End to end UI/UX design
Overview
01 | Objective
Create an app allows people to search by specific criteria will help them easily find a suitable cafe based on their needs in Taipei.
02 | Role & Deliverables
As the sole designer, I was responsible for the entire end-to-end design. I worked closely with one Android developer to ensure our goals were clear and that every product detail was carefully thought out.
03 | Challenges
When we started the projects, we used the open-source API, which means we could not change or add the information due to the existing data structure. Therefore, We decided to focus on the user-facing features and create our database later.
04 | Outcome & Impact
Users can quickly locate their nearest and most preferred cafes using a custom map. The app also includes a versatile filter allowing users to narrow their search results to find exactly what they want.
Background
In Taiwan, cafes are favored for various activities such as reading, working, and socializing, with many unique establishments offering diverse experiences. However, finding the ideal cafe can be challenging, as online searches with keywords often lead to an overwhelming array of options.
Therefore, 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.
Therefore, 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.
Problem
1. Google search is overwhelming, it’s hard to filter out the key information that they need.
2. There’s no easy way to assess whether the cafe is proper for me.
Goal
Launch a simple Android app that helps people search & explore the cafe they like.
Outcome
Next Iteration-Hi-ifi Prototype
Next iteration offers stronger filters, list view, community-related functions, and a more integrated user interface and better user experience.
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.
Research
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:
Persona
I consolidated our research findings into three personas, enhancing our team's understanding of our target users and focusing on what's most important in our design efforts.
Josh | 19 years old | Student
Josh, a senior business management student, is keen on acquiring new knowledge and has internship experience across various companies. Aspiring to be a versatile talent, he often visits cafes on weekends to work on class notes or take online courses.We decided to use their open source API for our MVP.
Lucas | 25 years old | Salesman
Josh, a senior business management student, is keen on acquiring new knowledge and has internship experience across various companies. Aspiring to be a versatile talent, he often visits cafes on weekends to work on class notes or take online courses.We decided to use their open source API for our MVP.
Emily | 29 years old | Freelance Designer
Emily, a freelance designer with a strong passion for design and boundless energy, draws inspiration from daily life, enjoying conversations and observing people's interactions. As a coffee enthusiast, she works from various cafes three days a week with her laptop.
Information
Architecture
Before diving into visual design and page layout creation, I established a logical information architecture to ensure users can navigate the app effortlessly.
Sketch
Wireframe
After finalizing the information architecture, I sketched paper wireframes to visualize the placement of components and visual elements on the page. This process enabled me to consider the information hierarchy, allowing for a structured presentation of content and functionality.
Following numerous discussions with the team, I refined the wireframes to ensure they were concise and met everyone's expectations.
Following numerous discussions with the team, I refined the wireframes to ensure they were concise and met everyone's expectations.
MVP
After scoping out the features we would like to deliver for the first launch, I started working on the visual design and addressed the interaction detail. This MVP version is simple and only took around two weeks to build. 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 include browsing on the map, searching by keyword and filters, checking the nearest cafe, and switching cities.
A few months later after released MVP, we learned
Nearest button | 70% click/session
Based on 739 click events, the data indicates that over 70% of users utilize the “nearest” button, suggesting a strong preference for locating nearby cafes, particularly when on the move or seeking immediate options.
Return users | 2.6 times/day
On average, each user opens the app 2.6 times daily, and the number of daily active users has gradually increased. While these metrics are promising, there is considerable scope for improvement. Enhancing user engagement is our next significant objective.
Stay time | 4 minutes/average
The MVP offers only basic cafe information, with limited interactive features, leading users to exit the app once they find a cafe they like. We must explore ways to add value and encourage users to spend more time within the app.
Design System
Consistent & reusable design components
This system guided me in scrutinizing each component's necessity, usage, logical flow, and information hierarchy clarity. It also facilitated smoother communication between engineers and me, bridging gaps and enhancing project collaboration.
Design Iteration
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 to see the result.
A new list view for all your needs
We've introduced a list view alongside the map view to offer users an alternative way to discover cafes, allowing seamless navigation between the two modes as needed. Additionally, I've refined the UI of the cafe card to enhance its readability and overall neatness.
Cafe community
Our significant focus has been fostering a community around our product. Our aim is for users to engage not only in seeking cafe information but also in contributing content that benefits other cafe enthusiasts. Users can review, comment on, and upload photos of cafes they've visited and even add new discoveries to the platform.
Page Showcase
Takeaway
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.
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.
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.