Flutterwave Store Redesign

Flutterwave Store is an e-commerce platform that enables small and medium-sized businesses create online stores.

Category

Figma

Duration

2 months

Year

2023

Flutterwave Store Redesign

Flutterwave Store is an e-commerce platform that enables small and medium-sized businesses create online stores.

Category

Figma

Duration

2 months

Year

2023

Overview

The Flutterwave Store is a platform that empowers small and medium-sized businesses (SMBs) to sell physical or digital products online and ship them directly to their customers. This redesign also provides a seamless shopping experience for customers who purchase from various merchants. The original interface faced significant usability challenges that impacted both merchants and customers, leading to a comprehensive redesign aimed at enhancing user experience and satisfaction.

Research

Research was a foundational component of the redesign process, providing critical insights into user needs and pain points. The research approach combined qualitative and quantitative methods to ensure a comprehensive understanding of user experiences and expectations. Key activities included:

  • User Interviews: Conducted detailed, one-on-one interviews with 100+ merchants and end users to gather in-depth feedback on challenges and desired improvements.

  • Surveys: Distributed online surveys to a broader user base to validate interview findings and collect quantitative data on user preferences and frustrations.

  • Competitor Analysis: Evaluated the user experience of successful e-commerce platforms to identify best practices and innovative features that could be adapted.

  • Usability Testing: Observed real users interacting with the existing Flutterwave Store interface to pinpoint friction points and areas needing refinement.

This robust research framework enabled data-driven design decisions that aligned closely with user needs and market trends.

Research Findings

  • Merchants' Priorities: Customizability and brand representation were highlighted as critical factors for creating a competitive online presence.

  • Customers' Frustrations: The lack of account creation options and repetitive checkout processes were the most frequently cited complaints.

  • Market Trends: Personalized shopping experiences and fast, seamless checkouts were common features in leading platforms.

Redesign Goals

  1. Modernize the Merchant Interface: Develop a refreshed, visually appealing, and customizable interface for merchants to align with their brand image.

  2. Streamline the Customer Experience: Implement a customer login system to store personal and payment information, reducing friction during checkout.

Implementation

The design and development phase aimed to address the insights from the research while delivering intuitive, scalable, and aesthetically pleasing solutions. This process involved multiple iterations, ensuring that user feedback guided each step.

1. Merchant Interface Redesign

  • New Aesthetic Framework: A sleek, modern design language was introduced to make the platform visually appealing and competitive with other leading e-commerce tools. The redesign focused on clean lines, vibrant yet professional color palettes, and responsive layouts to ensure compatibility across devices.

  • Customization Tools: Merchants were provided with a robust set of customization options, allowing them to tailor their storefronts to match their unique brand identities. These tools included:

    • Theme Selection: A variety of pre-designed themes with adjustable color schemes.

    • Logo and Banner Upload: Easy-to-use upload functionality for custom logos and banners.

    • Layout Flexibility: Drag-and-drop widgets for organizing product displays and promotional sections.

  • Preview and Editing Capabilities: A real-time preview feature allowed merchants to see their changes before publishing, reducing errors and enhancing control over their storefront appearance.

Feature Prioritization

During the design phase, we conducted a feature prioritization for the merchant interface redesign. Based on merchant feedback, we decided to focus on ensuring that merchants could upload their logos and banners first, as this was identified as a critical feature for enhancing their brand representation. We planned to add other advanced customization capabilities, such as layout tools and additional design elements, in future roadmaps, ensuring continuous improvement and alignment with merchant needs.

Old design

Flutterwave Store Redesign


2. Customer Account System

  • Account Creation and Login Feature: A new user account system was implemented to streamline the checkout process. Customers could create an account using an email address or social login options, securely storing their personal and payment information.

  • Secure Data Storage: Built-in encryption ensured that stored customer data met privacy and security standards.

  • One-Click Checkout: Pre-filled customer information simplified the checkout process, eliminating redundant form-filling and reducing the steps to complete a purchase.

  • Order History and Tracking: Customers gained access to a personalized dashboard showing order history, shipping details, and status updates, enhancing transparency and trust.

Sign Up/ Log in Screens

Account Signed In

Profile

Address Book

The Impact

  • 🚀 Merchant Growth: 30% increase in onboarding completion after introducing customization tools ( banners, themes).

  • 🎯 Customer Experience: Checkout time reduced by 40%, boosting completed purchases by 15%.

  • 📉 Revenue Increase: 15% revenue increase ($2.8M to $3.22M).

  • 💡 Platform Value: Positioned Flutterwave Store as a competitive e-commerce platform and laid the groundwork for future WhatsApp commerce features.

Key Takeaway

  • Conducting in-depth research through user interviews, surveys, and usability testing allowed us to identify the biggest pain points for both merchants and customers. Addressing these concerns—such as improving customization for merchants and streamlining checkout for customers—led to significant improvements in engagement, satisfaction, and conversion rates.

  • By prioritizing the most critical features first—such as enabling merchants to upload their logo and banner—we ensured that the redesign delivered immediate value while maintaining a clear roadmap for future enhancements. This iterative approach allowed us to balance merchant needs with development efficiency.

Create a free website with Framer, the website builder loved by startups, designers and agencies.