Case study: A responsive editorial website
Creating a flexible design system for a responsive e-zine
For this project we were briefed to design a responsive editorial website that meets the needs and goals of a specified persona. The final design should include a consistently branded experience, applying an atomic design system.
The specified user persona we were given was Promising Paula, a young and ambitious creative who reads voraciously. To understand her better we expanded and added detail to her persona.
She wants to connect with other artists online and build a network ahead of her upcoming expo. Her goals are to be cool by reading the most influential authors and staying in touch with the latest trends so that she can post relevant content on social media and grow her following. But she finds it difficult to find original content about trends before they become mainstream. She would really like to have a single, reliable source of online information.
Research to define the problem
With this persona in mind we did a journey map considering a typical scenario for Paula. She is excited about her expo and wants to do research into upcoming trends, artists to follow and find exciting events to attend for networking opportunities.
We identified her specific pain points which included excessive advertising, unreliable content, and difficulty finding less mainstream information. Articles written by artists for artists.
The journey map highlighted opportunities that led us to our problem statement…
Emerging artists and trend setters need a way to find reliable online editorial about undiscovered talent and interesting events because they want to stay ahead of the curve and be creatively relevant on social media.
With our problem statement defined we did a competitor analysis to see what similar e-zines are doing. We picked up that all of them had advertising. Advertising implies content that 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 minimum viable product would include.
Our MVP would be 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.
Ideation
To understand how these features came together we created a site map which defined the information architecture and hierarchy.
We then considered a user’s navigation behaviour while engaging with the editorial content. We thought about what Paula would read and what would lead her 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 fidelity wireframes detailed each screen in the happy path. We used these sketches for concept testing before digitising the design as a mid fidelity in Figma.
The mid fidelity included more detail and we started developing components, structuring the content using auto layout, with responsive design in mind. Usability tests done with Maze highlighted some UX issues.
These heat maps 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 calendar 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.
Design
Visual identity
Before beginning the high fidelity design we did a visual competitor analysis to ensure the aesthetic of our e-zine 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.
We then curated a mood board to capture the feel and attributes of the brand that we were ideating with the attributes: inspiring, credible, authentic, connected and witty.
We did product reaction tests and adjusted based on the feedback to ensure our mood board was accurately communicating the brand attributes. From there we worked on the visual identity of the website. The style tile consolidated a brand identity that supported the ideation process and brand attributes.
We named the e-zine “Edge”, which communicates the creative intention of the brand. The name speaks to artistic disruption and inspiration. The bold and simple logo design is recognisable and memorable.
A minimal colour palette of black and vermillion is designed to work well with content that is very visual, including diverse photographic and artistic editorial images. Black is the primary colour used for main type elements. It is the colour of newsprint and feels reliable and strong. The secondary colour is vermillion which is passionate and emotive. It is used as the functional colour.
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. We designed original icons rather than using a library as we wanted to capture a light clean feeling in the icons and apply consistently.
To support the design process we consolidated all of the editorial content in a Google Sheet. This worked well while working collaboratively and managing multiple instances of articles across the e-zine. We highlighted the name of our featured author.
Designing for flexible and responsive layout
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 accommodate a common card design. This helped to automate the responsive design process with the use of auto layout.
A demo of the final product
This is a video showing the design and functionality of the desktop version using a 4 column grid.
See the design applied to a mobile screen with a 1 column grid in this demo.
Next steps and learnings
Our desirability tests revealed positive feedback. Most users found Edge creative and clean. Many also commented that it was accessible, attractive, inspiring and energetic.
As a next step we would complete the tablet and mobile high fidelity and then test, implementing user feedback. We also have more ideas about networking capabilities on the site.
As a duo-team we had fun problem solving and learnt so much about Figma and how to express design ideas using micro animations and prototyping interactions. And Figma shortcuts are amazing!
