Visual Development Process
Brand Deck Exercise
To begin visual development, we asked our client to participate in a brand deck exercise in order to identify PublicBnb's core characteristics. We asked him to go through the deck to select five words or less that he felt best described his brand. We also asked him to explain why he chose particular words and what he liked about them. Conversely, we asked him to describe what he didn't like about other words in order to help us understand what the brand shouldn't represent.
The five words he chose were: approachable, simple, professional, best-in-class, and trusted.
He wanted PublicBnb to be friendly and approachable in order to encourage renters and potential tenants to use the application. Typically when people think of government, they think "difficult," "bureaucratic," and "mundane". He wanted PublicBnb to be the opposite. He wanted the application to be simple and easy—not tedious and cumbersome. Finally, he wanted PublicBnb to appear professional and trustworthy. He recognized that many landlords were hesitant to rent to Section 8 tenants and he felt these qualities were important to overcome that fear.
Brand Star & Mood Boards
We took the five words our client selected and created a brand star. Each point of the star served as an anchor point and each designer was tasked to create a mood board that emphasized one of the words of the star. The designers were also asked to be mindful and incorporate the other words into their mood board as well. This gave us multiple options for the client to consider.
We brought the client back in and asked him to participate in a red dot/green dot exercise to vote on what he liked and didn't like about each of the mood boards. He gravitated to the overall feel of the professional-focused mood board. He liked the minimalism and simplicity of the icons and forms. He gravitated toward the orange accent color because he thought it brought brightness and warmth.
He didn't like the cold, corporate vibe of building photos. Instead, from the approachable mood board, he was drawn to the photos where people appeared friendly and down-to-earth. These photos seemed to address his concern that renting to Section 8 tenants was a cold, bureaucratic process.
We used our client's feedback to guide our visual design.
For body copy we went with Open Sans for its easy scannability and readability. This sans serif font is clean, simple, and welcoming to the eye. Government websites typically use heavy serifs. We wanted to distinguish ourselves from other Section 8 resources by going with something more approachable.
For the logo, we used Adamina because the font not only paired well with Open Sans, but it brought a feeling of trustworthiness, reminiscent of fonts found in newspapers.
As a bonus, both fonts were available through Google Fonts which allowed our client to take advantage of Google's lightning fast servers and reduce font load time.
The primary color of our application is white. We wanted to use a neutral background color to have a clean and simple look. We contrast the white with Bright Sienna, which elicits fun, joy and friendliness. Approachability was important to the client and we felt warmer tones helped accomplish that goal. Finally, we chose blue as our accent in order to evoke trust and reliability.
Icons & Logo
Our application is fairly text heavy. Property listings and tenant profiles contain a substantial amount of detail (housing preferences, payment information, criminal backgrounds, etc.). We used icons to break up the text, increase visual interest, and quickly communicate information.
Because the icons were fairly specific to our needs, we created them manually using Sketch. We chose a hand-drawn art style in order to maintain the casual, approachable vibe our client wanted. In addition, we limited the colors to reduce visual noise and to help our call-to-actions stand out.
Finally, we updated the client's pre-existing logo in order to be consistent with the rest of the design.