Mockups
home screen
Article screen
Business info screen
route screen
route completion screen
Splash screen
search screen
business profile screen
navigation screen
expanded route screen
Login Screen
Discover screen
ratings & reviews screen
route input screen
Route overview screen
retrospective
Overview:
The CafeHop redesign focused on enhancing the user experience of discovering new cafes by streamlining the app’s user flow and improving visual consistency. Through comprehensive user research, I identified key pain points and worked to create a polished, intuitive experience that guides users effortlessly from app launch to cafe navigation. The project emphasized an exciting, modern design while refining features to better align with user needs and expectations.
What Went Well:
User Research:
I conducted in-depth user interviews that provided valuable insights into pain points around cafe discovery, influencing key design decisions throughout the project.
user flow:
By prioritizing ease of navigation, I was able to create a seamless experience from app launch to cafe selection.
visual consistency:
The revamped UI maintained a sleek, punchy aesthetic while effectively balancing elements like typography and imagery to keep the user engaged.
Challenges:
User personas:
Capturing a detailed, nuanced persona that accurately reflected CafeHop’s diverse user base proved to be a challenge. Additional user interviews were necessary to bridge gaps in understanding.
visual hierarchy:
Achieving the right balance with font sizes and spacing required multiple iterations to ensure readability without sacrificing the clean design vision.
Key learnings & Improvements:
The most significant improvements came from paying close attention to user feedback, especially regarding discovery preferences and navigation flow.
Keeping the UI minimal and intuitive led to a smoother user experience, reaffirming that less is more when it comes to design.
Frequent testing at every stage of the redesign helped catch potential issues early and led to a more polished final product.
Actionable Takeaways:
Explore integrating machine learning to offer even better, tailored cafe suggestions based on user preferences and history.
Streamline the onboarding process to ensure new users quickly understand how to make the most of the discovery features.
Continue to gather feedback from a broader range of users to refine the app’s features and ensure it meets evolving needs.
Responsive Screens
Logos:
PRIMARY LOGO STYLE
cafehop
cafehop
cafehop
cafehop
cafehop
cafehop
SECONDARY LOGO STYLE
cafehop
cafehop
Color Palette:
HEX: DD00FF
RGB: 221, 0, 255
HSL: 292, 100%, 50%
HEX: 8208FF
RGB: 130, 8, 255
HSL: 270, 100%, 52%
HEX: 3B45FF
RGB: 59, 69, 255
HSL: 237, 100%, 62%
HEX: 009CFE
RGB: 0, 156, 254
HSL: 203, 100%, 50%
HEX: 09011C
RGB: 9, 1, 28,
HSL: 258, 93%, 6%
Gradient
Typography:
FONT FAMILY
Bebas Neue
STYLES
Regular
Bold
FONT FAMILY
Source Sans Pro
STYLES
Regular
SemiBold
Italic
Bold
Header
H1| header 1: Bebas neue, Regular, 40px
H2| Header 2: bebas neue, bold, 30px
H3| header 3: Bebas neue, Bold, 24px
BODY
Paragraph Text: Source Sans Pro, Regular, 16pt
Lorem ipsum dolor sit amet consectetur. Volutpat non sit in adipiscing. Eu varius ferat orci facilisi donec urna.
CATEGORY ICONS
MAP ICONS
Route List View
Active
Inactive
iconography:
NAV BAR ICONS
ACTION ICONS
Active
Inactive
Interactables & key components:
PRIMARY BUTTONS
Default
Pressed
Pressed
SECONDARY BUTTONS
Default
Pressed
TEXT FIELDS
Search
Label
Placeholder
subtitle
Stars
Bars
5
4
3
2
1
5
4
3
2
1
REVIEW components
MAP/ROUTE BUTTONS
label
GO
containers
Tiles
Rainbow Pasta Painter
¥2300
Blue Room
Blue Bottle Cafe
shyguy_matt
Great atmosphere and delicious food! Worth the somewhat high prices.
Review Tile
Content Container
Find us on the map
Map Container
Imagery:
UI Style Guide
Early Ideation
Wireframes:
Pencil and paper sketches, low-fidelity wireframes, and mid-fidelity wireframes were pivotal in refining the design based on user feedback and usability testing.
Lo FiD
Mid Fid 1
Mid Fid 2
High Fid
user flow
The CafeHop user flow begins with a user opening the app to discover nearby cafes, selecting a cafe, then using in-app navigation to guide them directly to their chosen spot.
user Persona
Bio:
Harlow is a travel enthusiast. His passion for photography is only rivaled by his love for technology, fostering cats, and exploring culinary delights!
Goals:
Find hidden gems in Japan's cafe scene.
Visit Robot Restaurant.
Visit the best cat cafes in Japan.
Needs:
To navigate Japan’s complicated address system.
Up-to-date & relevant business info.
Reliable reviews.
Pain Points:
Lack of knowledge about lesser known establishments.
Japanese address system.
Unreliable navigation.
Harlow Stockert
Age:
27
Location:
San Francisco, CA
Occupation:
Freelance Photographer
“The address system in Japan is totally different than in the U.S.. Maps are unreliable, and street names are not a thing. If I'm looking for a hole-in-the-wall
cafe, it can get
confusing fast.”
Hypothesis:
English-speaking travelers will have a more enriching and culturally immersive experience in Japan by using CafeHop as a comprehensive
guide and database of themed cafes.
User Feedback:
“Nothing worse than having sim card issues while you’re traveling. Having no cell service or wifi would be awful and anxiety inducing. I love the app AllTrails because it allows you to download your hike and map to use offline, so you don’t have to struggle to use wifi on a mountain.”
– Erica
“In Japan, addresses are not always displayed. Sometimes it’s a paper flyer with a map and an arrow. A lot of biz share buildings, so you have to look for a sign outside the building. Finding foreigner friendly places, or ones that have multilingual menus. Calling for a check or answering “for here? Or to go?” can be really hard for tourists.”
– James
“I like when apps advertise unique activities and special events, you can’t always trust user reviews. Lists like “top 5 most popular” are really helpful.”
– Sara
Patterns:
Frequent users of Apple/Google Maps.
Want omprehensive, up-to-date business info.
Want well curated, reliable content.
Offline access important.
Concern about language barriers.
Likely to share experiences on social media.
Insights:
Appreciation for vibrant color scheme and high contrast text.
Desire for consistent design and layout across breakpoints.
Disinterest in gamified elements like badges.
Importance of clear navigation at top of screen.
Preference for closely spaced elements.
user research
design Process & Tools
My Role:
Research & DESIGN:
Conducted comprehensive end-to-end research to identify user needs and pain points, including market research, competitive analysis, user testing, and user interviews.
Led UX/UI design, creating intuitive navigation and engaging visuals to enhance user experience and support seamless exploration of Japanese-themed cafes.
Tools:
WEBAIM CONTRAST TOOL:
Accessibility standards.
FIGMA:
Mid/Hi-Fid wireframes, prototypes.
PROTT APP:
Interactive prototypes.
User challenges & app solution
Common Challenges:
Where should I go?
What do I need to know?
How do I get there?
The Solution:
Project Overview
What is CafeHop?
TYPE:
Location-based responsive web-app.
TARGET AUDIENCE:
Designed specifically for English-speaking tourists exploring Japan.
PRIMARY GOAL:
To guide travelers through Japan’s rich and diverse world of themed cafes.
MISSION:
To simplify navigation through Japan's intricate city streets, helping travelers effortlessly discover unique Japanese-themed cafes and confidently immerse themselves in Japan’s vibrant cultural landscape with valuable tips and insights.
Location-based responsive
web app Case Study
cafehop
cafehop
cafehop
cafehop
