(Case Study) eCommerce Website Design: BlackFly Mobile


Research & Discovery:

Mapping Out a Complete eCommerce Experience


Challenges Faced:

  • A Promising but Unknown Product faced potential failure without the ability to penetrate the market.
  • No Track-Record or Infrastructure were built as this startup was at the earliest stages.

What We Learned (Pains & Priorities):

  • A Clear & Pressing Value Proposition needed to be communicated to customers across different spaces (B2C & B2B).
  • An Initial Track Record would be needed to create early trust in the product line.
  • eCommerce Infrastructure would be key to scaling our efforts in the mid-to-long term.

High-Level Goals (OKRs):

  • Find & Engage with Early-Adopter Market to begin introducing the product line to the most receptive audience.
  • Create an Effective B2C Channel to establish an initial track record of adoption.
  • Create Engagement for both B2C and B2B channels to encourage further adoption.
Understanding a Holistic eCommerce Experience with Sitemaps - This deliverable was crucial for showing the site architecture, and interactions with other media (i.e. email and social media elements) to create a complete solution ecosystem.
Identifying & Engaging Target Markets using Personas - These were critical for targeting the needs of our initial “early adopter” users, and eliminating their existing pain-points.
A Seamless Purchase via User-Flows - These were used to map out how users would progress through the website, and what content/features they would need at each step to achieve an exceptional, friction-free experience.

eCommerce Website Design:

Establishing a Core Sales Channel


What We Learned (Insights & Actions Taken):

  • Communicating the Key Value Proposition as quickly and clearly as possible was key.
  • Finding and Focusing on the “Early Adopter” market segment would give us the initial momentum needed to scale our efforts.
  • High Quality Touch Points were critical in earning vendor trust, and promoting faith in carrying the products on variable shelf space.

Value Generated (KPIs):

  • Established Trust and Engagement with initial users by designing and deploying a comprehensive responsive website and social media channels.
  • Established Initial Sales by showcasing the product and website at targeted industry events.
  • Initiated further Market Penetration by establishing B2B vendor network leveraging initial B2C touch points and sales success.
Creating Effortless Interactions with Wireframes - Detailed specs were produced (complete with interaction details) to give the development team a basis for building the production website.
Establishing a Brand using Style Guides - Starting off as a very simple guide, this document evolved to establish the details of the visual style, grid system, and design assets to be used for each element of the website.
Refining Designs with Paper Prototypes - These simple, low-fidelity prototypes were used to conduct early concept validation and usability-testing. This was a quick and inexpensive way to gain insights into user behavior without the need for expensive software.

Testing & Optimization:

Refining the Experience for Diverse B2B & B2C Markets


What We Learned (Feedback & Priorities):

  • Sustained & Meaningful Engagement was essential for converting potential “early adopters” into brand advocates.
  • Visible Improvement based on received feedback was key to maintaining momentum in terms of market adoption.
  • Product Viability & Business Feasibility needed to be communicated consistently and clearly with every touchpoint (for both B2C & B2B segments).

Value Generated (KPIs):

  • Increased Efficiencies by leveraging “mobile first” website design to create a singular experience that required less design and development resources.
  • Established Retail Adoption by establishing an initial sales record to demonstrate demand, and support with B2B education and feedback channels.
  • Increased Trust by establishing prompt and meaningful content and communications strategies with customers (B2C & B2B).
Establishing Development Feasibility & Optimized Requirements with Low Fidelity Mock-ups - Constructed from on-going usability-testing, these deliverables helped us to add additional refinements/improvements that were noted for each batch of users. These also provided the early framework developers could work from to establish the technologies needed to build the website.
Initial Mobile-First Design with Styled Mock-ups (Mobile) - Starting with a “mobile first” approach, branding guidelines were applied to a unified responsive website to provide a consistent experience, while keeping development costs down by eliminating the need for a dedicated mobile site.
Expanded Options with Styled Mock-ups (Desktop) - Visual design styles were applied to completed wireframes for a more finalized presentation for the site desktop view.