Editorial Design with Tolu the Creative
Tags: Ironhack, UI Design, Ux Writing, UX, Uxui Design

Brief

As the weeks pass and I keep on keeping on this IronHack UX/UI sprint the time has come to be tasked with another real world problem to solve.

Challenged by IronHack to design a responsive online platform for a magazine, newspaper, or blog directed to meet the needs and goals of a User Personas. Given the blessing of being able to work with a partner I immediately sprung up to ask one of my favorite designers of the course. Brooke Wertman, a fellow rookie designer I worked with in a previous web design challenge. She has been one of the biggest assets I’ve been gifted in this experience and I knew we would work well together. This Case Study will showcase how we worked harmonious together to create the fresh, vibrant and edgy blog Vault based of a specific user persona Tolu the Creative.

User Persona

Meet Tolu the Creative! Tolu is an artist and part time barista who loves to connect with people (and aliens if they want to) all around the world. She is a voracious reader, and reads everywhere, and anywhere. Some of her favorite reads include Vice, Rolling Stone, and Man Repeller. Tasked with creating a blog suiting her interests and her needs this is how Vault was born.

Define

Using Tolu’s favorite reads Vice, Rolling Stone, and Man Repeller as research guides helped us jump right into solving this challenge. Closely examining the feature of each website allowed us to better understand the audience each of the sites draw and how the design keeps the user coming back for more.

Feature Comparison

Minimalist- Although each site covers distinctly different content each of the designs have similarity when it comes to minimalism. Clean high quality images with simple but jarring text fonts, black and white background keeps the user focused on the content.

Clean Design- All of the websites are designed with the goal of making information easy for the user to digest all while intriguing them to continue reading. The key features of each of the websites are scrolling horizontally and vertically.

Striking Article Titles- The key to keeping the user’s attention is creating interesting titled articles paired with thought provoking images.

Market Positioning Map

Market Position Map

When analyzing each brand closely we divided and measured them by diversity of topics of the articles on the website and the age group they were most likely marketing to. This helped us gauge our scope on what kind of articles we wanted to market based of millennial interest. We wanted Vault to be a representation of millennial aesthetic but also provide content that can be enjoyed by both young adults and a mature audience.

Ideation

While brainstorming we came up with these concepts in order to create a clear and enjoyable design for Tolu.

Simple color palette of black, white and yellow or black, white, grey and yellow.

Focus on topics specific to age group (ex: climate change, student loans/finances, food, entertainment)

Site should convey authenticity and transparency.

Sit should have the ability to create an account and save articles for later similar to instagram or youtube

After brainstorming we used the MOSCOW method to prioritize the features from most wanted to least wanted.

Moscow Method

MVP Statement

The website will have a simple, clean logo, color palette and design format, which will remind users of the experience of using streamlined social media.

Users will have the ability to engage with content in a variety of ways, directly on the site, including audio and video content

Sitemap

To define the information architecture of the website, we put together a site map.

Here defined the sub-sections and how the menu would be distributed in terms of the main content buckets.

User Flow

When creating the user flow we took into consideration one of Tolu’s core needs, which is to have a blog that allowed the user to create a profile so that she can favor and read articles later.

We started the User at the Homepage, from there they would log into their account, the page would redirect the user back to their profile, the user would then select the heart icon to access their favorited articles.

Wireframes

After ideating and research it was time for the fun stuff! Me and my partner enjoyed this process the most. We started with concept sketching to start the design process and help flesh out the layout of our site.

Concept Sketching

Using our concept sketches we fleshed out our Mid-Fi wireframes so that we could test our design with real users.

Mid-Fi Wireframes

Usability Testing Results

After testing 5 users ages 20–27 here some key takeaways from the testing

“I would like to be able to organize the favorites into folders.”

“When I login I expect to be back at the home screen or my previous page, not at my profile page.”

“I normally expect one large featured story on a news site, to capture my attention.”

“Time categories seem too brand specific for new users. Quick Reads is easy to understand but… Deep Dives might need to be renamed.”

Design

Brand Attributes & Mood Board

Brand Attributes

Youthful

Curious

Activist

Conscious

The mood board was created with images that convey our brand attributes. Warm yellow tones complimented with cool green tones to give the site a edgy yet comfortable feel. The mood board was shared amongst the other students in the class.

Style Tile

Feedback they provided on the Desirability Testing