E-commerce Design
Frisby
Overview
A comprehensive redesign of Frisby’s digital presence (website and Android app). The project focused on refreshing the brand's visual identity and optimizing the online ordering experience, integrating new brand guidelines and marketing campaigns.
The Challenge
The Challenge The primary pain point was user frustration after completing a purchase: Lack of Order Visibility: Users only knew if their order was placed or not, leading to uncertainty and anxiety. Call Center Overload: The customer service center was overwhelmed with calls from customers asking, "Where is my order?". Outdated Visual Experience: The digital ecosystem did not reflect the brand’s new identity or recent marketing efforts. Mobile Friction: Usability issues on touch devices, such as buttons being too close together or a lack of visual hierarchy.
Process & Strategy
To tackle a project of this scale, I followed a rigorous design workflow: Analysis & Benchmarking: Exhaustive competitor research and documentation of industry best practices (NNG, UX Collective). Sketches & Exploration: Quick brainstorming to reorganize layouts, prioritizing ergonomics for mobile views. High-Fidelity Wireframes: Three complete sets (Desktop, Web Mobile, and Android App) to validate logic with stakeholders before applying color. Weekly Sprints: Close collaboration with marketing, data, and development teams to ensure technical and commercial viability.
Key Design Decisions
The redesign focused on reducing cognitive load and operational functionality. Visual Tracking System: Implementation of a step-by-step order status flow. Informing the user where their food was directly reduced support call volume. Visual Balance (Orange vs. White): Strategic management of the brand’s vibrant orange palette, balancing it with white space to improve readability and prevent visual fatigue. Scalable Design System: Creation of over 150 consistent components that allowed for the efficient update of 146 screens. Touch Optimization: Adjusted touch targets following Material Design standards (Android) to prevent input errors on mobile devices.
The Solution
A unified and modern digital ecosystem: Responsive App & Web: A light, "breathable" interface that facilitates navigation across all devices. Real-Time Tracking: A clear and detailed "My Orders" section that empowers users with information. High-Fidelity Prototypes: Delivery of detailed assets and specifications for precise implementation by the development team.
Results & Impact
146 Screens Designed: Covering all possible user states and flows. Reduced Frustration: Measurable improvement in the post-purchase experience through visual order feedback. Support Efficiency: Reduced operational load for the call center team. Brand Consistency: Total alignment between digital touchpoints and the new corporate image.
Key Take Away
This project reinforced my belief that good UX can be profitable. By using industry standards and design psychology (such as providing process status), we successfully solved a real business problem: the operational cost of customer support. I learned that even without deep field research, leveraging expert documentation and competitive analysis can transform a large-scale product.
