Case Study: Editorial Design for Seekers

Design Challenge: Create a responsive user interface for a fictional trend magazine

Jil Zepp
6 min readOct 15, 2021

Project Length: 4 days during the Ironhack UX/UI Bootcamp

Team members: Marianna Ostrowska, Naiara Odriozola, David Geoffrey

My role: UX Research and UX Design

Devices: Desktop, Tablet, Mobile

Tools: Trello, Figjam, Paper & Pen, Figma, Maze

Challenge: Design a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of the User Persona assigned to your group.

Design Process

Stage 1 — Empathize and Discover

User Research

Our goal was to further define the assigned User Persona: 28-year-old Candice, who is always on the hunt for the latest fashion and lifestyle trends. By means of a refined User Person, we are then able to identify the relevant user problem(s), the competitors and to design our own responsive online magazine.

We planned and implemented a survey and interview guide targeting people between 20 and 35 years, who we consider “lifestyle trend seekers” and who consume online magazines on a regular basis. Our research goal was to find out more about the target group’s online reading behaviour, to get more specific insights into their interests and to discover their frustrations with the existing online trend magazine they consume.

Key Findings:

  • They often end up on online magazines through “a trigger” for example in their Instagram feed
  • 80% read online magazines on their phone
  • 60% said that the lack of time keeps them from reading online magazines
  • Prominent and catchy images catch their interest and make them click on an article
  • Most of them read online magazines during work breaks and their travels to/from work.
  • They were interested in the topics of Art, Music, Politics and Lifestyle (Design and Fashion).

Insights:

  • The design solution should consider: Mobile first
  • Personalized content could help the user to decide faster which article to read
  • Implementing a visual language that the user already knows from Instragam and other image-focused magazines and platforms helps to get their attention

User Persona

We then developed the User Journey Map in order to understand Candice’s frustrations as she scrolls through an existing online magazine so to uncover the design opportunities that arise from these.

Competitor Analysis

The user research revealed the competitors that we should consider in order to get an understanding of the trendy lifestyle magazine industry standards in terms of their features as well as their branding and user interface design. We analyzed Dazed, AnOther, Nylon and Vogue.

Key Findings:

  • All of the competitors accommodate very specific target groups in terms of age and specific lifestyle interests
  • The overall visual language of trend magazines is simplistic and minimal, refraining largely from colours and making heavy use of white space
  • They use big and catchy images and headlines to motivate the user to click on an article
  • On the article page, the role that images play is as important as the one of the text.

Stage 2 — Define

Based on our User Persona and the User Journey Map we formulated a concise Problem, How Might We and Hypothesis statement before entering the ideation phase.

Stage 3 — Ideate

Armed with a clear understanding of the user needs and the inspiration from the competitor analysis we started ideating on the user experience. We brainstormed possible solutions with the User Persona and Problem Statement in mind. We narrowed down our pool of ideas and prioritized by means of the MOSCOW method.

Within the framework of this sprint, we chose to implement the following ideas: The user can create a profile in order to save an article for later and more so, they can create boards/collections and save articles into their own categories ie. they can curate the magazine’s content. On the home page of the magazine is a section with some of the user’s saved articles and collections, as well as a section with articles recommended for them based on the content they have liked, saved, or visited previously.

Features:

  • Save an article for later
  • Create a collection
  • Save an article to a collection
  • “Recommendations” section on the home page
  • Shortcut to their “Collections” on the home page

User Flow

On her way to work, Candice checks out the online magazine and chooses an article about the latest exhibitions opening in Berlin. She finds this article in the recommendation section on the home page. She saves the article to one of her existing collections as she wants to look it up again later.

Styletile

Next, we developed the brand and visual identity of our fictional online magazine. We created multiple mood boards before merging our favourite ideas into one style tile. The style tile will ensure that the team is on the same page in terms of the look and feel, once we start building the design system for the user interface.

Stage 4 — Develop and Test

Mid-Fi Prototype

Based on our low-fi ideations we created mid-fi wireframes and sent our first prototype out for remote testing in Maze. A total of 12 people tested the mid-fi and successfully completed the task with a misclick rate of 17% on the article page (see screen 2 below).

Task: The testers’ were asked to choose the main article on the home page and save it for later to the existing board/collection “For Work”.

Finding: We observed that on the article page some testers clicked on the profile icon and/or on the hamburger menu — instead of going straight for the “save” icon.

Insight: The “Save” icon was not perceived as an important CTA by some testers — potential iteration on the size and position of the icon or even the icon itself.

Hi-Fi Prototype

The challenge of the 4-day-sprint did not only lie in discovering, defining and solving the user problem(s) and analyzing the competitors, but also in designing our own brand and a responsive user interface for mobile, tablet and desktop. We designed mobile-first as our research suggested that 80% access online magazines from their phone and adapted the interface accordingly to the other devices.

Next Steps:

  • Put our first version of the mobile hi-fi prototype in Maze for testing, obtain user feedback and iterate
  • Prototype the user task related to “finding and saving an article to a collection” for the desktop and tablet hi-fi and put it out for testing
  • Develop the Profile page including the creation, editing and viewing of collections

Learnings:

  • Different and sometimes conflicting perspectives of team members with diverse backgrounds can be fruitful through empathic listening and by choosing someone to take up the role of the team’s facilitator
  • It’s important to really understand the mid-fi usability test results in order to transform the insights into tangible elements in the interface
  • One-on-one testing of the mid-fi prototype could have verified or disclaimed our assumption that some testers did not recognize the “Save” icon
  • This was the first time we had to design a UI from scratch and to establish our own design system (optimally following the atomic design methodology) — and believe me, we struggled a lot. Four people trying to cook up somethin’ good in the same pot is hard! As it was our first time, we were all super keen on working on the UI and improving our Figma skills but for future references: I would recommend having one or two people responsible for creating the most important elements as a starting point and to ensure coherence.

--

--

Jil Zepp

Product Designer with a background in cultural studies and graphic design | Former Ironhack Student | www.jilzepp.com