Project 4: Web Magazine

For my next project it is my honour to present to you Team VMA (composed of Victor, Madini and yours truly) as well as our creation; an online webzine for the young artist of tomorrow!

First, we were presented with a challenge:

“Design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of one of the presented User Personas. Deliver a consistent, branded, and engaging experience and all the documentation that would allow the project to continue after your intervention as UI Designers.”

We then had to choose a persona we liked out of 5 available. We went with:

Chosen user persona

And now, on to the process, which can be split into three sections:

1- UX Research

2- Prototype & Test

3- Hi-fi Solution

UX Research

We went about this in two ways: the analysis of users and the competitive analysis of current established webzines.

Analysis of users (interviews):
Thanks to these user interviews, we were then able to create an Empathy map, where we put ourselves in the perspective of our users to better grasp what they tend to experience, think, see and feel. This process was a great way to filter and focus on the most relevant information in our findings (marked in dots) and later find solutions.

Empathy Map

Competitive analysis:

In order to better understand what was already on the market, we focused on the webzines Paula regularly read (Rolling Stone, Repeller and Vice), which we then compared in terms of design, tonality of articles and range of topics covered.

We then highlighted the aspects that we initially felt inspired by for our own design: black background, 1–2 columns and using 1 brand colour throughout the webzine.

Competitive Analysis

This led to the creation of a clear and concise problem statement:

Problem statement

Thanks to this problem statement, we knew what our webzine needed to be as well as the goals it needed to accomplish:

What is Le Titre?

Which brings us to the end of the UX research.

I’d like to quickly mention something I learnt during this section: having a premade user persona came with its benefits as well as limitations. On the one hand, this was one less task we needed to accomplish as we already had a set direction to go in. However, on the other, the very fact that we already had a set direction we needed to go in meant there were more limits, which can be daunting.

Prototype & Test

Before building a house, a builder needs a blueprint!

Similarly, in order to create a clear wireframe, a user path was necessary.

Userpath

We created a scenario as well for Paula, our user persona:

Paula is lying in bed and about to go to sleep. She starts reading something light and relaxing to wind down from the day and help her get tired.

With a clear path in mind, we moved on to coming up with ideas in Lo-Fi, which gradually evolved into a Mid-Fi.

Evolution from Lo-Fi to Mid-Fi

After making our Mid-Fi interactive, we tested it on different people, whose insights (highlighted in the picture below) proved useful and were much appreciated.

User insights on Mid-Fi

UI Design

We analysed the 3 webzines mentioned on Paula’s profile.

Things we noticed and liked:

  • Monochromatic style
  • Bold titles & large images
  • Sparse use of colours throughout pages to accentuate

Brand Attributes

From here, we began developing brand attributes best suited for our magazine.
We re-read our persona and took out keywords to derive adjectives for brand attributes. These adjectives are supposed to portray the feeling that the brand triggers when thinking about the brand. We then voted on the ones we liked the most.

Our 6 final brand attributes :

  • Daring
  • Sexy
  • Erudite
  • Vibrant
  • Provocative
  • Experimental

Mood Board

We based ourselves on these 6 brand attributes to each create a mood board, which were then combined to form one ultimate mood board.

The 3 individual mood boards each one of us created:

3 first draft mood boards

Ultimate team mood board, ready to test.

Final mood board

The tests confirmed that we were right on the ball, however many associated the image of the person reading on the aeroplane with travelling, which this magazine is not about, so we changed that picture.

This is our final mood board:

Revised final mood board

Colour Palette

For the colour palette, we kept it simple. When squinting our eyes whilst looking at the mood board, we noticed lovely contrasts between warm and cool colours.

Now actually applying these colours to the wireframe proved to be a whole other matter, yet one I greatly enjoyed.

The first attempt looked too childish and rather innocent and soft. For the second attempt, we played around with the themes “artistic” and “asymmetry”, however as cool as it looked, it did not really match our brand attributes (Daring, Sexy, Erudite, Vibrant, Provocative, and Experimental)

Applying colour palettes to wireframes

We wanted… no…NEEDED something more daring.

And so we started further brainstorming with the help of tools such as a Style Tile, where the fonts, colours, image and button styles we planned on using could be clearly displayed.

Style tile

The aforementioned style tile was then applied to our home page as a first draft.

First draft with new look applied

Final Website Design

Thank goodness we took the time to further develop our idea! We fell in love with the final result, the use of sparse yet vibrant neon colours throughout the pages that almost glowed in the dark abyss that was our background. And most importantly, the overall look better suited the brand of the webzine.

The next step proved quite easy (compared to the rest of the project, that is). We translated the desktop format to tablet and phone screens. As we’d started on such a large format, it proved easier to scale down and adapt to smaller screens. I believe it would have been more challenging the other way round, however it’s a challenge I look forward to overcoming in the future!

(From left to right) phone, tablet and desktop versions

Usability Testing

We tested with 4 people to get direct and qualitative feedback of what works and what doesn't. The overall resonance was positive.

Main Testing Feedback

  • What works:
    - Look and feel of the website. The contrast between the black background and bright neon colours were perceived as very stylish and well suited for an art webzine with a young audience.
  • What doesn’t work:
    - for tablet: Text over images. The contrast was not strong enough and the text was too large for the image size.
    - for phone: 2 column layout was too small for a phone screen.

Lastly, we did a testing where we showed the desktop screen to our testers for 5 seconds to get their first impressions. These were their impressions which resonate with our brand attributes. It showed us we are going into the right direction.

5 second testing

NEXT STEPS

  • Phone version: Reduce vertical columns from 2 to 1 column to be able to make images and make text larger to read.
  • Further testing with more people.
  • Expand on the content to test with users.

Final thoughts

Communication is a vital asset for every sort of interaction between human beings, from a parent and a child to a ruler and their nation. Without it, order crumbles and life in general becomes a pain.

A bit dramatic of a start, I know, but I want to highlight the importance of this asset which was constantly used throughout the project and thus, greatly contributed to the success and unity of team VMA.

If my teammates (Madini & Victor) were restaurants, I’d give them both 3 Michelin stars, without a doubt.

As for myself, this project was quite insightful and an opportunity to learn more about and hone my new capabilities. As this was the first project with a big chunk dedicated to UI, I discovered that I quite thrived in that particular aspect. Hence, this project has further cemented my conviction that UI (or visual) design is my future.

As per usual, thanks for reading!

--

--

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