PRODUCT INTEGRATION · SYSTEMS THINKING · E-COMMERCE UX ·2026
Espresso
Yourself
From designed interface to working product system.
A specialty coffee e-commerce product where I helped connect customer shopping flows, admin management, cart behaviour, product data and role-based access into one working end-to-end experience.
PRODUCT SYSTEMS
E-COMMERCE UX
ROLE-BASED EXPERIENCE
PRODUCT INTEGRATION
ROLE
Team Lead &
Customer/Admin Experience Contributor
TEAM
4-person
2 frontend · 2 backend
DURATION
4 weeks
TYPE
Full-stack e-commerce web app
OUTCOME
Working customer/admin e-commerce experience with browsing, cart, checkout, membership and protected store management flows.
QUICK OVERVIEW
THE PROBLEM
The product needed to behave like a working e-commerce system, not a set of static screens.
THE SHIFT
From separate interface pages to one connected product experience across customer shopping, admin management, cart behaviour and role-based access.
MY ROLE
Led product integration across customer/admin flows, backend logic, cart behaviour and final implementation so the experience worked end-to-end.
TECH STACK
React · Vite · Node · Express · MongoDB · Mongoose · JWT · bcryptjs · Axios
THE REAL PROBLEM
The challenge was not just designing screens. It was making the product work end-to-end.
Espresso Yourself needed to behave like a real e-commerce product, not a set of static pages. Customers needed to browse products, compare options, add items to cart, check out and see membership progress. Admins needed a separate protected experience to manage products, review carts and monitor store activity.
The core challenge was making the customer and admin journeys feel connected and reliable, with product data, cart behaviour, account access and store management working together behind the scenes.
REFRAME
The brief was reframed from a list of required features into a connected product system where customer shopping, admin management and shared product data worked together.
FROM BRIEF TO PRODUCT
From brief requirements to product capabilities.
BRIEF REQUIREMENT
Account access
Product catalogue
Cart management
Checkout flow
Membership points
Admin management
Role-based access
PRODUCT CAPABILITY
Customers could return to their shopping progress while admins accessed store tools through a separate protected flow.
Products could be browsed, searched, filtered and sorted dynamically.
Customers could add, update and review items without losing continuity between browsing and checkout.
Customers could complete a simulated purchase and receive confirmation.
Checkout total was translated into points and progress feedback.
Admins could add, edit and delete products without touching the database.
Customers and admins were guided into the right experience based on their role.
Product Discovery
Search, filter and sort helped customers move through the catalogue faster.
Checkout Continuity
Cart state stayed consistent from browsing to checkout.
Retention Loop
Membership points created post-purchase feedback.
Store Operations
Admin tools supported product management without database access.
PRODUCT EXPERIENCE MAP
Mapping the customer and admin experience as one product system.
This simplified system view shows how user actions, product data, cart behaviour and permissions connected behind the interface.
CUSTOMER EXPERIENCE
01
Register / Login
02
Browse product catalogue
03
Search / filter / sort
04
View product detail
05
Add item to cart
06
Review cart
07
Checkout confirmation
08
Membership progress updated
ONE PRODUCT SYSTEM, TWO ROLE-BASED EXPERIENCES
Authentication
Product data
Cart state
User role
Membership points
API routes
MongoDB database
ADMIN EXPERIENCE
01
Admin login
02
Protected dashboard
03
View store statistics
04
Review customer carts
05
Add product
06
Edit product
07
Delete product
08
Return to storefront
SIDE NOTE
The customer and admin journeys shared the same product system, but each role saw the tools and actions relevant to them.
KEY UX / UI DECISIONS
Designing the shopping experience around product discovery, confidence and continuity.
PRODUCT DISCOVERY
Search/filter/sort
Cart always visible
Consistent card hierarchy
The catalogue used clear product cards, visible browsing controls and persistent cart access to support faster product discovery without forcing customers into a linear path.
PURCHASE CONFIDENCE
Info supports confidence
Cart updates across pages
Quantity handled before checkout
Product detail and cart sidebar showing how product information, quantity controls and cart feedback stayed visible before checkout. Add-to-cart connected directly to the customer’s cart, so shopping progress stayed visible across product detail, cart review and checkout.
CART CONSISTENCY
Cart stays consistent
Order confirmation shown
Checkout confirmation showing the completed purchase loop, order summary and post-checkout feedback.
DESIGN INTENT
The customer experience was designed to reduce uncertainty between browsing and checkout by keeping product data, cart state and reward feedback visible across the journey.
CONTENT CLARITY
I used direct, task-based labels such as Add Product, Edit, Delete, Continue Shopping and Checkout so customer and admin actions were clear at the point of decision.
STATIC FIGMA TO WORKING PRODUCT
From static Figma screens to working product behaviour.
STATIC DESIGN
Product card layout
Cart icon and sidebar
Login screen
Admin dashboard mockup
Membership screen
IMPLEMENTED BEHVIOUR
Product information updated from a shared catalogue instead of fixed screen content.
Adding to cart updated the same shopping progress across product pages, cart review and checkout.
Login kept users in the correct customer or admin experience.
Admin tools reflected live product and cart information.
Membership progress updated after checkout based on the customer's order.
PRODUCT VALUE
Catalogue could scale without hardcoded screens.
Customers received consistent feedback.
Customers and admins entered the correct experience.
Admins could manage the store safely.
Created a post-purchase reward loop.
Implemented screens showing how designed interface states became working product behaviour.
Product Card
Cart Sidebar
Login Page
Admin Dashboard
Membership Page
KEY SHIFT
Moving from designed interface states to implemented behaviours that responded to real product data, user roles and cart actions.
HOW THE PRODUCT SYSTEM WORKS
The system that made the interface work.
This simplified system view shows how customer and admin actions connected to shared product data, cart behaviour and access rules behind the interface.
LAYERS
01
Interface Layer
Customer and admin screens: login, shop, cart, profile and dashboard.
User actions became data-backed interactions, not static screen changes.
02
Interaction + data layer
Connects actions like login, add-to-cart, checkout and product edits to product, cart and account data.
Cart, product and account behaviour stayed consistent across pages.
03
Product behaviour layer
Handles login sessions, cart updates, product CRUD and checkout confirmation behaviour.
04
Access layer
Checks whether users can access customer or admin actions.
Admin controls were protected from customer access.
05
Shared product data
Stores users, products, carts and membership-related information.
CORE DATA MODEL
User
Determines account access, role and membership experience.
_id · role · name · email · passwordHash
Cart
Powers product browsing and admin catalogue management.
_id · userId · items[]
Cart Item
Stores selected items for each customer.
productId · quantity · variant · price
Product
Tracks product, quantity, variant and price.
_id · name · price · stock · roaster · origin · tastingNotes · profile · variant · image
Admin Permissions
Protects store management tools from customer access.
TECHNICAL / PRODUCT DECISIONS
How technical choices shaped the
product experience.
Each technical decision was evaluated by how it affected persistence, access, consistency and control.
01
Role-based access
Customer and admin experiences were separated so each user entered the right flow, supported by JWT authentication, protected routes and permission checks.
PRODUCT IMPACT
Customers could shop safely while admins accessed store controls without exposing them publicly.
02
Cart continuity across the journey
Cart actions were carried across product detail, cart review and checkout so customers saw the same shopping progress throughout the journey.
PRODUCT IMPACT
Customers received consistent feedback and were less likely to lose trust before checkout.
03
Shared product catalogue
Product information came from a shared catalogue, so product pages could update without being redesigned or hardcoded individually.
PRODUCT IMPACT
The catalogue could scale and be managed through admin tools.
04
Admin product management
Admins could add, edit and delete products through a protected interface.
PRODUCT IMPACT
Store management became part of the product experience, not a manual database task.
PRODUCT RISKS STABILISED BEFORE DELIVERY
Cart Sync Issue
Cart sidebar and cart page showed inconsistent items.
FIX Connected both views to the same cart experience.
Admin Access Risk
Admin routes risked being reachable from the customer flow.
FIX Added route checks and admin permission controls.
Dynamic Data Issue
Product pages broke when data changed.
FIX Connected product pages to shared product data.
Session Issue
Login state reset after refresh.
FIX Kept users signed into the correct customer or admin experience.
MY CONTRIBUTION
What I led, built and connected.
I connected the customer flow, admin flow and cart behaviour into one working product experience.
TEAM COORDINATION
Frontend/backend checkpoints
PRODUCT LOGIC
Auth · products · cart · data models
PRODUCT INTEGRATION
Customer & admin flows connected
TESTING & STABILISATION
QA · routing cart sync
SCREENS I CONNECTED INTO THE PRODUCT EXPERIENCE
ADMIN DASHBOARD
Store activity, customer carts and order review.
PRODUCT MANAGEMENT
Edit catalogue details through the interface.
CART CONTINUITY
Shared cart state before checkout.
FINAL OUTCOME
Good digital products are not just well-designed interfaces.
FINAL OUTCOME
A locally running e-commerce product system where customer shopping, admin operations, authentication, cart logic, product data and membership behaviour worked together as one connected experience.
REFLECTION
What I took from shipping a product.
REFLECTION
01
This project showed me that good UX is shaped by more than the interface. Data, state, permissions and routing all affect whether an experience feels reliable.
02
I stopped thinking about screens as separate pages and started seeing the product as a connected system of users, roles, actions and feedback.
03
Shipping the product taught me that delivery is also design work. The experience only felt complete when the customer flow, admin flow and cart behaviour worked together.
WHAT I TOOK FROM IT
Design and technical decisions are connected.
The interface only works when the data, state and permissions behind it are considered.
Integration is where products often break.
Connecting flows taught me to think across the full journey, not just individual screens.
Role-based systems need to be planned early.
Customer and admin experiences should be considered from the structure up, not added at the end.
NEXT ITERATION
Where I would take it next.
Clearer States
Add clearer empty, loading and error states for login, cart and product search.
More Realistic Checkout
Expand checkout with shipping and payment steps.
Usability Testing
Test customer and admin flows with users to validate usability.
Shipping Espresso Yourself taught me to design beyond screens by considering the behaviours, systems and connections that make a product feel complete.