AfroTech

AfroTech

AfroTech

AfroTech

Rebranding a conference into a media platform
Rebranding a conference into a media platform
Rebranding a conference into a media platform
Rebranding a conference into a media platform
Brand Identity
Website
App
2019
2018
Live at
www.afrotech.com
Brand Identity
Website
June
2018
Live at
www.blavityinc.com

Scope

Blavity founded the AfroTech Conference experience in 2016 to unite the Black Tech community at scale in the greater Bay Area, California. Year over year the conference grew exponentially, growing in size from 500 attendees to over 10,000 in 2019. The company felt it was time to expand its brand impact with a news and editorial platform, positioning AfroTech as the leading source for startup and tech related content relevant for Black industry insiders and enthusiasts.


Scope

Blavity founded the AfroTech Conference experience in 2016 to unite the Black Tech community at scale in the greater Bay Area, California. Year over year the conference grew exponentially, growing in size from 500 attendees to over 10,000 in 2019. The company felt it was time to expand its brand impact with a news and editorial platform, positioning AfroTech as the leading source for startup and tech related content relevant for Black industry insiders and enthusiasts.

Top Priorities
Top Priorities
Top Priorities
Top Priorities
Top Priorities

1

Create a brand identity system that embodies AfroTech’s strategic direction and unifies online & offline experiences

1

Create a brand identity system that embodies AfroTech’s strategic direction and unifies online & offline experiences

2

Design a content platform that curates tech and startup information for the target audience

2

Design a content platform that curates tech and startup information for the target audience

2

Design a content platform that curates tech and startup information for the target audience

3

Improve the web experience for the AfroTech Conference to address known pain points experienced in previous years.

3

Improve the web experience for the AfroTech Conference to address known pain points experienced in previous years.

3

Improve the web experience for the AfroTech Conference to address known pain points experienced in previous years.

afrotech-quinnton-harris-02@2x

The Concept

Building Blocks of Code | AfroTech’s aspiration to be the hub for all things Black tech compelled us to hone in on the qualities that were intrinsic to the existing AfroTech community. The AfroTech conference created a safe space for professionals to (1) share resources and tools for economic empowerment; (2) develop networks and pipelines for career advancement; (3) connect with another socially; (4) and expose each other to insider-industry knowledge and trends.

We knew conceptually the the brand needed to be bold yet simple and recognizable. We drew inspiration from cubism, focusing the visual design to feature repetitive, simple geometric shapes. Our early compositions read closer to “pixels” or “blocks of code”, and as a result we leaned into exploring hieroglyphic patterns and software-inspired syntax as visual elements.


Logo

After exploring several different font palettes, we created a new logo using Avenir and VP Pixel. We wanted to subtly differentiate ‘Afro’ and ’Tech’ while keeping the name mark as one word and neatly tying in the ‘code hieroglyphic’ concept. From there we designed two variations of the logo. This provides the name mark versatility in many different design layouts. To note, the stacked version of the logo nods to the original logo design created in 2016.

afrotech-quinnton-harris-03@2x

Primary Headline and Body Font

Primary Headline and Body Font

Primary Headline and Body Font

afrotech-quinnton-harris-05@2x

Secondary Font for Emphasis

Secondary Font for Emphasis

afrotech-quinnton-harris-04@2x

Secondary Font for Emphasis

Secondary Font for Emphasis

afrotech-quinnton-harris-06@2x

Typhography

We paired the primary font Avenir with Sentinel, a slab serif typeface designed by Jonathan Hoefler and Tobias Frere-Jones. Sentinel is a beautiful display font for editorial and content systems, and we slightly adjusted the vertical height of the font by 5% in layout to give its appearance more distinction.

For visual patterns and graphic design, we chose the VP Pixel Smooth, a modern interpretation of classical grid font styles. It feels both retro and futuristic, and its symmetry gave us the ability to push our concept forward.


Color

For the color palette, we drew inspiration from tech hardware— circuit boards and computer chips feature colors like green, yellow, blue, and purple.

The top row of colors were primarily used throughout the content platform and marketing collateral. The purple and blue colors were introduced at a later date to push the brand design for the AfroTech Conference experience.


Color

For the color palette, we drew inspiration from tech hardware— circuit boards and computer chips feature colors like green, yellow, blue, and purple.

The top row of colors were primarily used throughout the content platform and marketing collateral. The purple and blue colors were introduced at a later date to push the brand design for the AfroTech Conference experience.


Color

For the color palette, we drew inspiration from tech hardware— circuit boards and computer chips feature colors like green, yellow, blue, and purple.

The top row of colors were primarily used throughout the content platform and marketing collateral. The purple and blue colors were introduced at a later date to push the brand design for the AfroTech Conference experience.

afrotech-quinnton-harris-07@2x
afrotech-quinnton-harris-08@2x

Custom Patterns

We developed simple, repetitious patterns inspired by our concept “lines of code”. These patterns are used as super graphics, overlays and layers across all brand assets.


Visual Design

AfroTech’s custom patterns and hieroglyphs are juxtaposed with lifestyle photography to create beautiful mosaics reminiscent of the brand’s mission and impact. Compositions are designed with positive and negative spacing, high contrast and layering.

afrotech-quinnton-harris-12@2x
afrotech-quinnton-harris-15a@2x

Content Experience

With AfroTech’s new brand system in place, we focused on crafting a digital ecosystem that effectively delivered relevant content to its core audience. The business projected that roughly 60% of the site’s overall traffic would come from its daily newsletter, so we wanted to ensure users could easily navigate, discover and engage their interests.


Content Experience

With AfroTech’s new brand system in place, we focused on crafting a digital ecosystem that effectively delivered relevant content to its core audience. The business projected that roughly 60% of the site’s overall traffic would come from its daily newsletter, so we wanted to ensure users could easily navigate, discover and engage their interests.


Content Experience

With AfroTech’s new brand system in place, we focused on crafting a digital ecosystem that effectively delivered relevant content to its core audience. The business projected that roughly 60% of the site’s overall traffic would come from its daily newsletter, so we wanted to ensure users could easily navigate, discover and engage their interests.

Business Needs
Business Needs
Business Needs
Business Needs

1

Create prominent CTAs for driving subscription sign ups to the daily email newsletter

1

Create prominent CTAs for driving subscription sign ups to the daily email newsletter

1

Create prominent CTAs for driving subscription sign ups to the daily email newsletter

2

Develop a strategy for a growing library of AfroTech video content

2

Develop a strategy for a growing library of AfroTech video content

2

Develop a strategy for a growing library of AfroTech video content

3

Design a crowd-sourced database to house educational content for tech entrepreneurs

3

Design a crowd-sourced database to house educational content for tech entrepreneurs

3

Design a crowd-sourced database to house educational content for tech entrepreneurs

afrotech-16@2x

Site Map

Site Map

Site Map

afrotech-quinnton-harris-17@2x

Homepage Experience

Homepage Experience

Homepage Experience

afrotech-quinnton-harris-18@2x

Homepage Experience — Below the Fold

Homepage Experience — Below the Fold

Homepage Experience — Below the Fold

afrotech-quinnton-harris-19@2x

Content Streaming Experience

Content Streaming Experience

Content Streaming Experience


Gated Content

To acquire more emails for the daily newsletter and strengthen AfroTech lead generation strategy, we designed a system that prevented first time visitors from accessing content pages. To reduce sign up friction, we designed a ‘complete your profile later’ approach that would allow users to enjoy access to content immediately. Furthermore, browser cookies would allow access to returning users who submitted an email. And if a returning user came back to a locked context experience and resubmitted their email address, they were given a friendly reminder to finish sign up.


Gated Content

To acquire more emails for the daily newsletter and strengthen AfroTech lead generation strategy, we designed a system that prevented first time visitors from accessing content pages. To reduce sign up friction, we designed a ‘complete your profile later’ approach that would allow users to enjoy access to content immediately. Furthermore, browser cookies would allow access to returning users who submitted an email. And if a returning user came back to a locked context experience and resubmitted their email address, they were given a friendly reminder to finish sign up.


Gated Content

To acquire more emails for the daily newsletter and strengthen AfroTech lead generation strategy, we designed a system that prevented first time visitors from accessing content pages. To reduce sign up friction, we designed a ‘complete your profile later’ approach that would allow users to enjoy access to content immediately. Furthermore, browser cookies would allow access to returning users who submitted an email. And if a returning user came back to a locked context experience and resubmitted their email address, they were given a friendly reminder to finish sign up.


Gated Content

To acquire more emails for the daily newsletter and strengthen AfroTech lead generation strategy, we designed a system that prevented first time visitors from accessing content pages. To reduce sign up friction, we designed a ‘complete your profile later’ approach that would allow users to enjoy access to content immediately. Furthermore, browser cookies would allow access to returning users who submitted an email. And if a returning user came back to a locked context experience and resubmitted their email address, they were given a friendly reminder to finish sign up.

afrotech-quinnton-harris-20@2x

(1) E-mail Gated Content

(1) E-mail Gated Content

(1) E-mail Gated Content

afrotech-quinnton-harris-21@2x

(2) Submission Confirmation

(2) Submission Confirmation

(2) Submission Confirmation

afrotech-quinnton-harris-22@2x

(3) Profile Creation Email

(3) Profile Creation Email

(3) Profile Creation Email

afrotech-quinnton-harris-23@2x

(4) Returning User Experience

(4) Returning User Experience

(4) Returning User Experience


Content Architecture

We developed a system where 3 content types — articles, videos and resource links — would be present on every page throughout the experience. Each page would fall under at least one of the primary, user-centric categories of News, Education, Enterprise, Startups, and VCs. This structure enables users to have smarter content recommendations as well as positioned the company to collect more data for future personalization.


Content Architecture

We developed a system where 3 content types — articles, videos and resource links — would be present on every page throughout the experience. Each page would fall under at least one of the primary, user-centric categories of News, Education, Enterprise, Startups, and VCs. This structure enables users to have smarter content recommendations as well as positioned the company to collect more data for future personalization.


Content Architecture

We developed a system where 3 content types — articles, videos and resource links — would be present on every page throughout the experience. Each page would fall under at least one of the primary, user-centric categories of News, Education, Enterprise, Startups, and VCs. This structure enables users to have smarter content recommendations as well as positioned the company to collect more data for future personalization.

afrotech-quinnton-harris-24@2x

Content Structure

Content Structure

Content Structure

afrotech-quinnton-harris-25@2x

Category Filter Results Experience

Category Filter Results Experience

Category Filter Results Experience


Tech Resources

In an effort to build the largest archive of trusted resources for budding tech entrepreneurs, we designed a beta version of ‘Tech Resources’, a searchable database for members of the AfroTech community. We organized entries using the same Categories as article content at highest level, and then added more granular search with a tagging system.


Tech Resources

In an effort to build the largest archive of trusted resources for budding tech entrepreneurs, we designed a beta version of ‘Tech Resources’, a searchable database for members of the AfroTech community. We organized entries using the same Categories as article content at highest level, and then added more granular search with a tagging system.


Tech Resources

In an effort to build the largest archive of trusted resources for budding tech entrepreneurs, we designed a beta version of ‘Tech Resources’, a searchable database for members of the AfroTech community. We organized entries using the same Categories as article content at highest level, and then added more granular search with a tagging system.

afrotech-quinnton-harris-26@2x

'Resource' Database Experience

'Resource' Database Experience

'Resource' Database Experience

afrotech-quinnton-harris-27@2x

Predictive Search Results

Predictive Search Results

Predictive Search Results

afrotech-quinnton-harris-28@2x

User-Generated Resource Submission

User-Generated Resource Submission

User-Generated Resource Submission

User-Generated Resource Submission


Conference Web App

In a week long go-to-market campaign, we honed Blavity Inc’s new brand positioning to educate its core audience while establishing blavityinc.com as the new authority on all things Blavity. In addition, the company commissioned new marketing collateral and business tools with the new brand identity.

Release States

Alongside AfroTech’s full year marketing and production plan for the conference, we created a feature release strategy to reprioritize the sitelet experience based on both business and user needs. The three phases below provided our Engineering, Marketing and Business Development teams clear direction for planning downstream work flows.


Conference Web App

In a week long go-to-market campaign, we honed Blavity Inc’s new brand positioning to educate its core audience while establishing blavityinc.com as the new authority on all things Blavity. In addition, the company commissioned new marketing collateral and business tools with the new brand identity.

Release States

Alongside AfroTech’s full year marketing and production plan for the conference, we created a feature release strategy to reprioritize the sitelet experience based on both business and user needs. The three phases below provided our Engineering, Marketing and Business Development teams clear direction for planning downstream work flows.

afrotech-quinnton-harris-29@2x
afrotech-30@2x

Sitelet Map

Sitelet Map

Homepage Experience

afrotech-31@2x
afrotech-32@2x
afrotech-33@2x

Product Experience Release Map

Product Experience Release Map

Homepage Experience

afrotech-quinnton-harris-34a@2x

Homepage Sitelet Experience

Homepage Sitelet Experience

Homepage Experience

afrotech-quinnton-harris-35@2x

Conference Speaker Nomination

Conference Speaker Nomination

Homepage Experience

afrotech-quinnton-harris-36@2x

Conference History

Conference History

Homepage Experience

afrotech-quinnton-harris-37@2x

‘Live’ Conference Experience on Homepage

‘Live’ Conference Experience on Homepage

Homepage Experience


Speaker Schedule

We designed a custom app for the conference itinerary to (1) allow users to easily navigate programming by Conference Tracks; (2) clearly differentiate Partner events from standard AfroTech events; (3) provide a conference planning tool for users to build a personalized itinerary on their native calendars; (4) and to standardize a workflow for the AfroTech Event Planning team to update changes to the itinerary in real-time.

The wireframe below is a prototype we tested with users to address pinpoints related to navigation and itinerary planning.


Speaker Schedule

We designed a custom app for the conference itinerary to (1) allow users to easily navigate programming by Conference Tracks; (2) clearly differentiate Partner events from standard AfroTech events; (3) provide a conference planning tool for users to build a personalized itinerary on their native calendars; (4) and to standardize a workflow for the AfroTech Event Planning team to update changes to the itinerary in real-time.

The wireframe below is a prototype we tested with users to address pinpoints related to navigation and itinerary planning.

afrotech-quinnton-harris-prototype-schedule@2x

Prototype Schedule Experience

Prototype Schedule Experience

Homepage Experience

afrotech-quinnton-harris-39@2x

UI for Schedule Experience

UI for Schedule Experience

Homepage Experience


Conference 2018

This massive brand reconstruction culminated in the production of the Conference experience, which integrated the new brand identity system and the new digital ecosystem. The lights, large installations and vibrant crowd brought to fruition a dream to make AfroTech the center of the Black Tech universe.


Conference 2018

This massive brand reconstruction culminated in the production of the Conference experience, which integrated the new brand identity system and the new digital ecosystem. The lights, large installations and vibrant crowd brought to fruition a dream to make AfroTech the center of the Black Tech universe.

afrotech-quinnton-harris-40@2x
afrotech-quinnton-harris-41@2x
afrotech-quinnton-harris-42@2x
afrotech-quinnton-harris-43@2x
afrotech-quinnton-harris-44@2x

Project Team

Quinnton Harris Creative Director

Anthony Crawford Designer

Hasani Tyus Designer

Brylan Donaldson Chief Brand Officer

Jonathan Barronville Senior Software Engineer


Jeff T. Nelson CTO

John Ketchum Editor-in-Chief, AfroTech

Morgan DeBaun CEO