Case Study: Building Momentum | Editorial Site and Branding

Momentum Case Study

Overview | The rise of the digital press has seen a tremendous peak over the last years. The audience is increasing as Millennials grow older, demanding all sorts of content. The best magazines and newspapers had already launched their digital version in early 2000, but it has been only in the last 5 years that the digital experience started to take its own shape. With numbers increasing, publishers are prompted to deliver quality content along with a great digital product for readers to experience a different but still unique act of opening up a magazine and dive into it.

How might we design a responsive online platform for a magazine, newspaper or blog directed to meet the needs and goals of our User Personas?

Deliverables | Responsive design (3 devices, 2 breakpoints)

Hi-fi Prototype on Desktop

Getting to know our Persona and Competitors

User Persona

For this design challenge, we were presented with a user persona and given the task to build and brand an editorial site to address the persona’s needs.

We were given a shortlist of competitor editorial sites frequented by our persona so the first thing we did was assembling a visual competitor analysis.

The four competitors are: Vice, Goop, Grist, and Bustle

Putting together the visual competitor boards, we clearly saw that each had its own distinct color and branding. We imagined our persona’s purpose in visiting each site; she would go to Vice and Grist for current news and serious topics, and to Goop and Bustle for casual reads and miscellaneous entertainment.

Visual Competitive Analysis

With an idea of our competitor’s site offerings, we set out on an in depth analysis of our persona using the empathy map.

User Pains:

  • Poor work life balance
  • Not being able to take care of herself
  • Lack of personal hobbies and passions

User Gains:

  • To discover topics of interests for new passions
  • To invest more on self-care
  • To be a more empathetic and rational person overall.
Empathy Map

Defining the Problem

With the persona’s pains and gains mapped out in the Empathy Map, we defined our jobs statement at hand:

When I find articles of interest, I want to have different ways of consuming my information so I can lead a more productive lifestyle.

For Elaine’s journey map. . .

  • She starts off taking a break from her researcher role and she wants to read an interesting article while enjoying the short time she has for lunch.
  • She heads to a competitor’s site and finds an interesting article but there is too much text and she doesn’t want to have to sit down and focus on reading when she’s spent her whole morning looking at a computer screen.
  • She heads to our site, selects an article, and uses the audio playback feature to listen to the article while cooking at the same time. By using our website, Elaine was able to multi-task and maximize her time.
Journey Map

Now that we have our User Journey, we needed to outline our UX Strategy Blueprint before moving into brainstorming and ideation.

For our UX strategy, the main challenge we’ll solve is making sure that the site and menu are easy to navigate, and helps the user to optimize their time.
We followed a guiding principle of maintaining simplicity and minimalism throughout the site. In short, we abided by the mantra of — the simpler, the better.

UX Strategy Blueprint

Next, we went on to determine our final features on the Moscow Method.

Our must-have features are a selection of trendy topics, with the main emphasis on Hobbies, Lifestyle, Spiritual Life, and Wellness.

In addition to the traditional article text, we also wanted our articles to have a summary list of key points, a video and audio playback feature, and multiple “share to social media” options.

With a UX Strategy in place, we started off the design aspect of our editorial site by putting our inspirations on a mood board. The primary and secondary colors will be white and black, respectively, with a bright yellow as the accent color.

The desired mood is an editorial site that appears modern and minimalist, with content that is fresh and thought-provoking.

Mood Board

Ideation and Prototyping

And now comes the ideation. With a timer set, each of us spent about 30 minutes in individual ideation. Our brainstorming included lo-fi prototypes of the homepage, article page, and the site menu.

With our lo-fi wireframes side by side, we found as many differences as we did similarities. Notably, we all brought different ideas on how we imagined the articles and spotlight content to appear on the homepage.

Lo-fi Prototype

Once we came to a consensus with the lo-fi prototype, we were able to navigate through the mid-fi prototype with a common goal. We were tasked with the challenge of building responsive design so in addition to the desktop design, we also built out tablet and mobile versions. The tablet design held a similar structure to the desktop site, with the main difference being the horizontal scroll in the homepage subcategory replacing the three columns in the desktop version. For the mobile site, we opted for more vertical scrolling rather than horizontal scrolling.

Mid-fi Prototype

Design and Consistency

As we worked through the mid-fi prototype, we slowly but steadily built out the pieces that would eventually come together as our design system. With a style guide defined early in the mid-fi stage, we were able to divide our contributions and still retain visual consistency across our work.

Style Guide

With the completion of our mid-fi wireframes, we conducted usability testing with our desktop design and saw a 100% success rate in users bring able to use the site navigation and searching the articles successfully.

Lastly, the final step was populating our mid-fi wireframe and polishing the content and colors for a final product.

Below, we have our editorial site, Momentum, as it would appear on desktop, tablet, and mobile.

Hi-fi Prototype

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store