HellaBlack
Building an eCommerce marketplace for black owned businesses

HellaBlack, an aspiring eCommerce startup, emerged from a passionate family's vision to create a platform that not only empowered Black entrepreneurs but also gave 2% of each transaction back to the community.

At its core, the concept was to develop a marketplace, serving both vendors and consumers, focusing on empowering businesses. Our collaboration began with the goal of designing and launching a marketplace website that celebrated Black businesses, prioritized user experience, and supported community growth.

hellablack-desktop-pic
HellaBlack 3 screen header
My role

As the founding designer for HellaBlack, I led the end-to-end product design process. This involved constructing the platform's architecture, essential user flows, and gaining CEO approval. I navigated through the complexities of transitioning away from WordPress, from initial wireframes to V1 final designs. Subsequently, I collaborated with the development team over 12 sprints, ensuring a seamless handoff and alignment with the leadership team. Additionally, I played a key role in the creation of the HellaRich Hub microsite, a unique learning and directory platform for sellers.

Responsibilities

Directed the complete design process including tasks such as creating user flows, designing sitemaps, crafting landing pages, and ensuring intuitive interfaces for both buyers and sellers.

TIMELINE & OUTPUT

Over the course of 2+ years, beginning in 2019 and concluding in the spring of 2021, I led the end-to-end product design of HellaBlack's marketplace website.

TEAM

CEO, CMO, Development team, Head of Content , Creative director and Social media manager

High level goals
01/ Establish sitemap and essential userflows for buyers and sellers.
02/ Refine and produce final designs, align with the HellaBlack team and developers over 12 sprints.
03/ Develop email category templates for the launch.
04/ Design and implement the HellaRich Hub, a microsite business directory learning platform.
building the architecture

Building foundational UX documents was critical to ensuring clarity and alignment with company stakeholders before delving into classification, hierarchy, labels, and navigation.

This initial phase involved mapping out the user journey, emphasizing user actions and interactions to structure information effectively for each screen. My focus was on refining and enhancing the user experience, particularly emphasizing an intuitive flow for products.

Task Managment idea session

As part of an ideation exercise, I assembled a preliminary task analysis chart, outlining each user type and their respective jobs to be done. My objective was to define essential tasks, providing insights into user behavior and needs.

HellaBlack Task Management chart
Site map

The next step involved constructing a sitemap to lay out essential information, structure the content, and assign navigation labels. This included determining global navigation and organizing content to enhance the overall user experience.

Ultimately, the goal was to visually illustrate the connections between individual web pages and gain approval from stakeholders.

HellaBlack Site Map
Category page levels

The site map was not going to be enough moving forward. The product categories needed more definition and a solid plan in place to refer to as the company grew.

As a marketplace the majority of the content on site will be user generated it is important to classify any possible product that could be added by sellers.

HB-CATEGORY-LEVEL-ANIMATION
USER FLOWS

After establishing a solid base for the site structure, the next step was to develop the user flows. Naturally, I focused on the essential user flow for the shopping experience. Following that, I proceeded to build a payment flow to illustrate how vendors would receive payment.

Click images below for preview.

HellaBlack Return flow
Return Item
Hella Black Payment Flow
Payment Flow
Checkout User Flow
Checkout User Flow
HellaBlack Seller Registration flow
Seller Registration
Opportunities

Overall there were some great insights learned from creating the sitemaps and user flows. I discovered four top concerns on the current design that would guide my design thinking and brainstorm solutions for the new design.

01/ SELLER ONBOARDING

Solution:
Enhance the seller registration by providing clear guidance and making it a seamless experience.

02/ VENDOR PAYMENT

Solution:
Refine the vendor payment user flow to ensure a smooth and timely process for sellers to receive their earnings.

03/ NAVIGATION AND PRODUCT LANDING PAGE

Solution:
Enhance the definition of product categories, ensuring clear distinctions and easy navigation for users.

04/ BRANDING

Solution:
Introduce engaging visuals that align with HellaBlack's identity, creating a visually cohesive and memorable experience for users.

the initial build

Working collaboratively with the CEO and engineer, we deliberated among various platforms, weighing their capabilities for both the marketplace e-commerce and admin experiences. After exploring Arcadia and trying out their drag-and-drop interface in a demo call, we decided to shift our focus to WordPress. The team's familiarity with WordPress influenced this decision. My initial tasks involved working on the navigation, vendor sign-up, log-in screens, home page, PDP (Product Display Page), PLP (Product Listing Page), and seller registration.

Although we initially built a first-round draft of wireframes on WordPress, the CEO expressed dissatisfaction, prompting a shift to a new platform with enhanced vendor site capabilities. The transition marked a significant phase in the project, moving towards a more powerful technological base. The design is presented in full color; for additional details, refer to version 2 below.

V2 pLATFORM DESIGN STRATEGY

Starting with a new platform gave us the freedom to approach the project with a fresh perspective, allowing us to re-prioritize pages and features.

Areas of focus:

01/ Block Wire Grid System for Home Page

Implement a block wire grid system for the home page to organize content into visually appealing and easily navigable sections. Allowing for clear information hierarchy that could accommodate any future home page content.

02/ Prioritize Seller Registration Experience

Elevate the seller registration experience by streamlining the process and prioritize essential information, for a smooth onboarding process onto the marketplace.

03/ navigation and mega menu

Design a user-centric navigation system with an intuitive mega menu. Prioritize clear categorization, visual cues and concise labels to enhance efficiency.

04/ DESIGN ADDITIONAL OPPORTUNITIES FOR VENDORS

In response to a stakeholder request, Establish the HellaRich Hub as a resource, providing vendors with a platform to showcase thought leadership, create learning presentations, and enhance their visibility.

CREATING A BLOCK SYSTEM

To maximize the timing of the new design and promote the reusability of website blocks, I brainstormed various formats that could be interchangeably used based on the content and product plan for the landing page. The planned frequency of landing page refresh was set at once per month. By maximizing our efforts upfront to have options ready and formatted, we aimed to expedite the launch and reduce development time.

I've included a few examples below.

Hero Options:

HB Header option 2
HellaBlack Header 2A
HellaBlack Header opt 4
HellaBlack Header opt 6

Grid Options:

HellaBlack 3 image grid
HellaBlack 5 image grid
HellaBlack 5 grid alternative
HellaBlack Staggered layer images

Banners:

HellaBlack promo Image
HellaBlack 2 subject Banner
HellaBlack Single subject banner - grey
HellaBlack Single subject banner
HellaBlack 3 column text
HellaBlack Trending tags
HellaBlack Seller feature

Image Layouts:

HellaBlack 6 up
HellaBlack 3 up layered image
HellaBlack 2 large image feature
HellaBlack 3 up with brand circles
HellaBlack Carousel
VISUAL DESIGN
Roboto text treatment

Logo

HellaBlack Dark Background logo
HellaBlack Light Background Logo
HB icon logo
HellaBlack Green color standard
HellaBlack Secondary color standards
Launched DESIGN
Navigation

The responsive mega menu design is crafted to align with the labels discovered during the category-level chart process. The design prioritizes visibility, categorization, and logical structuring to enhance overall usability.

Desktop

HellaBlack Desktop Mega Menu

Mobile

HellaBlack Mobile mega menu
Seller Registration

I designed a system to support sellers by providing them with tools to build their own mini-store within the platform.

This includes access to create and list thought leadership content in the resource hub linked to their store, as well as in-app messaging, backend shipping, and tax management.

Kickstarter Campaign

In the summer of 2020, as we approached the launch date, the Leadership team organized a Kickstarter campaign to fund the final phase of the project. I designed website assets, which were utilized as website mockups and in the creation of the promotional video.

kickstarter-multi-device-mock-up
HB-Kickstarter-video
Press Links
Future Considerations
01/ Scale and hierarchy

When examining the site with a fresh perspective, I would go back and refine the scale of images and the font hierarchy.

02/ Occasional Stores

During the product build, the consideration for constructing seasonal and occasional shops was overlooked. The navigation was initially designed to accommodate only the essential categories.

03/ Overall Consistency

The branding and page structures are designed as intended as an interchangeable multi topic pages. However the branding can be more consistent.

04/ OPPORTUNITIES TO IMPROVE THE BUYER ACCOUNT FLOW

We made a light touch on this section of the site and were unable to test it before the launch.

Impact

Concluding the HellaBlack marketplace website project, it has been a journey marked by strategic shifts, thoughtful design iterations, and collaborative decision-making. The transition to a new technology base allowed for a more tailored and flexible approach, aligning with evolving project needs. From conceptualizing user flows to refining the seller support system, each stage was a pivotal step towards creating a vibrant and inclusive online marketplace.

User Impact

The user impact is at the heart of our efforts. Through comprehensive user flows, streamlined navigation, and personalized features, the HellaBlack platform is designed to offer a seamless and engaging experience. The incorporation of the HellaRich Hub empowers sellers, providing a unique space for thought leadership and fostering a sense of community. The personalized user journey, responsive design, and intuitive interfaces contribute to an enhanced experience, ensuring users find what they need effortlessly.

Business Impact

The strategic decisions, such as prioritizing vendor opportunities through the HellaRich Hub and affiliate programs, contribute to a thriving ecosystem. The Kickstarter campaign served as a pivotal moment for funding, highlighting the community's support. The refined category structure, mega menu design, and seasonal shop considerations enhance the platform's appeal, attracting a wider audience. Overall, the project positions HellaBlack as a dynamic and user-centric marketplace, poised for sustained growth and success in the e-commerce landscape.

03/ BEST COMPETITIVE EXPERIENCES

The best experiences let you recover and edit throughout each step in the flow.

Next Project
C.Hill Artistry Hair