L
O
A
D
I
N
G
Interface 01
Interface
01
Branding 02
Branding
02
UX STRATEGY 03
UX STRATEGY
03

Bish Blog:
Responsive Website

Bish is a comprehensive and well respected sex and relationships education site for teenagers. Founded by Justin Hancock in 2009 the platform soon became widely respected especially in the UK. When Justin got a sponsorship by Durex he decided that it was time to take the blog to a new level.

Challenge:
When Justin approached LOOP he had already built up a big repertoire of online content over the years. Previously he had used a simple Wordpress theme, which didn’t fit the needs of the website anymore. The main challenge was to restructure the content and replace the old version with a versatile framework that would stand out. To achieve this the platform had to be reshaped fundamentally while still maintaining the connection to the original look and feel.

Role
Digital Product Designer & Art Director
Scope
Product Strategy, UX-Strategy, UI-Design, Branding
CLIENT
Bish sponsored by Durex, Agency: LOOP
01
Interface

More than a simple blog

With the new design approach Bish developed into an authentic, unique platform that reached users on an emotional level. The new structure improved content discovery, readability and user engagement.
Homepage
With blog articles being a priority, the landing page architecture served the purpose of displaying a diversity of different content pieces. This allowed the users to easily browse and explore.
Mobile
A custom grid system enabled a seamless cross-device experience. The mobile experience was especially important because of the young target audience who primarily used mobile devices.
02
Branding

Visualizing the brand attitude

Bish had a playful, vivid vibe that needed to enhance and perfectly align with the professional level of the brand. A characteristic and consistent visual storytelling aaproach was key element of the new brand experience.
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.
Typography
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.
Illustrations and mood
In the past, Justin had already been using illustrations that soon became the centerpiece of the visual language. Their multi-colored, comic-book style helped to even visualize topics that were often considered embarrassing or uncomfortable. With his unconventional approach Justin was able to illustrate each topic, while still giving the feeling of a very mature way of dealing with it. This also perfectly aligned with his straightforward tone.

To enhance his existing approach even further, I helped Justin with the creation of illustration guidelines and together we implemented a new approach how and where the illustrations were to be used. Primarily, we decided that for each article Justin could choose to create a visual option to display within the grid and to highlight the article. We also introduced quotes as an additional visual that utilized his illustration format. These quotes emphasized the cheerful tone and created a safe, happy environment, where the teenagers could feel taken seriously and understood.
03
UX STRATEGY

A custom-tailored experience

A new navigation concept, a modular layout structure and innovative blog features improved both the content discoverability and the general reading experience.
Solving the filter issue
The existing page had multiple options to filter the content but all of them were positioned in different areas of the page, which led to a confusing discovery experience. In order to improve that, I decided to bundle the functions in one place but faced the challenge that the number of items displayed per filter option differed significantly from one another. Another problem was that while filtering was an essential part of the page, the clear focus was still the grid and the articles.
Therefore I chose a sticky sidebar, which combined all the filter elements. It stayed independent from the main navigation making it accessible at all times. Second level filter elements were hidden by default to reduce space and keep the user focused on the content.
Layout and structure
In the previous layout Justin had used a standard Wordpress template which displayed articles one by one in chronological order. This was problematic because newer articles were not always necessarily higher in relevance.

For the new layout I decluttered the information structure by removing irrelevant parameters making the headlines the main focal point. To make scanning easier, articles were now displayed in a custom grid which featured various content types to make them more appealing to the user by keeping the playful vibe of the page.

The new design gave Justin more freedom and flexibility on how and where he wanted to present a certain blog post. Within the new layout Justin had full control over the arrangement of the grid and could therefore easily react to any user behavior trends.
Make teenagers love reading
Most articles were 2000 words or longer, which made them quite hard to digest. To solve this problem the article pages needed a strong visual hierarchy and a high level of readability.

I started out by dividing existing articles in several independent content blocks and designed a sub-navigation which allowed users to jump to a section by clicking the sub-headlines displayed.

Additionally comments were now more than just the bottom part of the page and could be linked directly to a specific line or word, making itmade it easier to find relevant questions or discussions. Also we implemented the option to visually break up the long-form text blocks with other content pieces like images and quotes.
Final Thoughts
Creating a unique platform for Bish was certainly one my favorite projects during working in an agency. Throughout the process Justin was very open-minded, which allowed me to completely rethink the existing platform in order to create something entirely new and exciting for his audience. The result exceeded his expectations and served as a valuable foundation to bring his brand to the next level.
UX/UI, Art Direction
Eve Beauty: Native App
UX/UI, Art Direction
Parsa Beauty: Responsive Website
L
O
A
D
I
N
G