Case Study: University of Michigan Appreciate Donors

Problem:

In a World-Class University with a large population of scholarship recipients, how do we allow those students to reach out to their patrons and say thanks for the support, as well as maybe giving them an update on how the time at U of M is treating them?

The Appreciate Donors application built by Gilson and CQL Group is a full-featured web app that allows administrators at the University of Michigan easily upload a single database of information about all of the student recipients of donations, and the donor or donors responsible. The students are sent a mass email with a link to their dashboard within the app, where they are shown a list of letters that they may complete for their donors. The students save the letters and review a live PDF preview of their letter. 


– An example student dashboard screen from Appreciated Donors.

The application needed to be fully accessible to meet the guidelines put forth by the University of Michigan and the World Wide Web Consortium (W3C). I was contracted to handle the UX Design for the application with a special emphasis on web and app accessibility.

  • The W3C is an International Consortium tasked with documenting how to build accessibility into the World Wide Web.

Process:

To get to the bottom of how accessibility issues impacted our users, we formed a focus group among the students and faculty at U of M to identify accessibility issues that we could document and improve upon in our upcoming development sprints. We took part in post-it note brainstorming sessions to collect examples of every point of contact a user might have in Appreciate Donors when it came to accessibility

Personas

Using the information we’d gathered in our initial interviews and post-it sessions, we developed personas as generalized snapshots of each main type of user, their goals and needs, and special needs they have that may be supported by accessibility in the design. 3-5 Personas are developed and used in future development to keep distributed teams all focused on the same identified user base. This is why the process is called “User Based Design”.


– An example of a persona developed for Dematic’s IQ Software.

The UX Team carried out focus group meetings with students and teachers at the Kalamazoo Home and School for the Blind to learn about how they use technology to help them gain information with little or no eyesight.

Focus Group: Kalamazoo Home for the Blind. 

Working with the team at the Home for the Blind we were able to see them use braille writers and textbooks, screen reader technology with PC’s and the Internet, as well as using applications on a PC in Windows Accessibility mode for users with some eyesight remaining.

  • Microsoft Windows Accessibility Controls circa 2015.

Solution:

Using the findings from the focus group sessions as our guide, we put together a findings document to summarize and then dig into guidelines for the visual design of all elements of the application. The Guide looked specifically at accessibility in areas including font readability, button size, alt-tags for screen readers and color palettes with correct contrast for users in accessibility mode.

The Brand Style Guide or Design System Document

For the Appreciate Donors project, a user guide document was authored that gave special instructions for working accessibility into the visual design of every screen in the interface.


– The beginning of the Appreciate Donors Brand Guidelines Document


– Another example page from the Appreciate Donors Brand Guidelines

Other Solutions: Design Guideline Wiki’s

In the case of the Dematic Project mentioned above, all of the branding information – including guidelines for accessibility and links to sources where the information came from – was collected in a wiki with Atlasian’s Confluence Software.


– Confluence is a powerful wiki authoring tool that can be great for web-based standards guides for branding, code, as well as accessibility. 

Other Solutions: Design System Managers

In addition to Standards Guides being published on the web or more often as PDF’s, companies in the Web Design and UX Design business – such as InVision App – are coming out with plugins for their tools offering easy creation and management of Design Systems in one centralized location on the web. In the modern design world of sometimes very far spread distributed teams, collecting these guidelines in one place is extremely helpful to keep a cohesive brand vision. Colors, fonts, icon sets, even snippets of code can be catalogued in one place on the cloud.

I personally worked with at least three clients setting up a DSM environment for teams of developers and designers, as well as running Lunch and Learn sessions with the teams to get them up and running in the use of the DSM.

  • An example DSM Screen for Color Palettes in the DSM

Thanks For Reading!

I am a freelance UI/UX Designer and Frontend Dev Guy located in Grand Rapids, Michigan. Please click here to get in touch about anything, including projects that I can lend my UX Expertise to! Click Here to Contact Nate

Leave a Comment