Ready for the full menu?
MENU
Portfolio > Web, Mobile UX/UI > The Milken Review

The Milken Review

Transforming a long-standing publication into a mobile first experience

Portfolio > Web, Mobile UX/UI > The Milken Review

The Milken Review

Reimagining a Print Publication into an Online Experience

Site Structure

UX Process

Prototyping

UI Design

Usability Testing

The Overview

The Milken Review is published quarterly to encourage discussion of current issues of public policy relating to economic growth, job creation and capital formation.

Project Details

Client: Milken Institute

Role: Lead Designer, Frontend Development

Duration: 6 months


Responsibilities
  • Information Architecture
  • Wireframing
  • High Fidelity Mockups
  • Front-End Prototyping
  • Content Management
  • Usability Testing
Tools Used
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe InDesign
  • Silverstripe CMS
  • Zurb Foundation Framework
  • Atom
The Challenge

Create an engaging and robust online and mobile-first experience from a long-standing "print only" publication.

There had never been an online presence for the Milken Review, so there was no established framework for a site. The audience is well-read, older, and operates in financial and economic circles.

The overall design was to be simple so that the focus would be placed on the articles, as well as amazing professional photography and illustrations.

Also, branding contained only one color, which was to be used across all aspects of the design. This meant the site would use only tonal values of the color to express everything from navigational menus to links to buttons to backgrounds.

In addition, the site was to be completely designed and all development done in a "mobile-first" framework, and "shorthand" CSS codes added for non-technical editors to customize content.

Inspiration / Ideation

After researching the partcular functionality the client wanted in the new site, key components were addressed at the ideation of the project:

  • Keep the masthead slim and fixed to the top of the page.
  • Have the search bar appear dynamically below the masthead upon clicking the search icon.
  • For desktop, the body container max-width will be set at 1200 pixels.
  • For readability (on desktop), columns that contain text should not be more than 800 pixels wide.
  • The homepage needs to be flexbile enough to allow different sized content "blocks" to be reordered as needed.
  • Articles need extreme flexibility to allow content editors to create custom layouts; without requiring technical skills.
  • Have a functional breadcrumb, and include social media sharing.
  • Add a Topics section for easy reference across content.
Prototypes (wireframes, low-fidelity, high-fidelity)

A basic site structure was mapped out, and a style guide established.

Color Swatches

Primary and Accent Colors
HEX: #dc1b11
RGB: 220,27,17

Hover State (Buttons, Links, CTAs)

HEX: #ee3026
RGB: 238,48,38

Header, Footer, Iconography, Top and Bottom Image Borders, Separators

Text Colors, Backgrounds, Borders, Separators
HEX: #333333
RGB: 51,51,51

Body Text, Headings

HEX: #dddddd
RGB: 221,221,221

Separators, Horizontal Rules

HEX: #ffffff
RGB: 255,255,255

Page, Body

Typography

Crimson Text (Google font)

Regular 400

Bold 700

font-family: 'Crimson Text', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Hind Siliguri (Google font)

Regular 400

Bold 700

font-family: 'Hind Siliguri', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Iconography

Zurb Foundation Icons

Wireframes

After establishing a set of guidelines for design, the site's overall layout was approved and a functional prototype was created.

The Masonry site widget was incorporated into the Zurb Foundation framework used with the Silverstipe CMS. This enabled the content blocks on the homepage to fill into the space, regardless of how large the blocks were set.

Final Desktop View

The Mobile Experience

Usability Testing

Establishing "Information Scent"

As the client was busily entering in the content from recent publications to fill the queue, I noticed they were not in the practice of linking content as a visual queue to inform the user as an "intent to click".

Having studied "Designing for the Scent of Information" by Jared Spool some time ago, I proposed that links should be formed around phrases rather than just keywords, which would prevent the user from having to read all the content around the link in order to determine what they were about to click on, and would information them about the content that would be behind the link.

I also set anchors in the CSS to a bold font weight for more visual emphasis.

The result is a strong visual queue to the reader that a link exists, and what the link reference is about. Ultimately it promoted a better click-through rate.

Examples as follows:

Conclusion / Reflection

Great! Although not all fonts (or padding) are created equal...

The site was a great success, and the client was extremely happy, but in hindsight there are minor drawbacks. Specifically, tight content blocks, the all-caps "Sans 800 SC" font (from the original magazine) used in all the headlines, and reverse type combined to make it harder to quickly scan the titles of the homepage, Articles, etc. when viewing on a desktop.

Some refinements would make it easier to scan headlines, and open up the page(s).

Below is a quick "before and after" revision to the code through the Inspect function of Chrome to demonstrate:

Aside from a few shortcomings, it was a great success... I'd be excited to have the opportunity to work on a redesign/refresh anytime.