Boup
- Wireframe Design
- Design System
- Pixel perfect
- Figma Auto-layout
BOUP App is a mobile-based wine and beverage commerce application. We redesigned the app to improve clarity, usability, and user trust, turning it into a modern, conversion-focused experience that reflects the brand’s premium quality.
The main task was to redesign the BOUP app to improve usability, product discoverability, and visual appeal. We delivered a clean, intuitive interface with simplified navigation, clearer product presentation, and optimized shopping flows to enhance engagement, increase conversions, and create a seamless mobile purchasing experience.
A lightweight style guide was created to maintain visual consistency across screens, ensuring reusable components, consistent spacing, and accessible color usage.
- Typography
- Colors
- Components
- Wireframe
- Mockups
- Prototype
The design process involved understanding user pain points, mapping user flows, creating low-fidelity wireframes, and refining them into high-fidelity UI designs through iterative testing and feedback.
The existing BOUP app lacked visual clarity, intuitive navigation, and a smooth mobile shopping experience. Through a modern redesign, improved information hierarchy, and refined user flows, we transformed it into a user-friendly and engaging wine-shopping platform that reflects the brand’s quality.
- Checkout flow lacked clarity before payment, increasing confusion and cart abandonment rates significantly.
- Delivery options were unclear, causing hesitation and uncertainty during order confirmation process.
- Inconsistent UI components reduced usability, visual consistency, and overall user trust.
- Weak visual hierarchy made primary actions difficult to identify quickly.
- Account and verification flows lacked clarity, lowering user confidence significantly.
- Limited order status feedback left users uncertain about purchase progress.
- Simplified checkout flow with clear steps and visual progress indicators to reduce confusion.
- Clearly differentiated delivery options using labels, descriptions, and pricing for better decision-making.
- Improved visual hierarchy using spacing, typography, and contrast to highlight primary actions.
- Standardized UI components to ensure consistency, improve usability, and strengthen user trust.
- Redesigned account and verification flows with clearer instructions and simplified interactions.
- Added real-time order status updates to provide transparency and reassure users.
The BOUP app evolved from a cluttered and inconsistent interface into a clean, intuitive shopping experience. Improved navigation, clearer checkout steps, and stronger visual hierarchy streamlined decision-making, increased purchase confidence, boosted conversions, and strengthened overall trust in the platform.
Our primary goal was to enhance the BOUP app experience by creating a modern, intuitive interface that improves engagement and increases conversions. The key challenges included simplifying the checkout flow, clarifying delivery options, improving navigation structure, maintaining visual consistency, and building user trust through secure, seamless purchasing interactions.
The redesign of Boup marked a complete transformation from a generic product catalog to a modern, story-driven craft marketplace. Navigation was reimagined with a thumb-friendly floating dock, typography was refined for better readability, and the overall structure was optimized to highlight local breweries. The new app not only simplifies the path to purchase but also builds a deep sense of discovery and trust between makers and consumers.
| Key Points | Old Application | New Application |
|---|---|---|
| User Interface Design | Generic, inconsistent interface with weak brand identity and outdated visual components. | Modern interface using consistent components, refined typography, and clean, premium visuals. |
| User Experience Flow | Confusing browsing and checkout flow with unclear steps causing hesitation and cart abandonment. | Streamlined shopping flow guiding users smoothly from product discovery to secure payment. |
| Mobile Responsiveness | Poorly optimized mobile layout causing usability and performance issues. | Fully responsive mobile-first design ensuring smooth, consistent user experience. |
| Visual Hierarchy | Weak hierarchy made product details, prices, and primary actions difficult to identify. | Clear visual hierarchy with prominent CTAs, organized content, and improved scannability. |
| Moules | Unorganized modules made navigation confusing and task completion difficult. | Clearly structured modules improved navigation clarity and overall usability. |