The FourOneOne is an editorial concept brought to you by ConsumersAdvocate.org.
Building a brand
As the content team at ConsumersAdvocate.org reviewed hundreds of categories, they stumbled across some incredibly useful information and stories that they believed consumers needed to know about. They needed a way to communicate the truth about industries, products, and services to consumers. So they came up with the idea of the FourOneOne. I was brought in to help define the brand from the ground up.
Sketch exercises:
Exploration:
I started out by exploring the meaning behind the name with the team. The term “411” is an Internet slang used as a way to talk about communicating truthful information without holding back. I conducted an exercise where we explored what personality traits we could derive from the term “411”. We put together a word bank and eventually agreed on a few keywords such as: “helpful” , “authentic”, “human” and “empowering”
I then began to explore what visual elements I could associate with the keywords we landed on and began to sketch out a few ideas. After much debate we narrowed down the preferred sketches and I began to create some high fidelity designs.
Final selection
One of the designs stood out from the rest. It was preferred because of its boldness and use of space to embed a hidden message that was reminiscent of the “read between the lines” saying. There was also the possibility of it being able to work seamlessly as a logo mark.
Tweaking
The logo was gradually refined so that the numbers 411 would stand out without being too obvious. This was achieved through the spacing in between letters and the use of color. I did some heavy color exploration but eventually landed on the primary color from the ConsumersAdvocate brand and accompanied it with a slightly lighter blue tone to evoke experience and trust worthiness.
The website
We knew from the beginning that we would be using Wordpress as a CMS, but we didn’t have the resources to create any customized templates. After an extensive search I landed on Voice, because it offered various alternatives for the article page layout. The homepage was a bit more of a challenge. The options Voice offered all featured full width header images that pushed the rest of the content below the fold, and I really wanted users to be able to immediately see at least 3 articles. I was able to achieve this by manipulating the homepage template with a bit of html and css.
First iteration:
A simple UI
I used the 2 brand colors sparingly throughout the site. The use of buttons was kept to a minimum. They were kept simple in their live state, having only a magenta border and empty fill so as to not grab too much attention from the user, this way we could avoid interrupting their reading process. When rolled over the buttons would fill with magenta to easily differentiate in between the up and over states. Fajlla One was chosen for the headings because it shared a similar style to the font created for the logo.
Final UI:
Illustrations and Infographics
The header and interior illustrations I created served as visual metaphors that reinforced the content. Although I tended to lean towards collages, there wasn’t meant to be a preferred technique, because I didn’t want to limit the range of any future designers that might work on an article. The important thing was that any illustration created for an article captured the tone, message or conclusion of what was written.
Infographics on the 411 are meant to be graphic visual representations of information, data, or knowledge intended to present content quickly and clearly. Ideally they should follow the look/feel or technique established in the header illustration to maintain consistency within the article.
Accessibility and SEO
Many of the infographics on The FouOneOne contained a lot of valuable information and keywords for SEO purposes. It was important for us to design them with html and css, this way they could be easily crawled through in a google search and could also be interpreted by screen readers used by the visually imparied.
Engagement
It wasn’t enough to just have illustrations or infographics that reinforced what was written. I also created animations and included plugins to keep readers on the page longer, such as Interact, an online quiz generator.
In the end, the authors were the most valuable asset The FourOneOne had. So to drive that point home, I created custom avatars for each one of them to use as their profile pics.
