Case Studies

How do you create user experience parity between 60+ different systems?

Indigo Design System: Universal Service

 

Problem

My team knew from extensive ethnographic research that users of USAC’s suite of tools crossed at least 7 different systems when applying for funding.

We also knew that users filled out up to 10,000 fields in a multi-step application process. An error in one of those 10,000 fields could mean a significant delay in receiving much-needed funds for rural health clinics or schools and libraries.

Lastly, we understood that the systems that applicants used were built by different development teams over a decade. As a result, common UX components were not re-used, and behaved inconsistently across systems.

The Experience Design team’s hypothesis was that continuity — through a comprehensive design system — might help lessen user workload, increase accuracy, and help to streamline some front-end dev work.

Approach

  1. Revisit all existing user research, specifically at the product level, as to identify a cross-section of direct user concerns

  2. Perform a comprehensive design audit of the most widely-used systems (by user volume and financial implication)

  3. Analyze existing usage data

  4. Collaborate with the front-end development, content strategy, and data science teams to understand how the systems were being created and maintained — as well as design implications for how data is passed

  5. Create company-wide awareness of the user issue, and build internal coalitions to implement a pattern/component library

  6. Use an Agile approach for sketching, design, and development sprints, testing components as we went

  7. Create living, breathing documentation for how components and patterns should be used

  8. Evaluate (and adjust) components and patterns in context of the systems in which they will be used

  9. Design a mechanism for ongoing updates and releases of the library

  10. Evangelize the system throughout the company

Outcomes

  • C-level leadership at Universal Service mandated that teams adopt the Indigo Design System for any net-new systems at the company

  • Indigo Design System was showcased to the Universal Service board of directors to illustrate Experience Design team’s tangible support for a “one USAC”

  • UX, Design, Content, Data Science, and Front-End Development worked together — happily and productively, fostering excellent collaboration and communications between the disparate teams

  • Initially launched in 2018, Indigo is still updated today, with new releases, components, and documentation

How do you design for a content-centered process?

IA and Section Redesign: World Bank (via Eight Shapes)

 

Problem

Critical to the operations and mission of the World Bank is the Procurement process, whereby countries and NGOs can apply for much-needed infrastructure funding.

The procurement process had been updated a few times over the course of a decade, resulting in new guidance and revised forms for applicants. However, the previous set of documents and procedures needed to be retained for continuity of projects already in-process.

The challenge was to come up with a revised IA for Procurement and to translate the resulting information architecture into page designs that aligned with existing design patterns and brand standards.

Approach

  1. Content inventory to understand the breadth and depth of the section

  2. Baseline content analysis to gauge key content-specific metrics

  3. Stakeholder interviews to understand more about the users’ procurement processes, as well as how internal staff use the website to support that work

  4. Draft multiple iterations of information schemas (IAs, site maps)

  5. Test the structure with site users via tree testing

  6. Final IA/site map with related documentation

  7. Page design options based on the revised IA

Outcomes

  • The user’s experience meaningfully aligned with World Bank layout, navigational, and interaction patterns

  • Increased prioritization of user tasks to support completion of the procurement process

  • Extensible structure to support additional changes

How do you tell a more actionable story?

Emergency Pages: USA for UNHCR

 

Problem

USA for UNHCR (The UN Global Refugee Agency) relies on donations to support its on-the-ground work across the globe. While the Emergency section of unrefugees.org garnered a high amount of visits, the time on the pages was low, while the bounce rate was high.

Approach

  1. Research possible causes for page performance:

    1. Geography/limited “sense of place” for US-based visitors

    2. Copy-heavy storytelling

    3. Limited progressive disclosure

    4. Usability concerns

  2. Peer organization analysis to evaluate the storytelling

  3. Evaluate the breadth of UN-related content to tell a more multi-channel story

  4. Page redesign using existing components to support extensibility

  5. Extensive research and copywriting

Outcomes

  • A “facts and figures” approach allows data points to tell a quick story

  • More meaningful integration of video and other multimedia elements

  • Map element geographically orients readers

  • Template adopted for all Emergency pages

  • Increased time on page and lowered bounce rate

How do you foster a UX team's process & career growth?

Process Framework and UX Career Matrix: Universal Service

 

Problem

UX at Universal Service Administrative Company was largely ad-hoc prior to the creation of a formal team in 2016. UXers were hungry for career growth, but had no clearly-defined path to promotion.

Similarly, the team had not yet codified the UX process at USAC.

These two challenges overlapped in significant ways:

  • The team needed a defined promotion path to encourage staff retention.

  • The company needed a stronger sense of the skills and training of the UX team.

  • The team needed a framework/model for articulating the UX design process.

  • Management needed a matrix to measure the team’s growth.

Approach

  1. Stakeholder interviews with the UX team to understand their needs and wants

  2. Research into UX job descriptions, specifically as they pertained to process

  3. Interviews with external industry peers, as well as company leadership

  4. Workshops for the UX team to identify the process they wanted to be accountable for

  5. Design two artifacts: a career progression matrix and a process framework

  6. Gather and encourage first-hand feedback to shape the team’s process and individual growth

  7. Display large scale, highly visible posters for cross-team education and discussion

Outcomes

  • More meaningful coaching and effective performance reviews

  • Improved leadership accountability for the team’s visibility and growth

  • Increased communication with other teams to emphasize that UX is a process, not a task

  • Aided recruiting by standardizing job descriptions and candidate pre-screening