A TRUE LEARNING EXPERIENCE (FOR ME!).
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 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.
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.
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.
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.
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.