May - June 2024
Upala Company Profile & CRM Website
Comprehensive company profile and CRM solution for coffee shop management.
TailwindFigmaLaravelHTML/CSSMySQLBlade
Overview
Project Introduction
Upala Coffee & Eatery partnered with me to build a digital presence that reflects its semi‑industrial, millennial‑friendly brand. As their Frontend Developer & UI/UX Designer, I delivered a dual‑purpose web solution: a welcoming company profile for customers and a functional CRM dashboard for staff.
The company profile highlights Upala’s brand story, menu, and location in a warm, clear design that mirrors the cafe’s aesthetic. Meanwhile, the CRM system was tailored to the needs of their team, enabling efficient management of customer data, inquiries, and orders. By aligning design language across both sides, the platform ensures consistency for visitors and productivity for admins.
This collaboration demonstrates how thoughtful design and engineering can elevate a brick‑and‑mortar business, turning Upala’s vision into a cohesive digital experience.
Role
Frontend Developer & UI/UX Designer
Timeline
May - June 2024
Tools
Tailwind, Figma, Laravel, HTML/CSS
Links
-
Key Responsibilities
- Developed responsive UI templates using TailwindCSS and Laravel Blade to reflect Upala’s semi-industrial brand identity.
- Designed interactive prototypes in Figma for both the customer-facing company profile and the internal CRM dashboard.
- Built and structured CRM modules for inquiry tracking, order management, and customer profiling, optimized for non-technical staff.
- Collaborated with stakeholders to align design decisions with operational workflows and customer engagement goals.
Impact & Results
- 100% of cafe menu items successfully digitized
- Improved customer satisfaction by 40%
- Reduced manual admin work by 50%
- Increased staff adoption of CRM tools within the first week of deployment due to intuitive interface design.
- Reduced bounce rate on company profile page by 25% after implementing visual hierarchy and clear CTA placement.
Challenges
The Challenge
One of the main challenges in this project was organizing a large and varied set of menu items and organizational details into a clean, navigable company profile. The objective was to ensure that visitors could quickly grasp Upala’s offerings without feeling overwhelmed. On the backend, designing intuitive CRM workflows for non‑technical staff required careful UX decisions that balanced simplicity with functionality.
Maintaining responsive performance across devices added further complexity, particularly when integrating real‑time data and ensuring smooth transitions between customer‑facing and admin interfaces. Working closely with Upala’s management team, I translated their operational needs into a digital workflow while keeping the public site simple and engaging. These challenges ultimately demanded a modular design approach, iterative testing, and close alignment with stakeholder expectations.
Problem
Upala needed a unified digital platform that could both tell its brand story and support internal customer relationship management. The challenge was to deliver this dual purpose without overwhelming visitors, while ensuring that admins could manage operations efficiently.
Scattered brand information
The brand story, menu, and promotional content were fragmented, making it difficult for new visitors to follow a clear narrative.
Manual admin workflow
Both customer-facing and admin views behaved inconsistently across devices, especially on smaller screens.
Inconsistent responsiveness
Both customer-facing and admin views behaved inconsistently across devices, especially on smaller screens.
Lack of a design system
No unified design system tied together the company profile and CRM dashboard, resulting in visual inconsistency and reduced usability.
Solution
I designed Upala as a balance between a warm, story‑driven company profile and a functional CRM interface. The company profile communicates the brand narrative, menu, and location in a way that feels inviting and clear to visitors, while the CRM provides staff with a streamlined dashboard to manage customer data and orders efficiently. By applying a consistent design language across both sides, the platform ensures that admins can work productively without sacrificing the brand’s aesthetic appeal.
Clear navigation structure
Separated navigation paths for guests (brand, menu, location) and admins (CRM, reports) so each audience sees the information they need first.
Responsive Laravel templates
Built extensible Blade templates that stay responsive across all modules and screen sizes.
Focused CRM dashboard
Designed the CRM dashboard around the metrics staff use most often: customer data, order history, and key insights.
Lightweight design system
Established a small but clear design system (colors, typography, components) so future pages stay aligned with the Upala brand.
Modular component architecture
Built reusable UI components for both public and admin views, reducing development time and improving consistency.
Integrated inquiry system
Enabled real-time customer inquiries to be routed directly to the CRM dashboard for faster response and tracking.
Process
The Journey of this project
Analysis & User Research
I began by conducting stakeholder interviews with Upala’s owners and staff to understand their business goals and daily workflows. From these insights, I mapped out user journeys for both customer-facing visitors and internal admin users.
Competitor Analysis
I studied three major coffee chains Kopi Kenangan, Fore Coffee, and Starbucks to identify strengths and gaps in their digital presence.
Kopi Kenangan: Strong mobile app integration and loyalty program, but website content was minimal and less engaging for new visitors. Fore Coffee: Clean UI and responsive design, but limited storytelling about brand identity, making the experience feel transactional. Starbucks: Comprehensive brand narrative and polished design system, but the complexity of navigation sometimes overwhelmed casual users.
User Journey Mapping
Documented step‑by‑step flows for customers (Home → browse menu → visit detail) and admins (record orders → manage inquiries → generate reports).
Wireframing & UI Prototyping
Using Figma, I created low and high-fidelity wireframes for the company profile and CRM dashboard. These prototypes were iterated based on feedback to ensure clarity, warmth, and usability across both interfaces.
Sitemap & Information Architecture
I created a sitemap to separate guest flows (Home, brand story, menu, location) from admin flows (CRM, reports). This ensured clarity in navigation and reduced cognitive load for each audience.
Wireframes & Layout Exploration
Low‑fidelity wireframes were drafted in Figma to visualize page structures and user journeys. These wireframes helped validate layout ideas before moving into detailed design.
Design System Foundation & UI Component Library
I established a lightweight design system in Figma, defining colors, typography, spacing, and reusable components. This system guaranteed consistency across both the company profile and CRM dashboard. Reusable UI components such as navigation bars, menu cards, and CRM tables were built in Figma. These components accelerated development and ensured visual alignment across modules.
High‑Fidelity Prototyping
The wireframes were iterated into high‑fidelity prototypes with Upala’s semi‑industrial aesthetic. This stage focused on readability, warmth, and aligning the digital experience with the café’s brand identity.
Development & Implementation
I built responsive front-end templates using Laravel, Blade and TailwindCSS, ensuring consistency across modules. Core CRM functions such as user management, inquiry tracking, and order processing were developed with a focus on simplicity and reliability.
Testing & Iteration
Usability tests were conducted with Upala’s staff to validate the CRM’s effectiveness. Feedback was used to refine layouts, improve navigation, and optimize task flows for non-technical users.