TEACH.ORG

A TRUE LEARNING EXPERIENCE (FOR ME!).

BRIEF  /  Rebranding a nonprofit to keep up with the times, and turning this new look into a more modern website experience.

CLIENT  /  Teach.org

ROLE  /  Branding, Digital

AGENCY  /  Matchfire

National nonprofit Teach.org takes on a challenging mission: how can we make students more interested in pursuing the oft looked-down-upon teaching profession? By providing an exhaustive amount of resources, mentors, and scholarships, they aim to shape the future of education, and change the perspective of what it means to be an exemplary teacher. To keep their curb appeal, however, some things needed to change.

THE ASK:

A new brand logo was the obvious first step in the rebrand process. The client's aim was something "clean, modern, and simple." It also needed to translate well to the main deliverable: a completely reworked website.

CUTTING ROOM FLOOR

Below are roads not taken for potential logo concepts, shown to illustrate a creative distilling process that got me to the final concept.

0div-tea0div-tea
tea-row1tea-row1
tea-row2tea-row2
tea-row3tea-row3
tea-row4tea-row4
tea-row5tea-row5
1div-tea1div-tea

The next step in the process was building a UI kit that complemented the stylistic foundation the logo set and adhered to material design principles, as it would serve to make the atom design as quick and easy as possible.

1uikit-tea1uikit-tea
2div-tea2div-tea

I was then tasked to design over 100 different "atoms," or page components, that could potentially be used in any order on the site.

This atomic design methodology meant that no single page would be designed in full, and individual webpages would come together only at the very end of the project. This was a completely new approach to me, but one that worked effectively––and taught me quite a bit in the process.

ATOMS

The UI kit helped to stage many of the style choices used for the atoms that would be used throughout the site. These included obvious elements like color and type choices, and extended into other necessary elements like icon, heading, form, button, and cell styles. 

  • gallery-image
3div-tea3div-tea
  • gallery-image

MOLECULES

Groups of these atoms then merged together to construct larger elements. For example, an icon, active cell style, and text style came together to create a larger functional molecule. Matching molecule stylings across active, inactive, and hover states ensured that the UI had a singular, cohesive visual language.

4div-tea4div-tea

ORGANISMS

Molecules quickly formed “organisms,” or components people typically think of when they think of web and UI elements. Design choices made in the previous two steps made this step intuitive, as each atom and molecule naturally came together to form a whole.

  • gallery-image
5div-tea5div-tea

FLESH ON THE BONES

After all of the functional pieces were completed, it was finally time to finish the puzzle. Based on component wireframes and individual page needs, organisms were placed in the context of real web comps. 

5img-tea5img-tea
6img-r46img-r4

THE RESULTS:

The overhaul achieved Teach.org's goals: a fresh, modernized brand, and a clean, minimalistic website to reignite their mission. The new logo has especially gotten some good attention, as it was seen by 25.7 million in a recent spot that aired during the College Football Playoff National Championship. 

[unex_ce_button id="content_1v7h2s3k8" button_text_color="#1cadb0" button_font="bold" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="5px" button_bg_color="#ffffff" button_padding="20px 30px 20px 30px" button_border_width="2px" button_border_color="#1eb8ba" button_border_radius="3px" button_text_hover_color="#ffffff" button_text_spacing_hover="6px" button_bg_hover_color="#1eb8ba" button_border_hover_color="#1eb8ba" button_link="http://www.teach.org" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]VISIT TEACH.ORG ➼[/ce_button]