MortarStone Teams Redesign

Redesigning a view in the MortarStone donor development platform

The existing UI was not intuitive

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 flow

Simplifying the flow

Clearing up the interface

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.

Users asked for more control over their teams

Users asked for more control over their teams

Users had plenty of suggestions on how we could make their process easier by adding some extra functionality into their team settings. We ran some usability tests using MarvelApp prototypes to uncover some desired funtionality to add to the redesign.

Teams got a lot more useful

Teams got a lot more useful

We added certain convenience functionality and were pleased to see a very positive response from our user base.

We allowed users to have households added to their teams automatically by leveraging another conceptual model I had introduced earlier: tags.

Auto add by tags

Tags are added in a variety of ways throughout the application and we allow users to create smart tags, which auto apply to households based on user-defined logic. The ability to add households to teams based on tags meant that users could now streamline the process of adding people to the appropriate team by setting up smart tags with team criteria.


We allow users to add milestones to each team. These milestones are then displayed next to each household record as checkboxes so that users can mark off milestones once they have completed it. This allows users to track their donor development by encouraging defined steps for users to take.

Archive rules

Some users expressed the desire to have recurring milestones. That is, they wanted to have household's milestones unchecked after a certain period of time to create a cyclical flow of milestones. We added archive rule options to allow for this.