Mantra Online Magazine UIUX Documentation

This is the comprehensive documentation of my UIUX design process for Mantra, an online magazine/blog website. I started by gaining an understanding of client’s needs and goals and researching similar reference sites. This allowed me to understand the platform as I compared and contrasted existing site with each other and with client requirements. I then sketched some information diagrams and wire-frames before moving digital, where I polishes wire-frames and creates visual mock-ups and Adobe XD prototypes.

If you are interested in the deliverables, skip to the bottom of this post.

Client Brief

Website

Name: Mantra

Fonts: Any

Colors: Any

Timeline

2 weeks to 4 weeks

Objectives

We would like a unique blog website  that can:

  • Show featured articles on Homepage
  • Article page
  • Show all category sections
  • Allow readers to signup to a newsletter
  • Showcase our Instagram feed
  • Ability to Search through content
  • Guest authors
  • Social Sharing and liking of posts
  • Article ratings

Platform & Limitations

Please design for responsive web. So we require desktop screens as well as mobile screens. Other limitations include Page performance (loading time), and limited screen size on mobile. 

Target audience

Young males 25 to 35

Pain points

  • Searching for inspiration about lifestyle, health, news, music, movies and gadgets (Our category sections)
  • Get bored with uninspiring content
  • Hate having to return to websites to check for new articles

References

Please conduct some research on the following blogs we love and get ideas to include: 

GQ

Men’s Health

Deliverables

  • Research section
  • Sketches of initial ideas
  • Sitemap/journey map
  • Wire-frames
  • Visual mock-ups on desktop and mobile of (prototypes)
    • Article page
    • Homepage
    • Category page
    • Article page
    • Menu
  • Highlight 3 enhancements or unique features you have included to make our blog stand out and solve pain points
  • Link to this project’s deliverables

Research

The main sites that I researched were GQ, Men’s Health, Vogue Arabia, and Caleo to compare and contrast what they include in their websites and how they are laid out by annotating their sites on mobile and desktop for both the home pages and article pages. This Invision freehand outlines the details. I then summarized the layouts in text for different sections (header, feature, sidebar, etc), drawing attention to what I thought worked successfully and then making a list of features to include in Mantra’s layout. Of the four blogs that I looked into, only Caleo was an exception to the standard landing page design so I discuss this separately.

In addition to getting a lay of the land by looking at these blogs, I passively took note of the differences in their aesthetics. Most noteworthy were the boxy and constricted design of GQ contrasted with the spaced out and largeness of Men’s Health. This made me suspect that Men’s Health’s target audience is substantially older than that of GQ’s. The 2019 Men’s Health media report supported this as the median age for readers is about 44 for Men’s Health and 36 for GQ. This is relevant as the target age for Mantra is 25 to 35, so the visual style needs to reflect this younger age group. 

Another clear difference was in the copywriting. GQ’s article titles are sardonic and mysterious, but almost reek of clickbait. They are relatable and almost memeable. Men’s Health’s writing style on the other hand is to the point and more plain. Thus, creating a colorful voice for Mantra seems like it would better suit the target demographic.  

Homepage

Header

GQ and Men’s Health both had the subscribe button in the header. The menu includes the main categories or all categories, depending on how many there are. The category menu is hidden in a lot of these using a drawer-style menu, especially on mobile, but Men’s Health does this on desktop too. Thought: I think that is excessive for desktop view, but could work for mobile, since that is normal.

Hero and Intro

Feature the “best” or most popular articles. In general large images are used. Seems like the same amount of space for images and article info is the smallest ratio of image to text (is more image expected and more visually engaging?). GQ uses images well with text both inside and outside image elements. The grid is strong and does not have that weird empty third column like the other examples.

Category Highlights

A good idea to implement as it makes articles stand out. Vogue’s did not stand out. Feature a few articles, but since one of the pain points is that users hate searching through the site for new content, they should be less priority in the hierarchy, so perhaps each article in this section should be of equal size and smaller than those in the main article sections. 

Caleo

I like the two separate columns on Caleo. One is more like a feed and the other is more like a featured article. Thought: this feature article section could be a slider, or scroll, so the user could see a big image and article title. Would this work on mobile? The other side lacks structure, but the masonry grid looks sick.

What to include in Mantra

  • Header
    • Categories as menu
    • Subscribe button
    • Search/filter
  • Feature articles section
    • Primary, hot articles
    • Featured guest authors
  • Feed
    • Newest
    • Not in your face
  • Category sections
    • Feature article(s)
    • Minor features
    • Inspiration
    • Categories
  • Overall design
    • Large images
    • Grid (or column) structure
    • Condense real state as much as possible
    • Make the intro “POP”

Thoughts on the Article Pages

Though it is more standard to use the order: title, author, image, text, GQ’s starts with a bold image. I know from the visual the general topic of this article, giving me a better idea of what to expect. Plus if I clicked a link, it probably had the title anyways.

The body text of articles are split on a three column grid with the text taking up two of them.

Attention spans are short. Shorter text broken up by large images might be an effective strategy of making the articles more digestible and reducing boredom.

As a sidebar or below the article, there is a section of links to other articles. Collections could differ from most popular, other relevant/categorical articles, or recommended, newest. To-do: pick collections that will achieve user goals.

IA and Sketching

I diagrammed the client’s requirements and feature list to make better sense of it and to see relationships between these data points and possible user interaction by sketching a concept map, user flow diagram, and site map.

Of course, I also made some lo-fi sketches to iterate over some possible layouts for web and mobile.

Wire-framing

From the sketching phase, I narrowed down on the layout design by creating digital wire-frames with Invision. In addition to getting a better direction of the design, this phase helped visualize interactions such as bringing up the menu, subscribing to the newsletter, and scrolling through articles. 

Because one of the user’s pain points is not wanting to return to search the site for new articles, the option to subscribe to the newsletter should be clear. More importantly, actually signing up for this should be as painless as possible. For the former, the subscribe button will appear multiple times as the user scrolls, but each time with different text, progression from “Yo! Subscribe?” to “Tired of scrolling? Subscribe!” to “If you made it this far, you might as well subscribe.” The form will only take the user’s email and a few preferences such as how often they want Mantra to email them and which topics they are interested in. It should be made transparent what will be communicated to the user. 

Instead of having a “Latest” or “Most recent” section be labeled so explicitly, I decided to include a section with Mantra’s Instagram feed to automatically show their newest posts about articles. Not only does this satisfy the client’s requirement, but it also helps users stay up to date on Mantra’s content without returning to this site, since there is an option to follow Mantra on Instagram.

To aid the user in navigating the homepage on mobile, I minimized vertical screen length by making article sections horizontally scrollable. This is to help them navigate through the section without seeing tons of articles. Since user’s hate returning to search for new articles, this feature aims to reduce searching time and thus reducing friction in finding articles if they burden themselves to navigate the site. 

On desktop view, the featured articles appear large and before the menu bar. This is to make a bold impression on the user. After scrolling, there are two main types of article sections. The highlights and inspiration sections have a “main” article, with the image spanning the width of two-thirds columns while other articles within these sections span one-third of the width. The other type of article section is for the individual categories and does not have a featured article. This is done for the purpose of hierarchy. 

Style Guide

  • Mood: bold, strong, modern
  • Font: Franklin Gothic
  • Corners: sharp, no radius
  • Colors:
    • Red #F2541B
    • Orange #F29F05
    • Yellow #F2B705
    • Black #1F2933
    • Grey #616E7C
    • Light grey #F5F7FA

Prototyping

Prototype walk-through for desktop

I created web and mobile prototypes of the home page, article page, menus, and sign up process with Adobe XD. Though the web and mobile versions are interconnected, there are links to several flows for quicker access (see Deliverables section for links).

For both versions, the page loads with the menu bar at the bottom of the page. Once the user scrolls up, the menu bar is intended to stay fixed to the top of the page. To get this effect in XD, I created two versions of the homepage, one as if the user came to that page (the menu at the bottom) and on where the menu is actually fixed to the top. In the former, the menu is not fixed at all. The fixed menu is the intended behavior.

The article used as the example is the “Things I wish I practiced when I was young.” clicking or tapping on this article from the homepages will lead to the article page. The “sign up” buttons will overlay the newsletter sign up screen.

On mobile, the menu is brought up by tapping the hamburger menu. It works on both the “landing” and “menu below fold” versions (see below in deliverables).

Deliverables

Invision Freehands

Annotated Research

Wire-frame

XD Prototypes

Web landing

Web with menu below the fold

Web article

Mobile landing

Mobile with menu below the fold

Mobile article 

Highlights

As a reminder, the user pain points are: searching for inspiration about Mantra’s categories, getting bored with uninspiring content, and hating having to return to websites to check for new articles. 

Concerning the first pain point, the layout of the home page is compartmentalized into primary feature, secondary feature (“highlights”), and then category sections. There is also an Instagram feed which satisfies the client’s need while also serving as the “most recent” section. This organization is to reduce the need for searching. Bold title sections guide the user through the sections, which are interrupted by call to action buttons for them to subscribe. As the user scrolls, these buttons become larger and more persuasive. 

I also create an “Inspiration” category to help users seek inspiration. Articles here fall into a do-it-yourself, advice, and random articles that would help motivate or offer a change in perspective. 

Instagram Feed

Seeing that Mantra has an Instagram could persuade the user to follow the account, meaning that the user would be seeing Mantra’s new content on the Instagram platform, which the target audience already uses. The result is making it easy for users to see new content on Instagram and have them linked to that Mantra article, reducing the need for users to return to Mantra to search for new posts. 

Having the Instagram feed take the place of a “most recent” section helps users find new content so if they would not have to search if they returned to the site.

The number of articles to display in this prototype is limited, so there are duplicate titles in a few places. Ideally, the posts that are shown in this Instagram section would not be repeated multiple times throughout the page.

Newsletter Sign Up

The newsletter sign up section is designed to be brief and tailored to their user’s preferences. All that is needed is the user’s email and they can also input the categories they want to hear about and how frequently they want to receive email updates. They can choose daily, or pick one or more day(s) a week to receive emails. This short process is an incentive for them to sign up, which will alleviate their hate of returning to the site by eliminating their need to search for the content they want. The email they receive will contain the newest articles from their chosen sections. When directed to the site, the same articles will show in the “suggested” section.

Copy writing Voice

The pain point of users getting bored with “uninspiring” content was the most difficult, as it pertains to the content of the blog and not entirely on the visual and interaction design. To solve this, I chose a writing voice that is sardonic and playful and tried to create mock articles that have strange topics. I didn’t want them to sound too much like click-bait, but enough to sound like a real, empathic human had written them. I chose vibrant and strange photos to complement the writing voice when the chance arose. 

Note: None of the articles are true. I wrote the titles for articles but they were inspired by articles and news from various sites. In some cases I found an interesting image and created a title for it and vice versa. Any titles or listed “authors” (also made up) that bear any similarity to the real world are coincidental.

Conclusion

I put my design research and execution skills to work while working on this project. With minimal support or communication with the client, I researched competitors, gained an understanding of the genre and platform, created information architectures and user flows, designed wire-frames, and created high-fidelity mock-ups which double as a crude prototype.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s