Edge
Edge is an editorial website that features content written for artists, by artists. An atomic design system means that the responsive design has a consistent branded experience across all platforms.
PRIMARY TOOLS= FIGMA + PHOTOSHOP + ILLUSTRATOR + MAZE
DURATION = UX 2 WEEKS + UI 1 WEEK
CHALLENGE
We were briefed to design an editorial website with a specific persona in mind. Our persona was Paula, a young and ambitions creative who reads voraciously. 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.
UX RESEARCH AND DEFINING THE PROBLEM
Our research began with a user journey map that considered a typical scenario for Paula so that we could identify specific pain point and thereby opportunities.
Paula wants to do research into upcoming trends, follow artists, and find exciting events to attend as networking opportunities. She struggles with excessive advertising, unreliable content, and has difficulty finding less mainstream information.
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.
A competitor analysis showed us that other e-zines out there tend to include loads of advertising as this is their business model. But advertising implies content that is "advertising friendly" and therefore not necessarily 100% authentic. We needed to think about an alternative business model for our e-zine so that advertising could be minimised.
Our idea was to position Edge as an event promotion platform, profiling art events through articles and content with artists contributing content. Edge therefore exists as an authority on disruptive art movements and the go-to resource for discovering talent.
Our minimum viable product (MVP) is 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 AND USABILITY TESTING
To better understand how the features of our MVP came together we created a site map to define the information architecture and hierarchy. We then considered a user’s navigation behaviour while engaging with the editorial content and defined a happy path. We thought about what Paula would read and what would lead her to making a connection with a contributor. This would inform the design of our prototype.
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.
We built the mid fidelity including more detail and began developing components, structuring the content using auto layout, with responsive design in mind. Usability tests done with Maze highlighted some UX issues. The Maze 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.
VISUAL DESIGN
The visual design process was initiated with a visual competitor analysis and thereafter we 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” to communicate 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 use a library, as we wanted to capture a consistently light, clean feeling that could be applied consistently.
RESPONSIVE DESIGN SYSTEM
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.
NEXT STEPS AND KEY 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 like to complete the tablet and mobile high fidelity and then test, implementing user feedback. We also have more ideas about networking capabilities on the site.
