UI case study: This editorial magazine is missing in the current market (pt. 1)
After this project was finished, I decided to continue developing this design. Find the end result here.
The rise of the digital press has seen a tremendous peak over the last 20 years. The audience is increasing as Millennials grow older, demanding all sorts of content. However, last 10 years the digital experience started to take its own shape. 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.
For this Ironhack project, our brief was to design a responsive online platform for a magazine directed to meet the needs and goals of a specific User Persona. We were to deliver a consistent, branded and engaging experience and branding documentation that guides any design successors of us.
Team: Arantja Rosalina, Glory Adebowale, Vanda Aragao
Duration: 3 weeks
Tools: Figma
Platform: Website
For this project, the only things we knew were that we needed to create an aesthetically pleasing online magazine. So we needed to start with doing research.
Quick UX preparations
Research
We started by analyzing the websites that Candice looks at, which are Cosmopolitan, Elle, People and Vogue. The content of these websites was divided between style/fashion, beauty, lifestyle, culture and celebrity news. If any tech-related content was shown, it was the latest smartwatch and which celebrity has it, why the reader should own it or if it was fashionable.
We also know that she has two types of interest with regards to magazines: high fashion and more celebrity/gossip. For the goal that she tried to reach with this website, we can partly ignore the gossip websites. We did however look at celebrities and influencers and what they share regarding fashion and tech. The fashion influencers showed a lot of street style and luxury fashion, travel, lifestyle and beauty content. The tech influencers showed all types of the latest gadgets through reviews, tutorials, tech DIY, and explanations.
What we saw is that Candice doesn’t read any magazines that combine these aspects.
Define
So with this information, the problem statement came to be:
Trendy marketers need to find a way to learn about the latest lifestyle, fashion and tech trends because they want to be inspired and entertained.
This would mean that, at the bare minimum, the goal of the magazine, we decided to call V.A.G. based on our first names, is to provide the users an easy and clear way of finding and reading articles about lifestyle, which help her understand fashion and tech trends, and how to implement them. By doing so, the users will be on top of the latest trends.
In order to do so, we must have the following features, which categorize the articles in several different ways for several different situations:
- articles ordered by date, popularity and relativity (is that even a word?)
- categories menu
- scroll up button
- search bar
- socials on header and/or footer
- social share button(s)
Ideate
This gave us the following low-fi design, and after testing it, the mid-fi design in the video.
With this mid-fidelity prototype, we conducted some more elaborate testing where we wanted the user to find a DIY article, read it completely and then share it to Twitter. We wanted to know what stands out to them, what they think about all the different ways they can discover and search other articles, and if this “happy path” is actually complete for them: what do they want to do after reading the article.
The results were very helpful. The most interesting info we learned was
- the happy path made sense and was easy to follow. However, the menu on the left wasn’t clear enough for everyone
- the homepage was clear and simple
- home: trending articles feature was interesting and users said that they would most likely use that a lot
- the DIY category page was very straightforward
- the article page had a really big image at the start, it was a little bit frustrating as users had to scroll to even start reading the article (kind of UI feedback though, but happy to have received it!)
- article page: they didn’t like the previous/next article option as it feels like “Russian roulette”
- article page: suggested articles feature was also interesting and users said they would most likely use that if they liked the article they just read
- article page: the sharing option is nice, but they might want to share the article on a different platform
- the up button on the bottom right was overlooked by most of the users, however, they did like this for the longer pages, so they didn’t have to scroll back up by hand (another UI related tip we were happy to take along!)
The UI process
Research
For the visual competitive analysis, we went back to the four magazines Candice already reads. Elle, Vogue, People & Cosmopolitan.
First up: Elle. They only use black and white and many variants of the neutral grey you see on the left. Titles are mostly serif, paragraphs are in a sans-serif font. In all of their decisions, they leave room for the photo’s to do the talking.
Vogue is a magazine which actually is pretty similar to Elle. They only have one secondary color, which is bright red, and they use no grey tints. It’s a very high contrast website.
Both People Magazine and Cosmopolitan have many colors, they actively use them throughout the website to highlight specific parts.
Moodboard & brand attributes
We know that Candice wants to be on top of the latest trends, dress and appear fashionable, and get more tech-savvy. She also constantly wants to be inspired for her Marketeer job. To have our website emit that it’s thé no.1 magazine around both fashion and tech trends, we decided on the following brand attributes and ended up with the mood board you see on the right. We see bold but simple fonts, a lot of texture, but at the same time clean surfaces and straight lines. And high contrast imagery, with a hint of bright colours.
And below you see what our 10 testers found this mood board expresses.
As you can see there are a lot of terms similar to or the same as our brand attributes. So we were ready for the next step: the style tile.
Style tile
Here, the branding of the magazine started to appear. We needed to make design choices that balanced the expressive and edgy side of the brand with the minimalist and innovative side. The first tries were the following color styles.
On our first try we realised that the several different colors made the design very colourful. And even though these were much more muted tones then People Magazine and Cosmopolitan, it didn’t feel edgy, minimalist and innovative enough.
The second try we wanted to go for a minimalist monochromatic color scheme that meant a little more to us: skin tones from all races of people. We liked it much more but realised that the warmer tones and tints weren’t embodying (pun intended) the innovative side of the brand.
Therefore, we decided to go for cleaner and cooler tones, with a hint of colour, inspired by Elle and Vogue magazine.
Around fonts we went for simple, clean and legible, sans-serif headers, both bold as well as ExtraLight, which stand out. We added 1 marker-type font for quotes to be able to add the edgy attribute to the font options.
With textures, we wanted to go in a more expressive and edgy route as the fonts and colours barely have this. We chose elements that reminded us of the more rebellious behaviour.
Buttons and icons are a combination of all the brand attributes. For example, where the shape of the buttons is very clean, the icon within that button is more expressive.
High-fidelity design
So. Let’s set the stage for the final design.
Candice arrives early to a meeting with a client and she wants to kill some time. The professional marketeer that she is, she already has her laptop open, ready to get things started. While waiting for the start of the meeting, Candice opens her favourite magazine — V.A.G. Magazine.
V.A.G. magazine gives Candice a sense of edge and rebelliousness with the wheatpaste and chalkboard elements as well as a minimalistic look and feel that is achieved with the slimmer fonts, white space and sharp edges.
On the home screen, Candice can see the latest as well as the trending articles. Along the lines of our modern and edgy concept, we have a unique side menu.
A sober font pops out over the screen when Candice hovers over it, asserting the expressiveness of the V.A.G. brand. This menu groups the website by type of content rather than topics. This way Candice won’t be tempted to always read about the same subjects but will be prompted to different pieces every time, this way she will stay on top of a broader range of trends.
Candice clicks on DIY for example, and in this section of the website, she can see a list of DIY articles.
Right underneath the title, Candice sees what the main subjects of this piece are. The subjects are identified almost as hashtags resembling the trending topics on Twitter. Scrolling down, Candice will read the full piece. Quotes are highlighted in a handwritten chalky, almost childlike font, asserting again the expressiveness of our magazine's brand.
Last but not least, Candice will publish the piece she really enjoyed on her Twitter.
A little sidenote before you watch the hifi. Unfortunately we haven’t managed to change the text of the website into actual writing for this high fidelity design.
Responsive design
Candice often finds herself catching up to the latest topics on the go, for instance, while commuting to work. While on the train she scrolls through Instagram on her phone or tablet and sees a post from V.A.G. magazine. She clicks it and accesses the website from the browser on her phone.
Will the help of Figma constraints and auto-layout features, we were able to easily adapt our design to phone and tablet sizes by simply resizing the frames. Most elements fell right into place while others had to be adapted. For instance, for the Categories menu, we created a component with two variants — vertical and horizontal.
We sent out our prototype to around 10 testers alongside Microsoft Product Reaction cards to understand if we translated the mood board correctly into the brand style. We wanted to find the same brand attributes we were looking for during the development of the mood board: minimalistic, expressive, innovative & edgy.
Looking at the data, we can see a diverse range of opinions. However, if we take a deeper look into the answers, we can again see a lot of synonyms. For instance minimalistic, simplistic, clear & straightforward, daring & disruptive, edgy & unconventional. This feedback can obviously be influenced either by the social context and personal preferences of the tester but, overall, the answers we got reflect our brand’s attributes.
The answer intuitive was the big winner and, despite the fact that it was not directly in our brand attributes, having an intuitive website, especially when applying unconventional elements like the menu, is key for an MVP.
We unfortunately also got some negative feedback that resulted from some issues with our prototype.
Unfortunately at that time the project was over, but if we would have been able to take next steps, we definitely wanted to fix the prototype and test it more. If the results were satisfactory, we would have followed it up with a usability test for the UX adaptations we had made after the mid-fi testing. Then the website was ready to be realised: the Web Dev department would have taken over together with the content creators. We were going to continue discovering what new features would follow this MVP.
After this project was finished, I decided to continue developing this design. Find the end result here.
