Case Study: The Plug Online Editorial

Your connection to trending fashion and hot tech.

Project Overview

The Plug is an online editorial magazine that combines curated fashion content with trending news in technology. It is a perfect solution for fashion forward trendsetters who are also devotees of tech.

My role

Length:3 weeks

This was a partner project in which my partner and I shared the following responsibilities:

|Methodology | Research | Business analysis | Brand positioning | User Interviews |User Flow | Information Architecture | Wireframes | Brand Guide | Visual Design | Prototyping |

1. The Challenge

Design, validate, and deliver a branded and engaging responsive online platform for a magazine based upon the needs of a provided User Persona.

Methodology

The Double Diamond Model

For this project, we used the Double Diamond model to guide us through the User-centered design process.

2. Discover

Market Research

We began by researching competitors based on Candice’s needs and habits in order to identify opportunities for design features. We wanted to position our product to provide curated, on trend content in both fashion and technology.

Market Positioning Map for The Plug Editorial

While all but one of our competitors, WIRED Magazine, offered on trend fashion content, only 50% provided users with trending topics and products in the technology field.

In order to gain an understanding about what was already available on the market, we researched a few of the more successful online editorials that offered fashion and technology content. We learned that the major online fashion editorials did not offer significant technology content, creating a position in the market for our product.

2. Define

As a team, my partner and I chose to design an online editorial magazine for a trend-seeking, young professional.

Our goal was to provide Candice, the Trendy Marketeer, with a unique platform that would serve as both a source of inspiration for her work in marketing, and a creative means of increasing her tech savviness.

Information Architecture

We wanted to keep the site navigation simple in order to minimize clicks throughout the site. To make sure we achieved this goal, we created a sitemap to serve as an outline for the website which included 3 levels of navigation. After finalizing the structure of the website, we ideated on potential user flows before deciding on a final “happy path” for the user.

Site Navigation
User Flow

4. Design

We began the ideation phase by brainstorming possible features for the website that would showcase the goals we had in mind. We knew that we wanted to include curated fashion and trending technology content, which meant we were excluding categories such as politics, shopping, and horoscopes.

Crazy 8s

More Design Features

The Name:

My partner and I settled on the name The Plug for our editorial website because in pop-culture, a “plug” is an inside connection, which is what we wanted users to consider our product to be — an inside connection to fashion and trending tech.

Saving:

We gave the user 2 saving options:

(1) Saving images only, which would be saved to a “Mood board.”

(2) Saving whole articles, which would be saved to a “Hotlist.”

To keep with our theme, we called saving “Sparking”

LOW-FI Wireframe

Next, we developed a low-fi prototype to test our website’s flow. After reviewing the data, we revised the flow to improve the users intuitive navigation.

Revised User Flow

After reviewing tester feedback from both Maze and usability interviews, we revised the user flow. Instead of having users view the “Double” page first, we switched the flow so that users would view the “Fashion Plug.” This was a more familiar concept, a fashion article with a saving feature similar to Pinterest, and it worked well as an introduction to our editorial sites style and language. We also made the decision to drop the term “spark” and replace with a more intuitive signifier — “save.” By dropping some of the novelty language, we improved the functionality of the site.

MID-FI Wireframes

UI STYLING

Visual Competitive Analysis

To finalize the look of our editorial, we performed a competitive visual analysis of 3 of our main competitors including Vogue, Elle, and Wired Magazine. We noticed that our competitors used sans-serifs for headers and serifs for body text, and simple color palettes. We also took note of the different editorial layout styles for each.

Visual Competitive Analysis

Brand Attributes & Mood Board

Next, my partner and I compiled a mood board in order to narrow in on our visual styling. We then tested that mood board to determine if it reflected our brand attributes.

Brand Attributes & Mood Board

Color Palette & Typography

Pulling from the mood board, we selected a dark primary color with lighter accents, neutrals, and semantic colors to create a neon effect. Our typography choices, BioRhyme and Monserrat, we chose to combine the look of the higher end Vogue and Elle editorials, with the edginess of Wired Magazine.

Color Palette & Typography

Design System

We created a design system to keep track of our style guide, pattern library, and other design assets. We also collaborated on an original logo for our editorial.

Design System

5. Deliver

FINAL STYLE TILE

After finalizing the style tile, we performed desirability testing to see which UI design was more favorable.

The first two screens were the options we tested. Based on tester feedback, we developed the 3rd screen which included better alignment, smaller images, and a dark, textured background.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Leesa Williams

Leesa Williams

Wife and mom of four, aka CIRCUS RINGMASTER.