UX/UI CASE STUDY OF V.A.G. PUBLICATION
OVERVIEW
The rise of the digital press has seen a tremendous peak over the last few years. The audience is increasing as Millenials grow older, demanding all sorts of content.
The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own 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 a magazine and dive into it.
DESIGN CHALLENGE
How Might We design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of the user personas, Candice?
Our solution was V.A.G. publication, a responsive website.
UX PROCESS
Empathize
We were given the user persona, Candice so our market research was reduced to understanding Candice. We analysed her behaviour, goals and the magazines she reads. And I would discuss the results of our analysis in the following sentences. Candice is a marketer who needs the latest trends as inspiration for work. Although Candice claims to want to get more tech-savvy, from judging her magazine choices, we decided that she is instead interested in trendy tech gadgets not every aspect of tech. She also wears trendy fashion suggested by her favourite magazines. Finally, we discovered that Candice reads magazines also for entertainment purposes.
Define
Problem Statement
Our research led to our problem statement: “Trendy marketers need to find a way to learn, be inspired and entertained about their (ideal) lifestyle because they want to be on top of the latest trends”.
Ideate
After defining the problem statement, we brainstormed solutions that would help our trendy marketers find ways to learn about the latest trends through our (V.A.G) magazine.
MOSCOW
And of course, the MOSCOW is important in helping us decide the features that would make up our minimum viable product. As shown in the figure above, we chose to include, ‘suggested article’ features, articles (which are of the most important in a magazine), the scroll-up button and of course the search bar. There’s also the means of organizing the article — header, categories, hamburger menu, latest articles and trending features — which we visualized in the sitemap.
MVP Statement
After deciding on the features that would make up the minimum viable product we push to production, we define the minimum viable product. As we defined the goal of our magazine, at the barest minimum, is to help the users find articles about lifestyle in an easy and clear way. So the main features we would include are the home page and search feature to achieve V.A.G.’s goal. Just the homepage was included in the MVP statement rather than the hamburger menu or the ‘next article’ feature and so on because these features were all part of the homepage.
Sitemap
As I would show in a sitemap we divided the homepage into the latest articles and trending articles which is completely different from direct competitors which instead have their homepage divided into fashion, culture, beauty, tech and the like. This is because we want to encourage Candice to read different topics every time she goes to the website.
Userflow
We also brainstormed screens that we needed to have a happy path which includes the easy path our readers take to read an article on VAG
While creating the userflow, we discovered that the two features in our must-have were not sufficient enough to build the wireframes of our screens. I think this is one of the places where I realised the need for more than one technique to discover features for our solution.
And so the ‘share article to twitter’ feature was developed in this stage. I think another reason for this was that we didn’t consider the business goals of V.A.G. alongside our customer needs. The ‘share to twitter’ feature can increase the rate of customer generation.
Prototype
Low-Fi Wireframe
We quickly drew a low-fi wireframe to visualize our product. Our screens were based on the screens in our userflow
Mid-Fi Wireframe
Then we built the mid-fi and conducted usability test on it.
Usability Test
Usability testing helped us to understand how usable our mid-fidelity wireframes were. To perform the usability testing, we asked questions surrounding our users' opinions about every feature on our websites as well as the overall functionality and ease of use of the website itself. I would discuss, in the following paragraph, the revisions we made after the usability testing.
We removed the ‘homepage’ button at the bottom of the page, changed the ‘back-to-up’ button, and removed the ‘previous articles’ & ‘next article’ arrows.
We culled some of the opinions that determined this decision in the image above.
Our users mentioned that the ‘homepage’ button at the bottom of the page was unnecessary, especially since the ‘back-to-top’ button was available. We also had to change the design of the ‘back-to-top’ button to a more conventional ‘arrow’ because our users didn’t recognize it. We removed the ‘previous articles’ and ‘next articles’ arrows because our users didn’t understand their purpose. But fortunately, they liked the suggested articles feature. And overall, our users liked our website for being clean.
UI DESIGN
Now, we built the visual design for our website. The steps we took to achieve this were discussed in this section.
Visual Competitive Analysis
We performed visual competitive analyses on the four magazines — Elle, Vogue, People and Cosmopolitan — that Candice loves to read.
Elle
Elle mainly used black, white and various variants of grey as colours. The headlines were mostly in serifs, the paragraphs in san-serifs. Images took up most part of the page, particularly the homepage.
Vogue
Vogue mainly used three colours: red, white and black. The most commonly used font in this website was serif
People & Cosmopolitan
These two websites were very similar. They used a lot of colours and at least two fonts. The websites were very vibrant and maximalistic in nature.
Brand Attributes & Moodboard
We used the moodboard to relate our brand attributes to our users. We use it to test if our users can understand our message at a first glance.
As we understood from empathizing with Candice, we know that she wants to be more tech-savvy, be on top of trends and be more fashionable. Hence we chose our brand attributes as innovative, expressive, minimalistic and edgy.
We can find the innovative attributes from the apple products on the moodboard; the expressive from the high contrast images; the edgy from the ‘edgy’ dress; and the minimalistic from how there is enough whitespace on the moodboard.
The right side of the image above shows10 responses from testing the moodboard. Fortunately, there are lots of words similar to our brand attributes like unique, clean, bold, confident, futuristic, energetic, rethinking, quirky, minimalistic. This encourages us that we’re on the right track.
Style Guide: Colour & Typography
We chose cool colours (also inspired by Elle), clean and legible fonts (for paragraphs) to keep the website minimalistic. We chose bold fonts (for the header) and cursive fonts (for quotes) to keep our website edgy and expressive. We chose edgy textures for the top layer of the websites; edgy, expressive and innovative icons and buttons.
Hi-fi Prototype
Responsive Website on Laptop
Responsive Website on Mobile & Tablet
The image above includes the hi-fi wireframes of VAG in mobile and tablet frames. While for the mobile frame the categories menu is horizontal, it is vertical for the laptop and tablet.
Desirability Test
We performed desirability testing on 10 users to understand the emotional response that our website produces on them. To ensure they viewed all the necessary visual elements, we asked them to read a DIY article on V.A.G. and share it on Twitter.
From the image above we can see that the feedbacks are similar to our brand attributes.
USERS & AUDIENCE
Our users were streamlined into professional marketers like Candice, who need to be on top of trends for professional and personal purposes. We didn’t have to discover our users since we were given a user persona — named Candice — as part of the brief.
ROLES & RESPONSIBILITIES
We were three - Arantja, Vanda and me— who worked on the project. We worked remotely by collaborating basically on figma, google docs and using zoom and slack to interact.
SCOPE & CONSTRAINTS
The only constraint for this project was the time constraint. We only had four weeks. This meant that we couldn’t build mobile and tablet prototypes and our number of testers had to be limited to 4.
OUTCOMES & LESSONS
It was a new experience for me to build UI design from scratch. I was lucky to have a graphics designer (Arantja) and developer (Vanda) in my group who had previous experiences with it and I learnt a great deal from them.
While building the userflow, we discovered that we didn’t have sufficient features and we realised that we should have done more than Moscow and competitive analysis while ideating.
Another factor we should have considered while ideating was the business goals for our website. Initially, we were only considering our user needs. We corrected this by introducing the ‘share to twitter’ feature which should improve the rate of customer generation.
I realised practically that we are not our users while working on this project. So while ideating, we introduced the ‘previous and next article’ feature and we strongly believed that it was necessary for the website. But after usability testing, we removed it because our users decided that they didn’t understand the intended use of the feature.
