Role
UX Research
SpaceCoffee is a local specialty modern coffee shop known for its high-quality beans and cozy atmosphere
The cafe has a loyal customer base and wanted to improve the customer experience during peak hours. Their main goal was to reduce waiting time and make the ordering process faster and more convenient through a mobile app
Figma
FigJam
Maze
Notion
UI Design
Mobile App
Prototyping
About
Tool used
MAIN COMMERCIAL TASKS
MAIN VISUAL TASKS
Eliminate in-store queues
Enhance customer convenience and loyalty through a fast, efficient ordering experience
Design an intuitive and visually clean interface that makes online ordering effortless, even during busy hours
Highlight the brand’s uniqueness through consistent color palette, typography, and imagery
User-friendly mobile app that allows customers to make pre-orders
Let’s Get Started
Project Brief Overview
Before starting the design process, it is important to fill out a detailed project brief to clearly understand the business goals, audience needs and challenges.
This step helped align the visual direction with the cafe's business objectives and ensured every design decision was based on real needs, not assumptions
UX Research
USER INTERVIEWS
For a deep understanding of our users, I decided to organize interviews. It helps me gain insights into their daily routines, challenges, and motivations related to coffee ordering
The first step was to create a structured interview template. Each section was designed with a specific purpose: to gain a deeper understanding of the users, the product and the problems they face
The second step was to identify participants who matched the target audience, schedule the sessions, and conduct all interviews
The final and most crucial step was to analyze the collected data, identify patterns, and formulate meaningful insights and conclusions
At the end of the user research phase, I created a user persona and defined key Jobs to Be Done
These tools helped summarize user insights, visualize the target audience, and clearly understand their goals, motivations, and pain points
UX Research
Competitors analysis
Conducting a competitor analysis is a key step in defining a product’s strategy and differentiation
It allows us to evaluate existing solutions, understand user expectations shaped by the market, and identify opportunities for innovation. This process ensures that our app not only meets user needs but also offers a unique value proposition
SUMMARY:
Through competitors research, I identified common strengths. Such as intuitive ordering processes, strong loyalty integrations, and personalized recommendations. Weaknesses are complex navigation and limited customization options
How it have been implemented on the website:
● Simplified ordering flow with fewer steps and clear visual hierarchy● Personalized experience, allowing users to quickly reorder favorites and customize drinks easily● Integrated rewards system that motivates repeat purchases● Pre-order and scheduling options to save users time during busy hours● Clean, minimal interface that highlights convenience and speed
UX Research
information architecture
After completing the research and defining user goals, I structured the app’s information architecture
The result was a clear and intuitive navigation system that allows users to quickly place orders and easily find everything they need. It makes the overall experience simple and enjoyable
UX Research
USER FLOWS
Main user flows were developed to visualize how users interact with the app
This step helped the team clearly understand the logic behind each scenario from browsing the menu to completing an order. Well-defined flows ensured a consistent user experience, reduced misunderstandings during development, and made collaboration between design and tech teams much smoother
UX Research
wireframes
Before moving to the visual design, I started with wireframes. This step helps to focus on the structure of the app, user flow, and functionality without getting distracted by colors or styling.
At this stage, I created wireframes for all main screens to think through the navigation and overall user experience.
UI Design
CONCEPT
The competitor analysis showed that most coffee shops rely on brown and yellow color palettes. To stand out from this visual pattern, a completely different approach was chosen.
The name Space became the main inspiration for the identity, leading to a palette of deep cosmic blues combined with soft pastel tones that create a modern and atmospheric mood. The rocket illustration reinforces the brand name while also symbolizing fast and efficient service, like a quick launch for your daily coffee.
UI Design
final ui
With the concept and structure defined, the project moved into the visual design phase.
The final UI brings together the brand identity, layout decisions, and user flow developed in the previous stages. All key screens and interface states were designed to ensure a consistent, intuitive, and visually engaging experience.
Check out final UI screens on your desktop
/ Authorization
Our users value speed and convenience, so the sign up flow is designed with one-time passcodes, eliminating the need for passwords and reducing friction.
To further enhance user engagement, we introduced two additional screens highlighting the benefits of ordering more often, encouraging repeat interactions in a simple and intuitive way.
/ Order process
Customization is essential for our users, so they can fully control and personalize every aspect of their order.
The intuitive interface is designed to be clear and effortless, helping users complete their purchase quickly while saving time at every step.
/ Stores Screen
To streamline the pickup experience, users can choose a coffee shop in the way that feels most natural to them.
Whether browsing the map, entering an address, or selecting from saved locations, each option is designed to be fast, clear, and effortless
/ Checkout
The checkout flow is designed to balance control and speed, allowing users quickly review and edit selected items. To support different user scenarios, we introduced flexible pickup options: users can either get their order as soon as possible or schedule it for a convenient time, choose between eat-in or takeaway, and select a preferred payment method.
The interface remains minimal and intuitive, reducing cognitive load and helping users complete the process efficiently.
/ Reorder
The reorder flow is designed to minimize effort and save time, allowing users to quickly place an order by selecting from their order history or saved items.
By reducing the need to rebuild orders from scratch, this feature streamlines the experience and supports faster, more convenient repeat purchases.
/ Loyalatly card Scaner
User interviews revealed that the loyalty program is a key driver of repeat visits, encouraging customers to choose this coffee shop over others by rewarding each purchase.
The flow includes a quick loyalty card scan, ensuring users receive bonuses for their order without disrupting the experience, while seamlessly connecting offline purchases with the digital product.
/ Beyond the Happy Path
To ensure a smooth and predictable experience in all scenarios, loading states and skeleton screens have been designed. This helps reduce perceived waiting time and makes the experience feel faster and more responsive.
Empty states were also thoughtfully crafted to guide users when content is missing, maintaining engagement instead of leaving blank or confusing screens. This was done to prevent frustration and support user orientation.
Key Learnings
Reduce friction
Loyalty drives repeat use
Full flexibility
Edge cases matter
Even small barriers like extra steps or unclear interactions can significantly reduce completion rates
Well-designed rewards can significantly increase repeat purchases and user retention
Users expect full control over their order at every stage without restarting the flow
Loading and empty states are critical for maintaining clarity and trust in all scenarios
Conclusion