The old Bish website
During the initial research phase I analyzed the current website, competitors and both the existing and potential user base.
Having identified the major pain points and how to solve them, I laid the groundwork for a new user experience strategy. Before diving deeper into wireframes and flows, I had to take into account the core values of the brand and define a visual language that would support and communicate those values to the users.
Defining the brand values
As Justin is a qualified youth worker it was very important to him,´ that the platform was perceived as highly professional. Nevertheless his content was never boring but entertaining and made his young audience stay curious. In his own words, Justin described Bish as real and original, telling the truth in a snappy, fun way.
From Justin's description about what's important to him, I derived the following brand values for the new platform:
Professional and educating but never dull.
Youthful and fun but never childish.
A consistent color system
The previous website used neutral colors - mostly black and white - for the interface but received a very colorful look due to the illustrations Justin did all by himself. At this point he chose all the colors coincidentally. In order to create consistency throughout the new design I defined a palette of nine primary colors, which worked perfectly with each other while still leading to a multicolored visual appearance.
To establish a recognizable color coding system, each color was connected to a specific category. On top of that Justin received secondary colors for his illustrations and instructions on how to best pair them with one another.
To communicate the brand’s visual message I also needed to find the perfect typography choices that would complement the color choices. Since the main purpose of the site was to provide information through long-form blog articles, having a legible headline and copy font played the most important role.
I settled for Gotham after testing various typeface options. Additionally I selected two light-hearted fonts for the illustrations and graphics. The geometric look of Gotham perfectly aligned with the professional approach of the platform and provided readability, while the other two font choices were able to move the overall tone to a more cheerful and individual direction.