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
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.
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.
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.
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.
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.
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.
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.
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.
