page-header

d/s: online magazine

ux/ui design | responsive website

Project Description

d/s magazine is an online fashion magazine that focuses on street and trendy fashion style. The Berlin-based magazine picks up the topics and content from Berliners and their unique styles. Unique and out of the box are the standout features, and d/s magazine gets inspired and grows from that fundamental, not afraid to go out of the box, with colors and type. The editorial design should make a statement and reflect the creative personality of the city.

This project was a collaboration with Daniella Salamon, during the IronHack UX/UI Design Bootcamp. We needed to make a responsive editorial website within a 5 day design sprint.

 

Commission
Collaboration

Deliverables
Responsive Web-Design

Tools
Sketch, Principle

Picture from IronHack Learning System
Project Background

The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as millennials grow older, demanding all sorts of content.

The best magazines and newspapers had already launched their digital version in the early 2000’s, but it has been only in the last 5 years that the digital experience started to take its shape.

With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and diving into it.

User Persona

For this project, we had already been assigned some user personas from which we needed to choose which one to work with, and we chose Candice.

Candice is a 28 year old trendy marketer. She lives in Berlin and really likes Berlin’s unique style. She often reads online magazines such as i-D, Numero, and L’Officiel to keep up with the trend. She is not afraid of being bold and out of the box. She wants to be uniquely trendy and is not mainstream. She sees herself as a trend-seeker and uses publications as a source of inspiration for work. Candice reads whenever she has a free slot — especially in public transportation, long journeys during work trips or waiting areas.

Her goal is be on top of the latest trends, dress and appear fashionable, get more edgy and bold looking but not extreme. She doesn’t want to look boring.

Photo by Mohammad Faruque on Unsplash
User Research

Based on our persona and our research, we learned that most digital magazine readers are educated, young and upper middle class – millennials. So we interviewed some people that matched our target user: fashion enthusiasts, Instagram influencers, people in the fashion industry, and Berliners, because our main focus was Berlin, with the intention to find out which publications they read and why they kept coming back to that certain publication, what features they liked the most, and which features they didn’t value much.

Visual Competitor Analysis

We heard a lot of big names such as Vogue, Elle, Cosmopolitan, etc., and these three were the most repeated, and also matched our user persona, so we decided to work on them for our competitor analysis.

Branding

While I was focusing more on brand positioning and brand attributes, Daniella came up with this beautiful, bold logo that matched so well with our brand attributes:

Ruggedness: outdoorsy, tough, bold, out of the box
Excitement: daring, spirited, imaginative, up to date

And never boring.

Site Map and Content

While I was focusing on doing the Information Architecture and Site Map, Daniella curated content for our post. We had so much input from different sources.

Site-Map
Wireframe

After we were done with the ideation process, we decided on a user flow and sketched our wireframes. After some iteration on the low-fi and mid-fi, we came up with hi-fi wireframe that we did usability testing on, and then did another iteration.

Daniella and I worked together on how the website would look like on desktop, but I was more involved with the desktop wireframe and the prototype, which Daniella later adapted to the mobile version.

Desclimer: all photos and contents on the wireframe belong to their respective owners.

Style Guide

I decided to make a sample style guide to make the handover and further design easier. I put together all the elements used to design the desktop version

Check other projects