(Case Study) eCommerce Website Design: BlackFly Mobile

The Process

Research

To craft and organize the content that would entice consumers and empower vendors, we conducted a fast and flexible research process that included stakeholders, potential customers, and retail partners.

Deliverables Included:

  • Stakeholder Interviews & Product Strategy.
  • Speculative & Refined User-Personas.
  • Content & Feature Requirements.
  • Heuristic Analysis & User-Interface (UI) Audit.
  • User-Flows & Sitemap.
Sitemap - 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.
Personas - These were critical for targeting the needs of our users, and eliminating their existing pain-points.
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.

Design

We began with the idea of building a single website that was fully responsive through the use of CSS. This ensured that we could develop a generally excellent experience that aimed to keep things flexible yet simple through several design iterations.

Deliverables Included:

  • Wireframe Sketches.
  • Wireframes & Paper-Prototypes.
  • Style Guide.
Wireframes - Detailed specs were produced (complete with interaction details) to give the development team a basis for building the production website.
Style Guide - This document was produced to outline the visual style, grid system, and design assets to be used for each element of the website.
Paper Prototypes - These simple, low-fidelity prototypes were used to conduct early concept and usability-testing. This was a quick and fun way to gain insights into user-behaviour without the need for expensive software.

Testing & Validation

To make our process nimble while keeping costs down, simple paper prototypes were used to test each version of the website. After each round of user-testing, mock-ups were produced to illustrate to stakeholders the "look and feel" of the website (which we aimed to make as sleek and functional as the product line itself).

Deliverables Included:

  • User-Testing & User-Interface (UI) Refinements.
  • Design Mockups.
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.
Styled Mock-up (Desktop) - Visual design styles were then applied to this mock-up for a more finalized presentation for the site desktop view.
Styled Mock-up (Mobile) - Visual design styles were then applied to this mock-up for a more finalized presentation of the mobile website.
Styled Mock-up (Mobile Menu) - Interactions were strenuously documented so that the design gleaned from testing was the one that made it to the final production version of the site.

Feel free to download my:
Resumé (PDF) or Portfolio (PDF)

© 2016 David Service

Version 3.2.0