TheDive: online magazine for the ‘woke’ generation
Project duration: 1 month, May 2021
The second month of the boot camp was devoted to designing an online magazine based on the needs and goals of a persona of our choice. The workload was divided between members of our team: Enikő Sliz-Veres, Sarah Dippenaar, and myself.
Persona
Despite being given a ready-made user persona we were allowed to develop it further. Since Paula, our persona is a representative of Generation Z from Germany our team conducted thorough research on the target group. Based on our learnings we decided to add some more characteristics to the persona:
- Paula wants to be up to date with the most important news, events, and recent products
- She’s aware of the current global problems and wants to be a positive influence on the changes she wants to see
Problem & Goal
Generation Z, people born between the mid-90s and early 2000s, are digital natives. Due to spending much time online, they’re exposed to more news and sources of information than previous generations. A wealth of knowledge blended with curiosity encourages them to challenge what they understand — it’s very easy to lose their trust if the information found online proves to be misleading. Apart from this, they are aware of current global problems, are not afraid to speak loud about them, and want to have a positive impact and contribute to changes.
Our goal was to create an online magazine providing Gen Z with valuable content on the most important news and topics of their interest. As our persona wants to become an artist we the topic of art became second in the category hierarchy. All of this was to be wrapped in the Gen Z aesthetics.
Competitive Analysis
The research phase was kick-started with competitive analysis. We were initially informed on the online magazines that our persona reads, but we decided to go a bit deeper and find more competitors to better understand standards and find opportunities for our project.
Researching competitors and creating the competitive analysis framework was my job. Each of the team members analyzed 2 competitors.
User Research
Even though we received a persona our team was not feeling confident enough to start working on the project without an in-depth understanding of the target group, Germany-based Generation Z.
Our next step was user research. Each of us conducted our own research which was later discussed and merged into a single report. Some of my primary sources include reports from Google, Deloitte as well as Bloomberg and Inc. articles.
Our top findings on Gen Z include:
- they have less patience than other users — they will exit a channel/website if it doesn’t immediately prove useful or interesting
- they believe and rely on brands to shape their world
- they form opinions on a brand based on their ethics, practices, and social impact
- they are thirsty for the latest information. Serious local and global news that can make them appear ‘woke’, but also current lighthearted information on their passions
- the line between serious and lighthearted content is blurry
Based on this research our project goal, presented above, was shaped.
User Journey Map & Task Flow
The next step was to create a user journey map and task flow — both of which I was responsible for.
To create the user journey map I reviewed opportunities, strengths, and weaknesses identified in the competitive research. These combined were to ensure we’ll provide our users with the best experience possible.
The following step was task flow. Since our user journey map was quite detailed I decided to go with a simple ‘hero’ task flow illustrating how our user goes about completing their goal — the ‘happy path’. This task flow proved very helpful in the next phases.
Architecture
Based on the previous steps one of my teammates produced a sitemap of our online magazine. We opted for simple navigation — a top navigation bar with main categories fixed on every screen.
And then came time for the first wireframes. As we learned during the research our users are very impatient and have to find what they are looking for almost instantly, otherwise, they might leave our page.
Since our users are very information-driven we made a decision to provide them with lots of content on the homepage and each category screen.
Also to ensure that the latest news, events, and products are easily accessible we devoted one of the top categories to these. The very middle category in the top navigation, Hotspot is the answer to Gen Z’s need to be up to date with what’s happening in the world right now.
Moodboard
Once the page structure was ready we moved on to the visual design. During the research phase, we learned about Gen Z’s (imperfect) aesthetics. It can be described with three key phrases: intentionally ugly, domestic cozy, gone weird. Based on these I created our mood board.
A/B Testing
When the mood board was ready we set on creating 2 versions of the final product to later conduct A/B testing. One of the versions was created by me. Once we had these ready it was time to conduct the preference test. Since none of the team members knows people fitting the target group (Gen Z from Germany) we opted to use usabilityhub.com and recruit 8 participants.
Apart from this, I conducted analogous A/B testing among 4 of my friends. However, as they are outside of the target group (aged 25+, originating outside of Germany) results of this test were not used.
Participants were asked 2 questions — which design do they prefer and why. The majority (63%) chose the design on the right. The top reason for this choice was higher contrast, which makes it easier for users to read.
Style Tile
After creating our mood board and A/B testing we moved to a more detailed design. Based on the ‘winning’ design my teammates next created a style tile for our online magazine. It uses vivid colors, big and flashy fonts, and some playful elements since the generation we targeted likes emojis and joy. To sum up, it’s weird, bold, and intentionally ugly.
Usability Testing
As the feedback from A/B testing didn’t provide us with insight on usability I decided to perform moderated live usability testing. Two participants, aged 27 and 29, were scheduled from my friends.
Participants found it easy to navigate and perform tasks. The only difficulty was to find a category with the most recent/important events and news (Hotspot). It took them less than 6 seconds and once they found it, the meaning of the category name became very clear.
During testing, participants were to describe everything that they’re doing and think out loud. This information proved very valuable — I was able to identify weak points and faults in our design. These included some eye-bugging empty spaces, too high a fixed navigation bar covering too much content, and some more.
Final Design
The last part of this project was to finalize the visual design. I was responsible for this task.
When working on our magazine I wanted to make sure that it is accessible to all users and meets WCAG standards. Therefore, my first task was to check contrast and fonts — both of them meet requirements. Tools that I used are Start (plugin for Figma) and Siteimprove Accessibility Checker (addon for Chrome).
Learnings
- Teamwork
My entire life I worked in a team probably less than 5 times, I’m not accustomed to it and I see myself as an individualist. For these reasons I wasn’t the happiest to hear we’ll be working in teams.
Thank this project I learned that working in a team demands much more effort than individual projects, but it can also be very rewarding. Especially if you work with great people and who respect each other and your opinions.
2. I don’t have to and won’t always like what our users like
Having a background in graphic design it was very difficult for me to work on a project with an intentionally ugly aesthetic. I’m used to producing eye-pleasing designs and that’s what I find natural. It was extremely difficult, demanding, and at points frustrating to work on something so starkly different. However, that’s what our users like, and as a UX designer, I have to remember that when working on a project my preferences have to be moved aside.
