Case study: Edge, a responsive webzine for Art and Cultural trends
Designing a creative editorial for desktop, mobile and tablet versions.
For this project I collaborated with a talented UX/UI Designer, Karen Anne Lilje.
The brief was to design a responsive editorial website to meet the needs and goals of a specified persona. The user persona we were given is Promising Paula, a young and ambitious creative who reads voraciously. She aims to connect with other artists online in order to build a network ahead of her upcoming expo.
She reads everyday the most influential authors because she wants to stay in touch with the latest trends. But she finds it difficult to find original content about trends before they become mainstream. She is looking for a single, reliable source of online information to always be ahead of the crowd, so that she can post relevant content on social media and grow her following.
Defining the problem
With this persona in mind we did a journey map considering a typical scenario for Paula.
Paula is excited about her upcoming expo and wants to find exciting events to attend for networking opportunities.
During her research into upcoming trends and artists to follow, she gets frustrated by excessive advertising, unreliable content, and difficulty finding less mainstream information. She would like to read articles written by artists for artists.
The journey map highlighted opportunities that led us to our problem statement:
With the problem statement defined we did a competitor analysis to confirm the opportunities we had spotted. Among Vice, Pitchfork, Rolling Stones and Yorokobu we realised that all of them had advertising, which implies that the content is “advertising friendly” and therefore not 100% authentic.
A feature comparison showed us that all competitors have social media integration and contributor profiles.
With this information we used a Moscow map to help us to prioritise what features our product would include and we could define our MVP (Minimum Viable Product):
An editorial website that will enable users to discover new and interesting art and creative trends before they become mainstream. The website will publicise upcoming events where like-minded artists can meet to network and inspire each other.
Time for brainstorming and ideation
We created a site map to define the information architecture and hierarchy of our website.
We then considerd a user’s navigation behaviour while engaging with the editorial content. Since the website will be filled by articles written for artists by artists, we thought about what would lead our user persona to making a connection with a contributor. We identified 6 specific decision moments.
This defined our happy path which we used to create concept sketches and there after low fidelity wireframes.
Our low-fi wireframes detailed each screen in the happy path. We used these sketches for concept testing before digitizing the design as a mid fidelity in Figma.
The mid fidelity included more detail and we started developing components in Figma, following the rules of Atomic Design methodology. With responsive design in mind, we extensively used auto layout functionality to organize content.
Usability and desirability testing
With mid-fi propotype ready we conducted usability testing through Maze. The test revealed some UX issues that can be synthesized in these heat maps that show how users were trying to use the article title to navigate, which we then changed to be clickable. Users were also clicking on the event date rather than the button when asked to add it to their calendar, so we removed the button and added a calender icon to the date and made it clickable.
After making these adjustments we tested again and when asked, 100% of users found the site easy to navigate over all.
Before turning the mid-fi wireframes into high fidelity design we did a visual competitor analysis to ensure the aesthetic of our webzine was on point.
We observed the use of understated typography, limited colour and structured card layout. These all help the user to quickly find what they are looking for without unnecessary distraction.
To measure the desirability of our product we tested this moodboard using Product Reaction Cards methodology*. The moodboard captured the look and feel of the brand and the test confirmed our brand attributes, a brand that is inspiring, credible, authentic, connected and witty.
From ideas to design
We named the webzine “Edge”, which communicates the creative intention of the brand.
The style tile consolidated a brand identity that supported the ideation process and brand attributes. The name “Edge” speaks to artistic disruption and inspiration. The bold and simple logo design is recognisable and memorable.
The minimal colour palette is designed to work well with visual content that includes diverse photographic and artistic editorial images.
Black is the primary colour used for main type elements. The colour of newsprint, it is reliabe and string. The secondary and functional colour is vermillion which is passionate and emotive.
Typography style is classic and supports the credible editorial brand personality. A modern serif is paired with a “no-nonsense” san-serif, both open source and web-friendly.
The icon style is simple and scalable.
To support the design process we consolidated all of the original editorial content in a Google Sheet. This worked well while working collaboratively and managing multiple instances of articles across the webzine. We highlighted the name of our featured author.
Responsive design for multiple screen sizes
Using our brand guidelines we created a UI kit including article cards that worked within a flexible grid system across multiple screen sizes. Following an atomic design system the cards were composed of smaller, consistent elements that were used across the website.
Desktop was designed as a 4 column, tablet as a 3 column and mobile as a 1 column grid. Across all screen layouts the column was a consistent width to accomodate a common card design. This helped to automate the responsive design process with the use of auto layout.
The final prototype
Here is a video of the final product on desktop.
We also made a mobile version of the happy path that you can see here:
We showed the final product to some users to test its desirabilty and we received many positive feedback. Most users found “Edge” creative and clean. Many also commented that it was accessible, attractive, inspiring and energetic.
Next steps
As a next step we would like to complete the tablet and mobile high fidelity and then test, implementing user feedback. We also have more ideas about networking capabilities of the webzine.
We learnt so much about Figma and how to express design ideas using micro animations and prototyping interactions. We really enjoyed this project and are excited about the final product.
*J. Benedek and T. Miner. 2010. Measuring desirability: New methods for evaluating desirability in a usability lab setting. Proceedings of UPA 2002 Conference
