Editorial responsive Design
This week's project was to create an online magazine. The brief was given through a user persona which in our case is a 30-year-old businessman. In a team of 3, we had 4 days to present our responsive design for a smartphone, tablet, and desktop.
As we had the direction leading towards business, innovative tools and techniques we need to figure out if the given persona is still up to date. Another task was to figure out how to create a suitable magazine for this kind of target group.
Time: 4 days
Team: 3
Tools: Figma, Figjam, Useberry, Maze, Google forms
Device: Smartphone, Tablet, Desktop
Methodology: Editorial Business Plattform
Deliverables: High-Fi and presentation deck
-
Research/Empathise
Use of qualitative and quantitative research, a deep competitor analysis to understand the user and the editorial business
-
Define
Creating How might we statements, review given user persona and eventually create a new one, current user journey map. Summarize a problem and hypothesis statement
-
Ideate
Focusing on a Minimum Viable Product with the help of information architecture. The creation of site maps and a happy user flow. Sketching of first design ideas.
-
Prototype
Sketching Low- fidelity Ideas followed by Wireframing Mid-Fi´s on Figma, Components and Autolayouts in a responsive Design System and High-Fi prototypes.
-
Testing
Remote and online testing. Mid.FI testing with Useberry, High-Fi testing with Maze and desirability testing with usability hub.
The Brief
In a Brief, we had a given User Persona. The task was to create a suitable platform for the Persona and to figure out if this Persona is also covering the market.
User Research
Survey Results to figure out if the given Persona is relevant like that for the market
Interview Findings
“One main concern was about unpleasant structure and that the access to personally relevant topics should get improved.”
And another pain point from our interviews is that more customized content is wished in one single platform.”
How might we Statement
“How might we optimize the sign-up option for the user that they get a curated summary of interesting articles.”
“How might offer more video and audio formats to the user.”
“ How might we help people to find relevant content by allowing them to filter their content type.”
Define
After focusing on users’ needs, creating affinity maps, emphasise maps and HWM Statements we defined the findings in a new User Persona and User Journey Maps.
User Persona
User Journey Map
Now that it is clear what the Platform needs to be personal, the user can browse through the website by offering categories that suit his interests, the platform offers more video and audio content and the user can choose which format he prefers. We created the problem statement to bring the research to the point and a Hypothesis statement to measure the success.
Problem Statement
“We have observed that the user has a hard time finding relevant articles, without spending a significant amount of time searching for them.”
Hypothesis Statement
“How can we make it more efficient for the user (James) to consume customized content in the preferred format?”
Competitor analysis
To have a look what other editorial websites are presenting on the market we compared different features of the websites and created competitor mood boards.
To summarize the findings we created a reverse Moscow method where we pointed out what features all the companies offer or whatnot
-
All Competitors had
Hero Article
Search function
Categories
-
Most competitors had
Premium Content
Advertisement
Audio
Subscribe Button
Visual comparison
To get a visual impression of the competitors we created mood boards of the Patisseries. We figured out that they all chose brown and yellow colours.
Information Architecture
As the problem was defined we were able to structure our mobile website.
Sitemap
To structure the content of our Website we created a sitemap
User Flow
We were all set up for the user flow and created the happy path which shows the situation of James “opening his email with a recommended article.” From there he has the option of going to the website where are different actions to take as well as on his account page and in his settings. There he can personalize his content and the format of the content.
Ideation
Here we created 3 different solutions for a user flow and decided on the most important features and the most user-friendly structure.
Mid -Fi
The Mid-Fi shows the user flow of James where he comes to an article page, afterwards he lands on his customized Homepage. He follows his account to change preferences to customize his format.
Testing
The Mid-Fi got tested from 10 participants 50% dropped off at the first task the other 50% succeded with all of the 3 tasks. Most likely people dropped off because the task was “to add the article to the reading list”. The Icon to click for adding the article was not responsive, therefore the tester couldn't understand the task was done.
Design
The first step was to create a Moodboard for the Design.
Design Guide
For structured work and a good orientation, we created a Styleguide and Design System.
Design System
High-Fi
As we made a responsive Design System we were able to create a Desktop and Tablet version as well.
