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.

 

Tablet

 

Desktop

 

Reflexion

 
Zurück
Zurück

Patisserie Olczak and Son

Weiter
Weiter

3D Insides