Digital Lifestyle Magazine

Online Lifestyle Magazine

As part of my UX/UI bootcamp at Ironhack, we worked in a team of two to create a Responsive Online Magazine.

The User Persona

User Persona

In this editorial project, the focus was on UI design, so we already have a user persona. We developed the magazine to meet the personas requirements.

Candice, 28 y/o — The Trendy Marketeer

  • She reads Vogue, People, Cosmopolitan, Elle.
  • She sees herself as a trend-seeker and uses publications as a source of inspiration for work.
  • She reads whenever she has a free slot — especially in public transportation, long journeys during work trips or waiting areas.
  • Goals: be on top of the latest trends, dress and appear fashionable, get more tech savvy.

Candice’s Brand Attributes

Then we defined 5 Brand Attributes that correspond to Candice:
Trendy, Confident, Up to Date, Inspiring & Open minded.

Visual Competitive Analysis

Competitive Analysis

In this step, we performed a visual competitive analysis to define the brand attributes of VOUGE and COSMOPOLITAN, which are the references of the user personas.

This step helped us identify parallels with the brand attributes of our user persona.

Mood board

Then we created 2 different Mood boards according to the brand attributes of our user persona and conducted a survey.

Mood board A vs. Mood board B

We had the participants decide which of the mood boards was more in line with the following brand attributes we had defined at the beginning:
Trendy, Confident, Up to date, Inspiring & Open minded.

The Results of the Survey

Almost 90 percent of participants found that „Mood board A“ corresponded more closely to the attributes.

Final Mood board

The keyword we defined for this project is “Inspirational” and so the references for the style of this project were Pinterest and Instagram, for example.

Style Tile

After deciding on “Mood board A”, we went further and created a style tile with more concretely defined UI elements such as font sizes, colors, icons, buttons etc.

Style tile for Online Lifestyle Magazine

Card Sorting

We asked 5 users to do a card sort so we could define an intuitive and logical information architecture for our Online Lifestyle Magazine.

We conducted research on topics relevant to our Persona, Candice, and wrote down all these topics and asked users to group the topics in a logical way and name the categories.

after 5 card sorting rounds we defined the Categories for the Website.

Categories based on 5 Card Sorting rounds

The Site map

Site map for Online Lifestyle Magazine based on users Card Sorting

User Flow

User Flow

Lo-Fi Wireframe

At this step, we were in the ideation phase.

We had the idea to implement an innovative way of presenting articles in an online magazine by splitting the screen horizontally into two parts.

To do this, we put the article suggestions and the article content on one page.
The article opens on the right side, while the other article suggestions and related articles move to the left side of the screen and are easily accessible for the user.

The Lo-Fi Wireframe

Mid-Fi Prototype

Mid-Fi Prototype

The Task for the Mid-Fi Testing was to click on the Article: “LOVELY DRIED FLOWERS” and then to click on a suggested article.

All of the users completed the task frictionless. The results showed that the user found the split screen to be very harmonious and described it as “nice to look at”.

Hi-Fi Prototype

Next Steps

In the next step we will iterate the layout and further adapt it to the user’s needs.

My Name is Dana. I’m doing a UX/UI Bootcamp at Ironhack