berliner
coNCEIVING A BRAND AND DESIGNING A PLATFORM FOR A WEEKLY MAGAZINE
The final project of my design studies focused on branding and its impact downstream in the digital production line. Driven by my love for print media, I chose to create a weekly magazine. This project highlights my design approach, covering everything from branding to UX and UI design.
the context
Magazines have been shifting to the digital press since early 2000, but it has been only in the recent years that the focus on the digital experience has increased.
The weekly format is having a difficult transitioning. Some of these magazines fail to create online content for events and activities listing, which is one of the main features of their printed versions and source of income.
Two popular american weekly magazines in both printed and online format.
The most relevant weekly magazines in Berlin.
THE CHALLENGE
In order to design a responsive online platform for a weekly magazine targeted at millennials living in Berlin, a key challenge needs to be overcome: Translating the brand image and style into a digital format while maintaining usability.
THE MARKET
To better understand the context of a weekly editorial, relevant magazines in different cities in America and Europe were analyzed.
Their features are very similar: Articles on politics, culture, art, fashion, music, food, and lifestyle in general. However, only a few offer online listings.
Specifically in Berlin, only Exberliner offers a limited listing. It is part of the TipBerlin Media group, focusing on ex-pats and foreign readers who need a connection to the local culture and news in general. On the other hand, Tip Berlin reaches out to the Germans and places news in the backdrop. KaltBlut has a focus on art, photography, fashion, and music.
BERLINER features a complete event listing where users can promote their own events. This feature is a key differentiator from the competition.
Popular Weekly Magazines in Berlin, Europe and North America
Analysis of the competitors' editorial styles.
EDITORIAL STYLE
Because content is similar among competitors, it was necessary to make distinctions based on editorial style (Mainstream & Alternative) and design style (Serious & Playful).
BERLINER will be in the Playful/Alternative quadrant, differentiating itself from local competitors and aiming to identify with millennials eager to engage socially with the city.
personas
Based on the market research, proto personas were defined to visualize a clearer idea of the design problem. Margerite is a social butterfly, looking to make friends while exploring the city’s culture. Ralph owns a bar and likes to promote the local jazz scene. These personas became the basis for defining the problem statement and creating user flows and low-fi wireframes.
Example of Proto Persona and Problem Statement.
THE MOODBOARD
For a weekly magazine to become relevant, it must genuinely represent the city’s culture. For this reason, the mood board was a crucial early step in the design process.
The inspiration of BERLINER is the city’s nightlife. The mood spins around a night out. Anything can happen, and maybe this night will change everything.
In May 2021, clubs in Berlin were declared cultural institutions. The local cultural identity was born out of the club scene from the ’90s after the wall came down. This identity is a mix of the techno scene, diversity, and sexual freedom.
For BERLINER to embody this identity, it borrows references from fashion and music magazines from the ‘90s and newer editorials inspired by an unconventional, chaotic, and colorful esthetic.
HIFI PROTOTYPE
The prototype highlights the gestures and interactions for the primary flows users will experience with BERLINER. This video quickly demonstrates each task.
You can watch the video demo HERE.
Brand and STYLE GUIDElines
A visual style guide was put together for a potential team developing the website or the brand to guarantee consistency in the visual experience. Knowing the complexities of designing, testing, and documenting the design elements, this guide is considered a starting point.
FINAL THOUGHTS
Editorial transitioning into the online world is a reality that newspapers and magazines need to deal with while finding a business model that allows their survival. But in regards to their visual design, the solutions are radically different.
Their tabloid layout defines newspapers with standardized fonts, which can be easily translated into a website format. On the other hand, printed magazines invest heavily in layout design, fonts, and colors to deliver a visual message that rarely gets translated into the browser window.
Magazine design is a crucial challenge that editorials face during their transition. Indeed, some formats, such as the phone size, present major limitations, but there is still room for creativity and the use of new design elements like animation. The magazine design has substantial value on the printed business and should have it as well on the screen. Automating and standardizing layouts, colors, and fonts to reduce cost could carry fatal consequences.
I’ve always loved magazines. They are beautiful objects, and a big part of their beauty lies in their various layouts, fonts, and color palettes. When reading an online magazine, this beauty gets lost in translation and the readers with it. Reclaiming such beauty is not a matter of romanticism but a matter of survival of the medium.
Examples of printed magazine pages that are difficult to recreate on the online medium.
user stories
There are four essential stories associated with the user flows and the wireframes:
-
Reading an article to stay up to date with the cultural trends.
-
Finding an event to participate in and experience the city’s culture.
-
Posting an event to promote the local culture.
-
Signing up as a user to create events and to enhance the experience of accessing the content.
Example of Task Flow, User Flow and LoFi Wireframe.