Project Intro
FWD.us was launched in 2013 by Mark Zuckerberg and Bill Gates to pursue comprehensive immigration reform in America. By 2017, the organization was known for its smart, nonpartisan approach to policy reform, and was preparing to add the criminal justice space to its remit. I succesfully led design and development of a new visual and verbal identity and a web platform that empowers FWD.us to do what it does best — break through partisan polarization to move America forward.
The Challenge
FWD.us was launched in 2013 to pursue comprehensive immigration reform in America. By 2017, the organization was known for its smart, nonpartisan approach to policy reform, and was preparing to add the criminal justice space to its remit.
The election of President Trump and the heightened polarization of America’s political parties put FWD.us’ two challenging issue spaces under even more social and political strain. FWD.us recognized a need to refresh its brand identity so that it could speak to Americans across the political spectrum, focusing on improving the country by rebuilding its broken systems, regardless of partisan politics.
What was really challenging about this project was FWD.us' wish to stay bipartisan. What this meant was that most of the exciting examples and moodboards we showed were deemed leaning too much to the left. Essentially, everything well-designed or trendy immediately read too left-leaning for our test group. We needed to strike the perfect balance between the political aisles, while creating something that feels fresh and modern.
Strategy & Insight
We can’t always unite Americans across political parties, but we can mobilize them around ways to realize the country’s core ideals.
People who care about seeing America succeed exist across the political spectrum. By focusing on smart actions toward collective prosperity, universal American values like opportunity and advancement, and the diverse range of people who make the country great, FWD.us could speak to Americans in a way that deprioritizes political identity and focused instead on reform opportunities to benefit everyone.
Exploration & Initial Design Directions
We explored over 12 different semi-built-out directions for the possible brand, along with the design systems that would emerge from each. Below you can find a smattering of our initial exploration, along with a Google Slides collection of a few of the directions, namely 11 on the first round and 4 on the second round. See all the directions here. Credits: First round directions 1, 2, 12 & 11 by Steven Bazarian, Directions 3 & 4 by Karson Smith. Directions 5, 6, 7, 8 & 9 by me. Second round directions 2 & 3 by Steven Bazarian & John Kapenga, directions 1 & 4 by me.
Final Brand Identity System: Logo
The new identity is a visual representation of the FWD.us’ approach: To strategically move the right pieces forward to unlock something new. The new identity is very much in motion: It leans heavily on forward movement and we see a lot of pieces unlocking in the collateral, visually emphasizing FWD’s big message. The new identity strikes a balance across party lines: The F-lettermark is impactful and active, while the serif wordmark balances the identity out to appeal to grasstops audiences as well.
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin 0 auto 0;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/326979515?autoplay=1&loop=1&autopause=0&background=1&quality=1080p' frameborder='0'></iframe></div>
Typography & Color
For typography, I chose a distinguishable serif font to balance out the blocky shapes. The color system leans heavily on black & white, leaving main stage to big, natural photography. It’s accentuated by the occasional color pop, making call-to-actions stand out, especially online.
UX Design
After the new brand and visual system was locked in, it was time to dive deep into the UX phase of the project. I led a workshop with the FWD.us team in San Francisco, working collaboratively to create the FWD web platform UX from scratch. After leading the workshop, we came back to NYC and applied our learnings, producing a set of initial wireframes. After user testing and iteration on the wireframes, both us and the FWD team were happy about the user flows and the overall UX, and we were ready to explore how to apply the new brand and the new visual system into the new online properties.
See wireframes here.
UI Design
I both creative directed and designed the full website user experience and user interface, focusing especially on the mobile user experience, microinteractions, thoughtful animation and the ease of taking relevant actions.
Throughout the website, the forward motion and moving blocks, defining elements of the brand, are very much present. They connect the web experience tightly with the overall visual system. Here are a few examples of forward motion and thoughtful animations, bringing the brand to life on web.
Animation & Microinteraction
Throughout the website, the forward motion and moving blocks are very much present, connecting the web experience tightly with the new brand. Here are a few examples of forward motion and thoughtful animations, bringing the brand to life on web.
