Benjamin Vernon / Projects

Mantra Online Magazine

A web based UIUX design project


Oct 2020

Mantra is an online magazine website targeted to men aged 25 to 35. You may want see the full documentation of the process I followed while designing the user experience and interface for this site, but below is a shorter version.

Client Brief

Timeline: 2 to 4 weeks.


We would like a unique blog website that can:

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

Patform & 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.


Please conduct some research on the following blogs we love and get ideas to include: GQ, Men’s Health.


  • Research section
  • Sketches of initial ideas
  • Sitemap/journey map
  • Wire-frames
  • Visual mock-ups on desktop and mobile of (prototypes)
    • Homepage
    • Menu
    • Sign up process
    • Article page
    • 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


I first conducted research on some reference websites the client supplied and then found a few other examples of web journals myself. After comparing and contrasting elements, user bases, and visual design, I summarized the features that Mantra would need to have to be competitive.

From there, I sketched out some information architecture diagrams to better understand the client's needs and the features that I gathered from other sites. I made a concept map, user flow, and sitemap diagrams.

Sketching and Wire-framing

I then moved on into the sketching phase where I quickly sketches various layouts for both Mantra and Web. Here, I also experimented with the types of sections to showcase on the home page (highlights, latest posts, popular, ect).

Once I had settled on the general idea of a layout, I created wire-frames. On mobile, the post sections are featured with a horizontal scroll to save screen real-estate. I also focused on the newsletter sign up feature to this site, making sure it was as friction-less and noninvasive as possible. I then created visual mock-ups for web and mobile and an Adobe XD prototype.


I then moved on into the sketching phase where I quickly sketches various layouts for both Mantra and Web. Here, I also experimented with the types of sections to showcase on the home page (highlights, latest posts, popular, ect).


Mantra Feature 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.

1) 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.

2) 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.

3) 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.

Benjamin Vernon

Creative technologist with a passion for designing & developing UIs, websites, typefaces & games.