Digitech — Case Study

This project was a four-day challenge part of the Ironhack Lisbon UX/UI Design Bootcamp. Ben-Hur and I had to design a responsive online platform for a magazine.

The Context

Over the last few years, the rise of the digital press has reached a pinnacle. As Millennials get older, their audience grows, and they demand a wide range of content.

Although the best magazines and newspapers began offering digital versions in early 2000, it was only in the last five years that the digital experience began to take shape.

As the number of people reading magazines grows, publishers are under pressure to provide high-quality content and a great digital product so that readers can enjoy the different but still unique experience of opening a magazine and diving into it.

The Challenge

Design a new online magazine that meets the needs of our user persona, James.

The Goal

The main focus for this project is on the UI and designing a mobile and desktop responsive website.

Meet James — The Ambitious Businessman

User Persona

From James profile, we can understand that:

• He is interested in topics such as sociology, economics and technology;
• The content is what motivates him to read, but his reading time is limited to less than 30 minutes;
• Reads digital news at least 5 times a week, however, sometimes he only checks the headliners.

Research

We started by conducting an online survey to learn more about people’s online reading behaviours. We received a total of 12 responses.

In the meantime, we looked into James’ preferred sources of information. This way, we were able to analyze their visual aesthetics as well as their most popular topics.

Main insights from the survey

• 90% prefers to read digital magazines/newspapers;
• 33,3% like to read magazines at least 2 times a week;
• 70% prefer to read on their phones;
• 75% use social media to stay up to date on topics they’re interested in.

Visual Competitor Analysis

We discovered that James’ four preferred sources of information — Forbes, Time, Bloomberg, and TechCrunch — all share a similar visual language.

Competitor Analysis

Forbes, Time and Bloomberg use very similar colors, based on a variation of black, white, blue and red. On the other hand, TechCrunch also uses a variation of black and white but also uses colors such as green and yellow to highlight certain areas.

All four have a minimalist approach, although we think Bloomberg is a little overcrowded, and the layout of TechCrunch is a little different than what we’re used to, at least on the desktop version.

Nonetheless, there are some elements that all four have in common:

• They engage the reader in reading the displayed information
• Good visual representation of the topics;
• Trustworthy and serious tone.

With our research done, we started to consider what kind of magazine we wanted to develop and it was decided on a tech-savvy feel, with a focus on both the tech industry and businesses. This way, it was possible to meet James’ interests of him.

Mood board

A mood board was created to establish the visual feel and overall look of the design. This helped us communicate the artistic direction of the project in its early stages.

Mood board

Meet Digitech

Digitech is a digital magazine for people who are interested in business and technology and want to stay up to date on the latest news.

Logotype

We wanted the magazine to be simple and bright, with a geometric sans-serif typeface for the logotype. The basic colors for text and background are black and white. Purple and green were chosen as contrasting colors because they complement each other perfectly. We were inspired by our competitor’s clean lines and wanted to incorporate them into our own.

Style guide

What makes Digitech different?

Digitech seeks to provide up to date information from the world of technology and business in a clear and concise manner. If you’re interested in learning more about the latest developments in technology and business. Digitech offers the highlight section, guiding you through the most important news in every category.

Digitech has the following features:

• Header navigation;
• Highlights section;
• Search option;
• Last update indicator;
• Related articles section under the article;
• Sharing the content on social media;
• Bookmark option;
• Important text passages;
• Comments section;
• Most read section;
• Social media links.

Wireframing Kickoff — Low-Fidelity

Sketching on paper is the simplest way to begin the prototyping phase.

At this point, we were still thinking about our user flow, so we decided to start sketching and testing along the way. We were able to get a lot of feedback quickly this way.

Some screens of the low-fidelity

Once we were happy with the flow we moved to Figma and started to work on the mid-fidelity.

Mid-Fidelity

Developing and testing the low-fidelity helped us to analyze potential pain points that we changed in our mid-fidelity.

The key facts on the highlights that we originally planned made our participants confused. We tested with 4 users and they liked the idea of having the main key facts to know what the article is about without clicking, however, they didn’t feel the need to have it. They claimed that the page would look too crowded and confusing.

Aside from that, 2 participants mentioned that having a bookmark option in the highlights section would be useful.

It was at this stage that we started to set out our layout. It took a long time to get the design to be consistent. The highlights page was very challenging for both versions.

User Flow (Happy path)

For the desktop version, we went with a 12 column grid because it allows the content to be easily divided into 2 modules and stacked for smaller viewports and a 200 px margin to prevent paragraphs and images from being stretched out of proportion.

These choices, along with a 16 px gutter, helped us achieve a balanced composition that also stays true to industry standards.

Desktop layout grid

Testing results

We tested with 5 participants once the mid-fidelity was ready, to ensure that the layout was easy to understand and the flow was clear.

The results were rather positive: the home page was the most popular page, all of the users liked the structure. The bookmarks piqued the users’ interest during testing, so we decided to incorporate them into our flow later.

High-Fidelity — Prototype

Below you can see the interactive high-fidelity prototype for both mobile and desktop.

Mobile Version

Desktop Version

Our main focus was on readability and simplicity. Since we wanted a website that could be scannable at any time and from anywhere, the images were chosen to draw the audience in to read the text right away. To make our content scannable, we used fewer colors and chose a fresh, gender-neutral purple to highlight categories and green was used in certain elements to give more emphasis.

Next Steps

1. Redo the highlights screen for both versions. Since it’s one of Digitech’s main features, I think the structure used for this section wasn’t the best, and it’s something that could be improved to make it more consistent with the line we are going for;
2. Adding a reading time indicator would be helpful. Sometimes readers are on the article page and check the size of the scroll bar to see how long the article is. This is often misleading because there can be a lot of non-article content underneath the article itself (like the comments section and the footer);
3. It would be beneficial to include an audio option on the website to make it more accessible and immersive for the readers;
4. A feature that allows readers to customize the background color, text size, and typeface to their needs and conditions would be useful because reading a lot of text at all hours of the day and night can be difficult.

Final Thoughts 💭

I have to admit that this week was harder than I predicted. In terms of workload, I expected that splitting it between two people would give us a relaxing week, however, because we only had 4 days to work on this project, we had to work late most days, which was pretty exhausting.

With that being said, let’s talk about some of my takeaways from this project! Along with the fact that I wish we had more time for the ideation phase, I really enjoyed the UI stage and I would’ve liked to push myself even further.

Also, one thing I noticed is that we decided to implement our text styles in the mid-fidelity, which made the process more overwhelming and time-consuming, but it allowed us to finish our high-fidelity faster!

Thank you for reading ✨