Wind-UX
Protein Cookie Butter
Client Name: Flex Brands
Services: UX Design and Website Redesign
Industry: Health food and Nutraceuticals
Project Type: Express Website redesign
Target Audience: Fitness Enthusiasts, Athletes and Health-Conscious Consumers 25-35 range (active adults)
Date: October 2023
An e-commerce site time trial
Brief Overview
Designed a user-friendly and visually appealing website for MadeGood Bars, an organic granola bar company, to enhance their online presence and drive sales.
The Challenge
Flex Brands, a dynamic company redefining the protein butter market, approached us with an ambitious goal: to launch a high-performance Shopify store in record time. With Black Friday looming, the pressure was on to deliver a seamless online shopping experience.
Mood board to understand the brand aesthetics.
Design/Development Process
Design System
A comprehensive design system was developed to ensure visual consistency and a cohesive user experience across the platform. This system includes a defined typography scale using the Inter font, a harmonious color palette, a consistent spacing system, and clearly defined button states (normal, hover, and pressed).
Typography system
An 8-point spacing system (using both pixel and rem values) provides consistent rhythm and visual harmony across all layouts.
A color system utilizing a consistent naming convention and a 1000-point scale for each color category (Brand, Grey, Success, Danger, Information)
A set of reusable UI components, including buttons, forms, and input fields, built to ensure a cohesive and efficient user interface.
E-commerce Integration
Designed the user interface for product pages, shopping cart, and checkout process, ensuring a smooth and intuitive purchasing experience.
Low Fi Prototype
These wireframes outline the structure and layout for a Protein Cookie Butter e-commerce website. The design prioritizes clear product presentation, easy navigation, and a streamlined user experience, featuring a prominent product showcase, detailed product pages, and a dedicated recipe section.
Final Site
Within a tight three-day timeframe, I designed and developed a fully functional e-commerce website for Protein Butter. This included creating wireframes, designing product listings and website content, and implementing the design on a live platform.
Low-Fi Wireframes
Solution/Results
The result was a robust online store that exceeded expectations and contributed to Flex Brand's successful Black Friday sales campaign.
All designed, coded, lunched within 3 days.
Key Takeaways:
-
Successfully managed the project, navigating tight deadlines and adapting to changing requirements.
-
Maintained strong client relationships through proactive communication and problem-solving.
-
Leveraged e-commerce and UX design expertise to create a high-performing online store.
-
Delivered a user-centered design that optimized conversions and exceeded client expectations.