Project 4: Editorial Design | Remarked

Adriana Fischer
8 min readMar 29, 2021

Case study about designing a responsive online magazine

The 4th week has started with a new interesting challenge: editorial design. The sprint was four days, the same as the 3rd project. This challenge was a bit different than the previous ones and on top of that, we had to create our editorial design responsive.

The Challenge

Design a responsive online magazine, that meets the needs and goals of one of the provided User Personas for Desktop, Mobile and Tablet (not mandatory).

My colleague and I have worked remotely in Figma on this project for four days and in the fifth day we had to present it. During all the project, we have communicated via video calls and chat, which was great, as this helped a lot to stay in touch and discuss all the steps and ideas.

After the kick-off project, we have chosen our User Persona from a list of five User Personas and started to read information about the magazines that our user persona reads and about the behaviors of this type of personas.

User Persona

The Persona that we have chosen is James, a 33 years old ambitious businessman. He is passionate about Sociology and economics and is interested in innovative tools and techniques for better retention of the readings.

The magazines that he reads are Bloomberg, Time, Forbes and TechCrunch.

James, our Persona

Even though we had our User Persona, we have made some research, in order to understand better the business, competitors, brand attributes and user’s behavior.

1. Empathize

1.1. Business Analysis

Lean UX Canvas

As we are working with Agile method, we have created a Lean UX Canvas, that helped us recognize the core of the business problems and break them down into key assumptions and created a foundation for us, in order to run tests that reduce risk and frove to good UX decisions.

Lean UX Canvas

Market Positioning & Competitive Analysis

We have listed all the magazines that our user persona reads and made a comparison of their functionalities and this helped us create the Market Positioning.

Market Positioning & Competitive Analysis

Brand Comparison (Visual Competitive Analysis) for Desktop and Mobile

As the Visual analysis is very important, we have created as well a Visual Brand Comparison of these four magazines that our User Persona reads. We have analyzed the desktop website, as well as the mobile website.

While working on the visual comparison of the brands, we have noticed that all the competitors are bold, image and text heavy, are using contrasting color scheme, the background is white and the color of the text is black, except the the parts where the magazine wants to highlight some information. This comparison helped us a lot to have a market overview and start to sketch some mental ideas about our upcoming brand.

Visual Competitive Analysis

Sitemap

As we were planning to create a new magazine website, we had to plan our ‘road trip’ map and create it’s most important sections, therefore we have created our Sitemap.

Sitemap

2. Define

2.1. HMW

To help brainstorm and explore new ideas which helped us solve our project in an innovative way, we have created different HMW Statements and at the end we have chosen a final HMW Statement:

How Might We help the user retain absorbed information after finishing an article.

2.2. Problem & Hypothesis Statement

After we have created the HMW Statement, we have continued with the Problem and Hypothesis Statements, in order to explain the problem and the outcome that we predict.

The Problem Statement

Our website was designed to achieve retaining information in articles. We have observed, that the normal websites are not meeting user needs, which is causing low traffic to magazine.

The Hypothesis Statement

We believe that our Website will help achieve higher information retention and revisiting the website. We will know we are right with rise in feature usage and bi-daily re-visitations.

2.3. Moscow & MVP

As we wanted to prioritize our requirements and find the best features for our brand, we have continued with the Moscow and MVP Methods.

Below are the outcomes from the Moscow and MVP Methods.

Moscow

Minimum Viable Product (MVP)

MVP

2.4. User Flow

As we wanted to see better what would be the flows, we have created the User Workflow. At the end, we have ended up with five user flows, which later on we have tested them and we have continued our Project following the testing results. Therefore, as most of the users preferred the Highlighting User Flow, we have started to focus on this feature’s flow.

User’s Steps:

• The User comes to the home page
• The User click’s on the article
• The User enables the ‘Highlight text’ feature
• The User uses the ‘Highlight text’ feature, highlighting the works that are important for him/ her
• The User can inspect all his highlighted words in the footer
• The User can export the highlighted words, if he/she wants

User Flow- Highlight

2.5. Moodboards

For setting up a look and feel of the new UI project, we brought together different images related to the main subjects of the magazine and crated the Moodboard.

Moodboard

2.6. Brand Attributes & Logo

Brand Attributes

Before to start ideating, we have defined the brand attributes of our Magazine and we have divided the attributes into two categories: Visual and Emotional.

Brand Attributes

Logo

Focusing on the competitive analysis, our brand attributes and design system, we have tried to find the right Logo for our Magazine, which embraces them.

As one of our main features that we have implemented for the articles for helping the users retain information easier was “Highlighting” and the goal was to make this feature known by the users, we have used it also in the Logo and created a name that relates to this feature.

Logo - ‘Remarked’

2.7. Design System

After defining the Brand Attributes, we have created the Design System, because we wanted to stay consistent with icons, typography and colors. We have divided the colors on different categories, like brand colors, primary colors, secondary colors, utility colors and neutral colors.

Design System - typography & colors
Design System - components
Design System — buttons
Design System - header & footer

3. Ideate

3.1. Ideation : Crazy 8

Having in mind the final HMW Statement, we have started to ideate, using the Crazy 8 Method. We have voted on our ideas and the final ones were mainly a mix between them.

Ideating

3.2. Lo-fi Prototype & Testing

Lo-fi Prototype

As we wanted to see how the users find our ideas, we have sketched some Lo-Fi prototypes which we have tested with Maze. The users can decide which option is best for them to choose, in order to retain more information while reading an article:

• Read the general summary
• Choose one of the three types of summaries
• Enable highlighting
• Enable rapid fire quiz
• Watch video about the article & the possibility to answer a 3 questions quiz
• Listen audio about the article & the possibility to answer a 3 questions quiz

Lo-Fidelity Prototype that has been tested

Testing

The Testing was performed by 12 Users and the results showed that the most preferred options were the Highlighting Feature and the Summary of the article. We wanted to continue our project with both options, but we have realized that due to the time constrains, we would not be able to make them, therefore we have continued with the Highlighting Feature, as this one had the higher testing results.

Lo-Fi Testing — Maze

3.3. Mid-fi (Desktop - Tablet - Mobile)

Before to start the Mid-fi prototypes, we have created the main components for the buttons, icons, header, footer, title and components from our pages. After we had our components, we have started to work on our Mid-fi Prototypes in Figma, starting with the desktop website, followed by tablet and mobile.

Mid-Fi Prototype

3.4. Hi-Fi Prototype (Desktop, Mobile, Tablet)

As soon as our Mid-fi prototypes were done, we have started to design our Hi-fi prototypes. (We knew that the best way would have been to be able to test the Mid-fi as well, but unfortunately this was not possible, due to the short time for the project.)

Below can be seen the outcome of this sprint: Hi-Fi prototype of the Remarked magazine’s landing page, an article page, the ‘Highlighting text’ feature implemented and the ‘Export’ feature. The Hi-Fi is available for desktop, tablet and mobile.

Hi-Fi - Prototype

Outcomes & Learnings
• Working structured from the beginning is key;
• UI systems are hard to build so stay focused;
• Good team consultation is important;
• Frames responsiveness it’s harder than expected;
• Cry-laughing is a great motivator at the end of the day.

Thank You for reading 😊

Adriana Fischer