#D8D8D8 Digital Magazine

8 weeks | Tool: Sketch, Adobe XD, Adobe photoshop, After Effect, Principle | 04.2020

INTRO.

About.

I worked with Terence Sharpe to design a responsive online platform for a magazine directed to meet the needs and goals of the presented user persona.

Role.

I was responsible for brand identity, ux research, marketing analysis and shape a UVP product. Also responsible for user interface, interaction design.

Outcome.

After 8 weeks, we present a branded, interactive Hi-Fi prototype. The final product/ solution #D8D8D8 as a concept digital magazine about art, fashion and lifestyle that solved our user’s problem and fit their needs. They can scan , listen, read the content. Compare to other digital magazine, we archive 80% more user satisfaction.

Check on Behance

RESEARCH.

User Interview & Quantitative Research

& Competitors Research

Anna. Designer

“I got inspirations from book, music, art even on social media and podcasts”

Ben. Creative Director

“I don’t normally ‘read’ a magazine, I like to view images and layouts”

Amy. Fashion Designer

“As a fashion designer, I don’t want to be a trend follower but a trend maker”

PROBLEM STATEMENT.

HMW Questions

⇒How Might We interact with user when they want to

Scan 👀 ?

Listen 👂🏼 then?

Read 📖 after?

INFORMATION ARCHITECTURE.

Site Map – User Flow

GRID.

414 × 896

WIREFRAME.

Mid-Fi Prototype

MOODBOARD.

Brand Identity

being real

future forward

unexpect

niche

Font & Color

DESIGN.

Hi-Fi Screens

#01. Landing-page

The “Daily nonsense” as the landing page can use as wallpaper. Also, like most print magazine there is horoscope section tell what to do or not. So we adopt it use as our daily-nonsense to give our user a good vibes for entertainment.

#02. Homepage

On the homepage, user will see the monthly magazine cover. To have a clear overview and information about what this monthly topic about.

#03. Poster-like stories for 👀

Scrolling down the homepage is poster-like stories. We made each story a poster-like layout for user to quick scanning before decided to focus on a section.

#04. Story detail-Page

An opens-up story detail page for user easy access to story contents and move on to the next one.

#05. Menu and search

The Minimalist navigation bar help our user easily choose the right contents and topics to read, listen or scanning.

#06. Contents-Page

On the content page, there is catalog. It contain all the stories for the current monthly topic, from the oldest one to the newest one. Then is the main Stories section, from the newest to the oldest.

#07. Subscribe & Follow on Podcast

User can use the email subscribe block to subscribe for our newsletter any time and use the podcast block to follow our podcasts.

CASE STUDY.

Design thinking

Design Process

BRAINSTORMING.

1 Day Workshop-Whiteboard storming

With the presented User Persona(Image above) we got. I start with different questions, what is “trendy”? what a trendy marketeer do? Is she a fashion Blogger? Is a fashion & lifestyle magazine we are going for? Are we going to do a Mobile first product?

Enable to visualise and analyze the information & question we had and also to bring up our own ideas we did whiteboard Brainstorming and came up with 4 main questions to focus on.

We decide to do a Mobile-first Fashion & Lifestyle online platform, cause our person Candice read with her phone most of the time also the study Mobile vs. Desktop Usage in 2019 shows 58% of site visits were from mobile devices. To define our product as a fashion & lifestyle digital magazine is because of our persona Candice’s goal and magazines she’s reading. We identified our users’ positions as Designers, Artists and creative persons cause the goal of our product should be given inspirations as a source of their work. So all the information we got give us ideas about who we should interview and what kind of product we are going for.

RESEARCH.

Empathise with the user

Qualitative & Quantitative research

The goal of this research step is to Empathise with the user. To gain an empathic understanding of our user’s frustrations and problems that we are going to solve. We adopt qualitative & quantitative research methods. I interviewed 9 people in person and did quantitative research online. I found a lot of collected data online with more than thousands of responses so in this project I decided not to do my own survey but use the ready data to analyze.

Qualitative Research

Enable to get the best results I need to interview the “right person”. The person shares the same goal as our persona, Candice. “Need to be on top of the trends, dress fashionable and tech-savvy” is the goal. So I found Ben who’s 38 years old, working as a creative director in a luxury brand. Amy who’s 28 workings as a fashion designer for an international fashion company. Anna, 36 years old working as an accessory designer for her own brand.

Quantitative Research

I noticed from my in-person interview, all of the interviewees using podcasts daily and they don’t actually “ready” all the contents in the magazine but scanning/ viewing. So in Quantitative Research, I did research about reading habits and also include podcasts usage.

Insights:

→ People only read 20% of the text on the average website.

→ Most people interested in visual content than text. And most of them interested in infographics than normal pictures/images/photos.

→ 15% Podcast user is interested in listening to lifestyle & fashion-related content. (Second favorite topic)

DEFINE.

Affinity diagram

Empathy map & User persona

In this stage, my goal is to analyze the raw data and synthesis findings. Which is to define our “ real users” and create a problem statement we need to solve. In a simple way, we need to answer 2 questions during this stage:

⇒ who’s the user?

⇒ what user problem we need to focus on?

I used 3 design methods to help me: 1. Affinity Diagram. 2.Empathy Map. 3. User Persona.

Affinity Diagram

After collecting all the data from qualitative & quantitative research. I did an Affinity Diagram to help me analyze all the raw data and informations. I write down quotes, insights and also relevant informations from my user research in different posts, then sort the posts into related group. The point of this stage is to synthesize user research in order to turn data into actionable information. Also give me a visual overview so that I can physically see the trends and relationships in the data.

Empathy Map

User Persona – Christina

Adopting Empathy Map and User persona design methods. We define our user type also our user’s frustration and goals. Which give us much clear direction to address our product.

Problem Statements

To define the problem we are going to solve, we need to create problem statements knows as well as POV(point of view). We used the “How Might We” questions method to open up the exploration space to a range of possibilities. In this stage, the goal is to have a clear vision can address our product.

Combine the research we had, I re-phrased the POV and HMW questions:

⇒ HMW interact with the user when they are scanning first?

⇒ HMW interact with the user when they want to listen then?

⇒ HMW interact with the user when they decide to read?

RESEARCH.

Marketing positioning research

Feature Comparison & Branding Comparison

After the defined user’s frustrations and needs, with the problem statements in the mind. We start the research, focused on Competitors(contents, target user, platforms, marketing, brand personality, etc). The goal is by doing research and competitive analysis to identify opportunities and threats in the current marketplace. Help us focus on improving upon what already exists rather than reinventing the wheel. To visualize the finds, we used 1. Feature Comparison 2. Branding Comparison 3. Market positioning Map.

From the persona Candice, we know she reads Vogue, People, Cosmopolitan, Elle. From the User research we did, our users read Vogue, Elle, Vice, etc. mainstream magazine but also they like to read e-flux, Buffalozine, 032c, self-service, 1granary, etc. independent publications.

Feature Comparison

Branding Comparison

Market Positioning Map

The red dot is what we see our product. We want focus on visual content to create “poster-like” news feeds to be both eye-catching and informative. Cause from our research most users are scanning the contents and enjoy the visual layout.

IDEATE.

Site Map & User flow

HMW Questions & Workshop

In the ideate stage, based on all the research and HMW questions we had. We re-create HMW questions to clear up and as the answer to the previous HMW questions.

⇒ HMW interact with the user when they are scanning first?

HMW create a print feeling magazine to a digital magazine?

HMW creates a monthly topic issue for a digital magazine?

HMW put catalogue into a digital magazine?

HMW make one page for one story like the print magazine?

⇒ HMW interact with the user when they want to listen then?

HMW create the Podcasts section?

HMW let the user follow us on Podcasts?

HMW create the Podcasts lists?

⇒ HMW interact with the user when they decide to read?

HMW show the contents to the user?

And some overall HMW questions:

HMW make highly seductive/interactive content rather than passive presentation?

HMW make a fun, satirical humour and niche digital magazine?…

With these questions, we start brainstorming and drawing different low-fi on the paper and bring our ideas together. We also did the Card Sorting design method to help us to create the information architecture for our site. In the end, we create the Site-map, User flow, and Mid-fi prototype.

Site Map and User Flow

Mid-Fi & Information Architecture

RESEARCH.

Visual Competitive Analysis

Visual Identity & Branding

In this research stage, we going to focus on the “look” & “feel”. The user interfaces design and interactions. We did the visual competitive analysis and Mood board to give us a design direction and visual identity.

Visual Competitive Analysis

Mood-Board

Before researching for our mood-board, we try to use the adjective words to identify the physical, character, and personality traits of the brand.

⇒Being real, open-minded & fun, satirical humour, niche⇐

DESIGN.

Concept

Hi-Fi & Interaction

We decided to make a “print-like” magazine with digital interaction. Cause the researchers we had, the users first scanning the magazine and to read some selected contents. Also, the users are all print magazine readers, they will feel much familiar with it.

⇒HMW make “print-like” magazine for user to scanning?

Monthly Topic, with a different cover & content’s layout.
“Daily nonsense” as the landing page. As the most print fashion magazine, there is a horoscope section for monthly luck or unluck.
On the homepage, the poster style’s story is almost one screen for one story.
Add a “catalogue” section, it’s also much easier for the readers to have an overview of all the monthly new stories updating state.

Enable to make the prototype look more authentically, I decide to create March 2020 issue with a real topic, cover layout, and stories layout, etc.

#D8D8D8 Concept

#D8D8D8 is an online platform about design, art, fashion & lifestyle. With unexpected daily suggestions and confusing monthly topics. You can scan, listen, and read the contents anywhere you want with few clicks.

Why “#D8D8D8”? It’s the very first color we used as a UX/UI designer. Cause it’s the default color in Sketch software. As a designer, we should remember where we start. It’s also about being real .

Who is for ? People who have no time to read but want to get update daily. They can quickly scan the homepage news or listen on podcasts during breakfast and on their way back home.

#D8D8D8 Hi-Fi Animated Prototype

#D8D8D8 Hi-Fi Prototype Screens

The #03/2020 issue HomePage. The topic for March Issue is — Copyright. Cause Picasso said “ good artist copy, great artist steal”. So for the March issue cover, I decide to copy from the most classical fashion magazine Vogue. And all the contents and stories are selected to fit in this topic.

Daily nonsense as landing page, it’s can use as wallpaper and also gives a good vibes as memes for entertainment.

I find some stories and re-design them to a “poster-like” news feed. I keep each story the same size also the position of date and story title to be organized.

STYLE GUIDE.

Branding & Atomica Design

CONCLUSION.

Learning & Future work

Resource

It’s quite a challenge to create an animate Hi-Fi branded digital magazine in this short time. Doing research in all my design process is really important and necessary, it’s help me to define my product direction. To find out magazine readers are not “reading” gives a good problem statement to focus on. People do judge things by it’s cover, especially happened with online contents. Compare to other digital magazines, we archive 80% more of user satisfaction(form our user testing and interview).

The future work: # Create desktop version # Test & Iterate # Other possible features

Research Resource

Edisonresearch PDF, Podcasts-Statistics, Print vs Digital magazine research, Digital trends research 2019, Contents research, How people read on the web, etc.

Thanks for reading! Check my Behance for design presentation.