Comfi Inu
Comfi Inu offers a relaxing space that facilitates friends and strangers alike. A place to intermingle with each other while they get to enjoy a new variety of food offerings.
Mobile Design
eCommerce
B2C
Skills
UX Research
Wireframing
Mockups
User Interface Design
Project Overview
Client
Company Founder
My Role
UX/UI Designer
My role was to interpret the client’s assets and business goals, define the interaction hierarchy, and design a home experience that balanced personality with usability and accessibility.
The Problem
The challenge was to transform existing brand assets into a usable mobile interface without overwhelming the user or compromising accessibility. The UI needed to feel playful and welcoming while still supporting clear navigation, legibility, and real development constraints.
The Solution
Create a warm and friendly first impression
Make core actions immediately discoverable
Maintain WCAG contrast compliance despite pastel colors
Design a system that could scale beyond a single screen
The Goal
The goal was to design a foundational home screen for an early-stage café app that supports relaxed social interaction around food. Using provided brand assets, I focused on establishing clear hierarchy, accessibility, and a scalable UI system that could grow into a full product.
My Process
1
Identifying the needs
What was missing:
-
Screen-level layout
-
Navigation hierarchy
-
UI components
-
Accessibility considerations
-
Development-ready structure
2
Layout and Hierarchy
-
Categories are grouped by intent rather than menu size to reduce cognitive load on the home screen.
-
Primary actions are placed to align with natural top-down scanning behavior on mobile.
-
Familiar patterns like search and card based navigation help first-time users orient quickly
3
Systemizing Assets
-
Separating illustration from UI
-
Turning food art into reusable cards
-
Preventing asset-driven chaos
4
Accessibility Decisions
-
All text, icons, and interactive elements were tested against their background colors to meet WCAG contrast requirements.
-
Subtle surface differentiation ensures the banner remains visually distinct
-
Interactive elements were designed to support comfortable interaction
5
Scalability and feasibility
-
Core UI elements such as category cards, banners, and action buttons were designed as reusable components.
-
Layouts were built using auto layout to support responsive behavior and content variability.
-
Spacing was standardized across the screen using a defined scale to create visual rhythm and predictability.
6
The Final Product
-
Hand off to client
-
Review design and ensure it meets their needs
Final Design
Want more?
View Another Case Study
JMS Behavioral Health
JMS Behavioral Health is a private therapy practice that offers compassionate mental health care to individuals and families. They provide personalized support for a range of conditions, including anxiety, depression, trauma, and relationship challenges.
Web Design
Responsive Design
B2C