Turning a scrapped print magazine concept into a digital publication

Landing page of the final product

The challenge:

Take an old print magazine design I completed and update it into a digital publication concept for progressive students and young professionals aged 18–35. The publication would feature public interest, arts, and technology articles.

Team:

Matti Scherzinger—UI/UX Designer, Researcher
Ron Beltrame—Project Manager

Date completed:

March 2017

Note: I created this project for an assignment while studying Graphic Design at Cambrian College as an update to an assignment I had completed previously. The original assignment brief was to create a print magazine.

Project Goals

Going into this project, I identified a few goals.

The goals I wanted to achieve in the design:

  • Create an approachable and credible interface and article style aimed at progressive young people;
  • Focus on building a strong type hierarchy and displaying content in an interesting way.

My personal development goals in the project:

  • Familiarize myself with a complete design process, especially research, wireframing, modular design/standardization, and final design execution;
  • Take an old, undesirable print piece I had designed in the past and transform it into an attractive digital product.

The original print piece I had created was not designed to reach the desired audience. Instead of trying to salvage this piece, I kept only the name—the short-and-sweet title Gear Magazine was effective—and abandoned everything else. A fresh start was needed.

Scrapped print magazine design—too angsty for the target audience.

Research

Before beginning to research, I identified a few questions that would help guide the process and narrow down the information I was looking for.

Some questions I had in mind:

  • What design decisions can be applied that enhance value of the product to the target demographic of students and young professionals?
  • How is readability optimized for a website or product?
  • How are users encouraged to return to a publication site?

I began by looking into user habits of my target audience—young adults. I found this great article, which details a study conducted on 91 young people across 7 different countries to learn about their user patterns. While all of the information was good, some proved to be especially helpful in informing my design decisions.

Some of these useful points:

  • Young adults don’t enjoy reading long passages of text—they prefer content that is easy to scan;
  • They’re sensitive to tone, both visually and in writing—they’re likely to feel insulted if the site is trying too hard or belittling them;
  • Young users are very confident in their ability to navigate digital interfaces, even when encountering entirely new design patterns.

Once I understood that my target audience is sensitive to tone and prefers to scan text, the importance of a strong typographic hierarchy in articles became even more apparent to me. The overall impression of the site should be approachable but trustworthy in its conveying of information.

These articles helped further, allowing me to understand what it meant to design for maximum readability.

Some key take-aways:

  • Choose typefaces that work well at various sizes;
  • Establish a clear hierarchy using elements such as size, case, typeface, weight, colour, and spacing;
  • Treat text as UI—not just content, and especially not as an afterthought.

I took this information and began mapping out some wireframes.


Wireframing

In my wireframing, I took a calculated risk: the confidence of my target audience in their ability to use new digital interfaces allowed me to justify a bit more experimentation in the layout of the homepage design.

I also took social media and email marketing opportunities into account as important aspects of the design. They would often serve as entry points for new and returning users into the site, where content would be read and shared.

Some design decisions that were made:

  • Strong focus on displaying content in a clean but visually interesting way;
  • Frequent social media links to encourage sharing;
  • Repeated prompt to submit email address to receive newsletters.
Homepage and article page wireframes

Visual Language

Once wireframing was complete, I began to create a standardized visual language for the product. I chose some light, friendly colours to help with categorization; typography styles that would allow for a diverse and clear hierarchy; and selected stock images that matched the desired aesthetic.

I then fleshed out some UI elements that would repeat throughout the product, including button styles, article card styles, and a footer style. I then applied the visuals and styles to the wireframes to finalize the piece.

Some visual design elements for the product

Final Design

The homepage of the product begins with a large slideshow of featured articles. This ensures that the user is met with content immediately upon entering the site—there’s no need to spend time searching for articles.

The site is then explained to the user in a brief paragraph. This paragraph includes clickable links which sort articles by topic.

Next, featured and recent articles are displayed in a slightly scattered, off-kilter style to enhance visual interest and to help communicate the progressive nature of the publication.

Newsletter sign-up and social media feed and links are included beneath the articles.

Final homepage design

The hamburger menu expands to reveal a list that allows the user to sort articles by topic. It also includes links to social media and a newsletter sign-up to encourage connectivity and repeat visits.

Expanded hamburger menu

Article pages are designed with readability in mind. Text is large and has ample line spacing to enhance visibility of letterforms. Paragraphs are kept short and subheads are used often to help the user scan through the text.

Additionally, a box including the author, the date published, the read time of the article, and social media links follows the user as they scroll. This encourages sharing and lets the user know how much time they’ll spend reading the article.

Related stories are included at the bottom to encourage exploration and to prolong users’ time spent on the site.

Final article page design

Mobile and tablet views were also considered in the creation of the product. Layout and text styles adjust in order to ensure an optimized reading experience for the user on any device.


Retrospective

This project was eye-opening for me in a number of ways and resulted in many successes.

One huge catalyst in the design process was the user research I found detailing the user habits of young adults. Because of the information in that study, I was able to design a product that was truer to fulfilling the wants and needs of the target demographic.

This project also allowed me to develop my typographic skills significantly. I learned what made large passages of text pleasant to read onscreen and styled an article using that knowledge.

With more time, I’d have loved to do more user testing on this product. Building a prototype and allowing people to interact with it would have added another level of accuracy to the design solution. In future projects, I plan on building complete interactive prototypes and having users interact with them.

Despite this qualm, I’m pleased with the final design. It was a great learning experience and I think that based on the research completed, the solution would be effective.

Thank you for reading!

Show your support

Clapping shows how much you appreciated Matti Scherzinger’s story.