Project 4: Editorial Design | Remarked
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.
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.
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.
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.
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.
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.
Minimum Viable Product (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
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.
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.
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.
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.
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.
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
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.
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.
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.
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 😊
