MortarStone Teams Redesign
Redesigning a view in the MortarStone donor development platform
The existing UI was not intuitive
We found that many users were overwhelmed by the option icons on the right of each team record. Most users had trouble identifying what these options did.
The prospects column was also too ambiguous. Many users had trouble deciphering what the numbers separated by slashes meant. The MortarStone team explained to me that these figures showed the amount of households that were in each stage of a team lifecycle: Prospects, Current and Archived.
It was clear that this interface needed to be decluttered, a stronger visual hierarchy needed to be established and the intended user flow should be made clearer.
Simplifying the UI
I cleared up the interface primarily by establishing a stronger visual hierarchy and grouping. Teams are rolled up into a single sidebar menu for selection. Users can see more information about the team that is currently selected in the adjacent card. The options for each record were tucked away behind the vertical ellipsis icon to the right of each household record and on the settings tab for team-wide settings.
Clearing up the conceptual model
After talking to some of our users and presenting some initial wireframes, I discovered that most users used teams as a way to bucket households based on a set of goals around donor development.
I simplified the teams conceptual model by reducing the team lifecycle stages to just two: Current households and Completed households.
I introduced a piece of functionality called Milestones. Users can now add team milestones in the team settings and those milestones will be attached to each household in the team. When a user marks all the milestones complete on a household, that household “completes” the team, and is moved to the Completed section for review.
