Climax Magazine
By: Andreea N
Tags: UX Design, Ironhack, UI Design, Bootcamp, Online Magazine

Ironhack Berlin Bootcamp week 5.

Given task- Web Editorial starting from a user persona. Team: Hanna Hong and myself.

Always starting a project I’m asking myself Why?, Who?, How?, What? and When? This critical investigative stage should not be bypassed because I think it is a key component in the design-thinking process. It is where carefully formulated questions reveal themselves as a great way to approach a design problem even before starting.

Why? Why is there a need for another teenage magazine?

Defining our goal and problem by empathizing with our users. The user persona was provided in the assignment. Paula a 19 years old user, part of the z gen. Research showed us that while millennials (pretty much our generation) consumed experiences, for generation Z on the other hand, consumption is the search for truth, in both a personal and a communal form.

The search for the truth is at the root of all Generation Z’s behavior. Gen Z, therefore, is also called the “True Gen.”

Such behaviors influence the way Gen Zers view consumption and their relationships with brands. We found out that we should be attuned to three implications for this generation: consumption as access rather than possession, consumption as an expression of individual identity, and consumption as a matter of ethical concern. Also according to our conducted research, our users are interested in topics such as LGBT, race, politics, mental health, sexual objectification of the body, the importance of culture, environmental issues, and manipulation of the human ego and they are also opened to unique and artsy visual experiences. And most of them feel that adult writers writing for teenage magazines are inauthentic and boring.

The core of Gen Z is the idea of manifesting individual identity. Consumption, therefore, becomes a means of self-expression — as opposed, for example, to buying or wearing brands to fit in with the norms of groups.

Who? Who are our main competitors and what are they doing right or wrong?

In defining our problem we needed to see what is there on the market. While top-teen publications cover the latest on fashion, beauty, celebrity style, entertainment, and teen issues. We wanted to provide another type of content to our users, a publication that gives teens a way to not only read about important news but also have their thoughts heard loud and clear. So we found that our main competitors were Lithium Magazine, Affinity Magazine and Crybaby Magazine, which were founded by Generation Z representatives. Having this in mind we did our positioning matrix and visual competitive analysis to see where we can place on the market.

How? How might we help teens to express themselves and deliver quality content to them?

For getting a general feeling of what we want to transmit to our targeted users, a Moodboard was necessary. Our board was aiming to brand attributes like Progressive-Urban -Feminine-Bold-Edgy -Outspoken-Smart-Original-Exciting- Contemporary- Instagramish.

Next step, we did our Style Tile to make sure that we’ll deliver consistency in our design. Also to set a common visual language. We decided to use two fonds- Special Elite for the headlines and Open sans for subtitles and content. Brainstorm for our magazine name, was super fun and intense because we were aiming to target mostly female users we went all in and decided to call in Climax- the most intense, exciting, or important point of something- the culmination. And this decision led to us having a bold animation when entering the website, a simulation, a visual climax to get our users in the mood.

What? What is the product? What are the stages of the test results?

Moving on to our prototype, we started with low-fi on paper and conducted an initial test on our colleagues so we could move on to mid-fi and test again. Each time I was curious what is the user’s opinion and what are the other issues that they may encounter, considering parameters such as consistency, usability, visibility, accessibility, and compatibility. I find this step in the process so helpful at this stage before the product becomes more complex.

Coming from a project management background I know that any errors that slip in at the beginning of the process are likely to be a pain to rectify when the product is ready.

Reaching the hi-fi’s we had several visual options so decisions needed to be taken, but we managed to overcome this mainly because of the closing deadline. The whole process was super fun and I got the chance to work in Figma this time- aiming for showing the interactions in the prototype.

By the end of the project, I felt that Figma will be my tool of choice in prototyping from now on…

Here it’s a link to the result, out MVP on Climax Magazine.

Given task:

subscribe to our newsletter (just to see the unhappy path- error message).

read the Greta article and go back home.

see & browse our artbook section.

go back to the home page.

Accessing the landing page the nice animation is starting while hovering to get the users in the Climax mood. This was meant to set expectations on what is the content of the site.

On the home page, we decided to split the content into 2 sections:

READ section -where you can find articles about specific topics. Social justice platform that directly caters to teens while also addressing many significant issues that are often overlooked.

SEE section- An artbook, a collaborative space, showcasing the voices of aspiring teen artists. Animations for the artbook section were made aiming to have a real feel of browsing a physical magazine. To create consistency in the posted material, all of the pages have gif-animation in tune with the given subject.

We also did a mobile version where I found that the challengee was to contain all the amount of content ant to compromise on what stays and what goes on the mobile version.

Takeaways