Overview
The Milken Institute is a nonprofit, nonpartisan think tank whose mission is to increase global prosperity by advancing solutions that widen access to capital, create jobs and improve health. They do independent, data-driven research, publish findings, and plan an array of events and conferences that gather top executives and leaders to push and fund policy initiatives.
Role
As a UX designer, I worked closely with the client and their branding agency to go through a research and discovery phase where I audited the existing websites and created wireframes for the site’s information architecture and components.
The Team: UI designer, Engineers, QA, Project Manager
Stakeholders: Associate Director of UX, Account Lead, client’s rebranding team, The Milken Institute’s web team
Defining the Problem
The client had 11 independent sites that were run by their different centers and they wanted to combine them into a parent site that was flexible to encompass all of Milken Institute’s centers, their vast array of disciplines, and content. They wanted to create a CMS that will be accessible to different contributor types and set different tiers of administrative access.
Module audit graphs of 10 independent subsidiary sites
Research and Discovery
Qualitative data from the customer service department revealed that existing site visitors often called the office for event programs or research papers. The original sites were data-dense and it either had no search or the search functionality did not provide any type of filtering.
Along with the feedback from customer service, I did a module and content audit of all the client’s existing sites to get familiar with the content and begin to bucket types that could overlap.
Module audit graph of The Milken Institute
Detail of module audit for The Milken Institute
Previous site architecture
Solutions
New Information Architecture
Taking what was learned from the audit, the team and I proposed a new architecture for the site. This client requested the homepage to have three different states catered around the conferences they were holding.
Proposed site architecture
Page Templates
The client wanted customizable pages where users can browse and discover the breadth of their content before diving into it. We created templates and sectioned them on various tiers.
Template Release Plan
The Milken Institute was undergoing a rebranding and they were planning their biggest event of the year, with this in mind my director and I created a release plan for the templates that would support all of the client’s needs while the rest of the redesign was underway.
Template Release Plan
Constraints and New Discoveries
The client was wary of the templates at first because it didn’t feel flexible enough for their centers to customize. Drupal offers block modules, we decided to utilize them to create templates that could be interchangeable and reused across the site to create custom pages. Each center page had its requirements on what they wanted to show, we had to consider each center when creating the blocks.
Deliverables
First I sketched out some blocks for the different content types. After securing the functionality of each block I moved onto medium-fidelity wireframes and planned out how each block will accommodate for mobile and tablet.
Sketches of module blocks
Responsive wireframes of Module Blocks
With the blocks established I was able to then build the home page and center home pages.
Wireframes of home pages with Module blocks
With the delivery of the home pages using the module blocks, the client was able to see the flexibility and customization of the page. They agreed with our recommendation to omit the three homepage states and we were able to further simplify the template tiers. The client provided a restructure of the centers and their center-specific content pages. They also requested to combine articles and reports and to make a section for programs.
Final site architecture
The client specifically requested to have the event detail template completed during the first release of templates. The Milken Institute’s Global Conference is a conference held annually with famous speakers and leaders from around the world attending its’ panels. The conference also brings the biggest influx of traffic to the site, so the page will need to accommodate a variety of information and content. The Event page was broken into several children pages to ensure all the information was displayed was not overwhelming the user.
Event Detail Page and children pages
Once the new architecture, module blocks, homepage and event page templates were approved we were able to complete and submit the mockups for the detail pages and discovery pages.
Retrospective
Interesting Challenges
During the redesign, The Milken Institute underwent a rebranding and planning of their global conference which pushed them to rethink how they were viewing their centers, their audience, and the overall message of what The Milken Institute was. This made design goals and product milestones quite challenging because the requirements kept changing. It wasn’t until we got the client, the rebranding studio, and centers to review and provide feedback on the information architecture and wireframes they were able to commit to a feature set and we were able to deliver a completed product.