LITS - Mount Holyoke College Library and Technology Redesign

LITS is one of three dozen academic higher education merged library and technology divisions in North America. It is leading innovation in research through the integration of technology with library services. LITS is an anacronym for Library, Information, and Technology Services.

Project overview / Challenge

To design and build a highly effective, information rich web application that is mobile friendly and user-centered at its heart. Design and engineer a unified search to surface less visible, mission critical content from numerous sources. Overhaul the navigation to provide an intuitive experience thereby increasing accessibility and comprehension.

In this UX research, information architecture, and visual redesign, I conducted user interviews to understand student, faculty, alumnae, and staff perspectives of LITS. I did discovery analysis and diagrammed a comprehensive information architecture (IA). I led a full day content writing workshop to define voice and tone. I overhauled search, crafted a visual design, and completed moderated testing of our navigation.

My Roles

  • Discovery & User Research
  • Content Strategy
  • Information Architecture
  • Product Designer
  • Prototyping
  • Mentor

The Users

10K Alumnae

2200 Students

450 Faculty

800 Staff

12 Stakeholders

Discovery

The first three months were spent in discovery which included:

  • A comparative analysis to better understand how other libraries organized their complex information structures.
  • Gathering and chronicling business requirements from 6 five divisions within the library.
  • User interviews to discover how different people engage with the services and products that the library offers.
  • Documenting the user journey workflow with a click by click analysis of different paths to retrieving a resource.

Comparitive Analysis of 10 merged libraries

Gather and chronicle stakeholder requirements

Lead a team of students to conduct user interviews and draft personas

Aggregate the research into key takeaways and present findings to secure buy-in.

Document user workflows for retrieving digital resources and information through the website.

Before and after (a side-by-side)

Mount Holyoke Menu is built using a proprietary software application that controls food inventory, recipes, and the web presentation of meals for the day. Its importance lies in the fact that students reside on campus; therefore, depend upon this digital experience to make nutritious decisions. After doing an audit of the 133 digital products the college provides, I selected this as our first project.

Influence

Defining the Project Ecosystem

To garner stakeholder support, I crystalized the project ecosystem and developed a proposal.

Once we completed our heuristic analysis, we prepared a digital slideshow to document the project approach, scope of work and key issues to present. This helped to neatly pitch our project to stakeholders around campus. In this presentation we included:

  • Site type to guide the business requirements. For menu, we are working with a content source site which has
    • New info daily
    • Repeat visitors
    • Browse and filter
    The purpose of a content site is to support quick and easy decision making by providing information in an easy to digest user interface. In a content site, the presentation and structure is consistent across most pages.
  • The outcome of our heuristic analysis including side by side comparisons of other organizations using the same menu software. This gave them a real example and showed them the possibilities.
  • A tiered project model which demonstrated the different project outcomes with multiple approachs. This gave the stakeholders a clear baseline so they could gauge the return for each level investment.

I presented the proposal to key stakeholders from different campus divisions to pitch the benefit of the product upgrade. During the meeting, we received approval to move forward.

Presentation

Insight

Personas - Mount Holyoke Menu

Personas

  • 18-26 (Insight: 100% have a mobile device and are comfortable with a mobile app interface)
  • Female / Identify as female (Insight: more concerned with caloric intake and nutrition}
  • Live & eat on campus (Insight: dining times are scheduled in tight proximity to class schedules – efficiency is critical)
  • Globally Diverse | 61 countries represented, “It feels like a sample population of the world, like little pieces of cities around the globe have migrated onto campus.” (Insight: English may not be their first language – using visual cues would increase instant recognition)
  • 50% have allergens or dietary requirements (Insight: meals may be skipped or foods avoided due to a lack of access to ingredients – surface these next to each meal listed)
  • 65% already use their phone to access the menu (Insight: regardless of the interface, students are still using their phone because that is their point of access – not a computer).
Interface - Interaction Design, Dawn Russell

Interface

Prototype

Review the concept through a working prototype to quickly iterate.
Mount Holyoke Menu Prototype

Interaction Design

Enable the user to achieve their objective(s) in the best way possible.

From our analysis, the main interaction design elements we wanted to improve were:

  • Display / Placement of Hours: Move hours to the homepage so you don’t have to click through to each station to see when it’s open.
  • Update existing iconography: This appeals more quickly to an international audience, creating visuals and removing the language barrier.
  • Surface allergen icons: Allergens could only be found deep within the website architecture, making it hard to find. Furthermore, they had no “icon” unlike Dietary Restrictions.
  • Legend: Create an Icon Legend and nametags so the interpretation of the images is discernable in case it’s not clear.
  • Add the ability to easily compare options: Give the user the option to change stations and compare meals being served on the same day and meal period. Increases their likelihood of eating – more options. More efficient.
  • Reduce Cognitive Load: Separate an entire day into meal periods to reduce the cognitive load of seeing all meals being served on one page (breakfast, lunch and dinner).
  • Design an app: Give them an interface that feels like a native phone app when viewed on a phone. It’s more familiar. The purpose of a content site is to support quick and easy decision making by providing information in an easy to digest user interface. In a content site, the presentation and structure is consistent across most pages.
View Site: Menu
Click the images to view full screen.
Interface - Interaction Design, Dawn Russell

Implementation

Translate design into well-crafted code

Modular, responsive, documented and versioned code.
Mount Holyoke Menu Code cleanup

Our Code

  • Modular based includes
  • Responsive HTML5
  • Boostrap 4 template
  • CSS3 / SAAS
  • Javascript (Interaction design elements)
  • Versioning with GitHub / Git

Original Code

  • Feature based includes
  • Tabular, rigid HTML
  • Page based, repetitive .ASPX / HTML

Insight

User Experience Research: Mount Holyoke Menu

User Experience Research

Initial Survey, Google Metrics and Moderated User Testing

We broke out our key performance indicators into tasks that could be clearly measured:

  • Allergies / Dietary requirements - Is it accessible and easy to find/use?
  • Visual Cues - Icons: is the meaning clear?
  • Calories / Nutrition needs - Is it accessible and understandable?
  • Search / refine search - how they use it / if they use it?
  • Navigation -  Easy to change date / change station / find dining services / return home?
  • Device - Accessible and Usable on a phone / desktop / tablet
  • Physical Data - Hours and Schedule information, Announcements - readable, easy to recognize
  • Header and Footer - Considering the implementation of MHC content - will they use?

View Executive Summary

Metrics Analysis

Post Launch Statistics

User Behaviors and Takeaways

  • Increased efficiency (ease of use): Time on page has been reduced by 73%
  • Increased explorations (usability): page views increased by 2.6 times
  • Higher satisfaction (pleasure): Session duration increased by 6.9 times and bounce rate decreased by 64%
User Experience Research: Mount Holyoke Menu

Related Projects

Tasha Tudor and Family

Information architecture
UX design
Visual design
UI development
2016-2017 | Design and build an information architecture that unified an ecommerce platform, blog, recipe feed, and tours into a community-based, singular brand experience.

Jim Wann, Musician

Information architecture
Art direction
Visual design
UI development
2015-2016 | Design a prototype and custom template featuring a modular, mobile-friendly user interface that elicits a broadway sensibility. Craft a content strategy (imagery, IA, and text that underscores Wann's propensity for collaboration across the disciples of songwriting, theatrical production, and TV.

Apelon

Content strategy
Visual design
UI development
CRM integration
2015-2017 | Complete brand redesign to update a legacy site and graphic materials with the goal of making the content more accessible to key decision makers within health care organizations.

Connect with me

I'm currently open to speaking engagements, collaborative exchange, and select, highly creative freelance projects. Please reach out and say hi.

Sign In