Services > Web & Mobile > Milken Family Foundation

Milken Family Foundation

Redesigning an Organizational Site into a "Mobile First" Showcase of Initiatives

Services > Web & Mobile > Milken Family Foundation

Milken Family Foundation

Site redesign to a "Mobile First" Showcase of Initiatives

Site Structure

UX Process

Prototyping

UI Design

Usability Testing

The Overview

The Milken Family Foundation strives to discover and advance inventive, effective ways of helping people lead productive and satisfying lives through education.

Project Details

Client: Milken Family Foundation

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

The main challenge was that the Foundation branding contained only one color, which the organization wanted to maintain across all aspects of the redesign. This meant the site would use only tonal values of the color to express everything from navigational menus to links to buttons to backgrounds.

Also, it was established that the use of fonts could only match the typography of the branding.

In addition, the site was to be completely redesigned and all development done in a more current framework to support "mobile first" viewing on multiple devices, and "shorthand" CSS codes added for non-technical editors to customize content.

The Outcome

From the kickoff meeting and stakeholders interviews, the design and development goals were as follows:

  • Develop a new site structure.
  • Establish a completely new frontend framework for "mobile first" viewing, and customize the Content Management System (CMS) for hand-off to non-technical editors.
  • Design a visually engaging site with a more modern tone.
  • Keep relatively the same number of content components on the homepage.
  • Utilize the entire browser window for a better visual experience, but maintain content column widths for readability.
  • Identify a single typface for headings and body content that matches the branding.
  • Create a color scheme for the site based on tonal values of a single color.
Competitive Analysis / Inspiration

Since the Foundation is a non-profit with a large endowment, there were no sales or marketing that occured on the site platform; although there was an interest to stay current with other non-profits that were in education or other areas they supported.

These sites were identified to emulate in terms of layout, and functionality:

After researching the partcular look, feel, interface, and functionality the client wanted in the new redesign, key components were incorporated into the ideation:

  • Showcase images and/or video across the homepage and each of the main section pages
  • Keep a slim masthead, fixed to the top of the page
  • Produce a two-level dropdown menu for easy navigation of main sections
  • The left column on section and subsection pages will provide horizontal navigation to other parts of that section
  • Use the right side of each section and subsection page for internal promotional use
Prototypes (wireframes, low-fidelity, high-fidelity)

First the basic site structure was mapped out, and specific areas of the site addressed for content that would be expanded and/or aggregated. One of the Founders of the organization was to be given a specific section of his own, and Publications would become a single scrolling page.

Site Structure

Although the site structure isn't complex, the Newsroom section became an aggregate of three other affiliated sites' content. The result is a few hundred of the most recent press releases, videos and photos, and "in the news" items; all needing a way to navigate through them.

Color Swatches

Primary and Accent Colors
HEX: #005770
RGB: 0,87,112

Hover State (Buttons, Links, CTAs)

HEX: #0084a9
RGB: 0,132,169

Header, Footer, Sidebar : Level 2 : Selected, Links

HEX: #74A7C0
RGB: 116,167,192

Header Navigation

HEX: #6bbdd4
RGB: 0,132,169

Masthead Buttons

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

Open Sans (Google font)

Regular 400

Bold 700

font-family: 'Open Sans', 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.

Buttons, Calls-To-Action, Pagination, Navigation Elements

Button, CTA, Pagination
Masthead
Label
HEX: #6bbdd4
RGBA: (0,132,169,1)
Hover
Label
HEX: #005770
RGBA: (0,87,112,1)
CTA
Label
HEX: #0084a9
RGBA: (0,132,169,1)
Hover
Label
HEX: #005770
RGBA: (0,87,112,1)
 
Main Nav, Primary and Secondary Side Nav, Mobile Menu
Top Level
Label
HEX: #0084a9, 0.7
RGBA: (0,132,169,0.7)
Hover
Label
HEX: #005770
RGBA: (0,87,112,1)
Side: Level 1
Label
HEX: #ffffff
RGBA: (201,227,240,1)
Selected
Label
HEX: #c9e3f0
RGBA: (201,227,240,1)
Level 2
Label
HEX: #0084a9
RGBA: (0,132,169,1)
Mobile Nav
Label
HEX: #005770
RGBA: (0,87,112,1)

After developing a set of guidelines for design, wireframing of the site's overall layout was based on established "best practice" methods as follows:

  • Branding in top left corner, linked to homepage
  • Social media accounts and Subscribe links in header between branding and search
  • Search functionality top right
  • Main site navigation in a second block below branding, social, search
  • Multi-tier dropdown menu with two levels
  • Main hero image/video extends to full browser width, placed as background behind masthead
  • Hero title, CTA placed in bottom right corner
  • Visible queue to prompt hero slider iterations

Wireframe — Final

Before

After Redesign

Mobile Experience

Usability Testing

After testing the complete developed site it was determined that, based on the monochromatic color scheme, the left side navigation of section pages didn't appear to change color on the hover state.

After discussion, a complementary link color on the hover state was agreed to, allowing a (desktop) user to feel more of an intent behind clicking on the link(s).

Conclusion / Reflection

Success

The organization was pleased with the work performed and, although worried about a reduction in traffic due to most of their initiatives' content moving off to other sites, maintained steady traffic, and even increased in the next 12 months.

Creating a custom CMS also allowed them to perform much of the maintenance and produce editorial content without need for technical assistance or formally trained individuals.

In hindsight, the monochromatic color scheme allowed the beautiful images and video to become even more engaging to the experience. The straightforward navigation and open space produced less noise on the page(s) and provided a seemless way to browse through pages.

There are some needs still to address in the lack of proper spacing in left side nav labeling, and a refresh of the social media icons and Subscribe modal would bring the site a bit more up-to-date. Also the occasionally awkward break from one row of photos/videos to another make it feel a bit unfinished.

Overall, though, the client was/is happy with the results. That's success.

Let's build your dream.

We're ready to bring your message to life. Contact us now for a free consultation.