Background

How does an organization with 1.4M members track its growth at club-level?

Rotary International is one of the largest global organizations of business professionals united by charitable causes. With over 46,000 clubs, oversight of each club is challenging, especially when top-level club administrators want to assess and ensure growth. Our client, one of these executives, came to us with a prediction model (the Membership Growth Index, or MGI) he'd created to assess the health of a club in terms of its membership trends. The next step to take was applying this model to each club's data, and to make that data accessible through a web app for zone, district and club leaders across the organization to inform their growth strategies.

Goal

Create a web-based tool fed by organization data that provides an intuitive and actionable experience to Rotary members at various levels.

Build a web app that allows Rotary users at various roles (club president, district leader, zone leader and admin) to:

• Integrate a surveying tool for clubs to use internally to assess the satisfaction of their respective club members

• View reports that overview data for each club, according to the user's role permissions:

  • Club Membership Growth

  • Attrition and Attraction Rates

  • Membership Growth Index Assessment (essentially the "health status" of the club determined by the client's prediction model)

User Stories

Who will use this tool and what do they need to do?

Our first step was to get a better understanding of who would be using the app, and exhausting a list of possible things they would want to do using the tool. After we wrote this all out, we collaboratively prioritized these stories according to the main objectives the client had given us at the outset to lockdown our MVP roadmap.

Competitive Analysis

To get a sense of best practices in data visualization and organization, we looked at well-known tools with reporting functionality and tailored our requirements according to their assessed pros and cons.

Salesforce

Pros

• Well-organized interface with nav items & toolbars in familiar places

• Typography choices provide an inherent hierarchy to the content shown

• Uses a dashboard treatment with distinct blocks

• Familiar icons used to indicate actions

• Ability to expand small views

• Provides a visualized thumbnail approach to each report for easier visual recognition

Cons

• Duplicative actions available-- unclear if there's a difference between the edit button and the edit icon

• A bit crowded-- lots of actions available, could potentially overwhelm a new user without a clear starting point

• Thumbnails of reports are quite tall-- does not appear to allow the user to switch between various views (grid or list) according to their preference

Tableau

Pros

• Generally a clean look, not too many competing colors to confuse the user with UI elements and colors associated to the report itself

• Uses side bar menu approach that helps to organize actions at cascading levels

Cons

• Icons appear dated, are less familiar to common modern UI trends

• Lack of typographic variation to guide the eye according to a content hierarchy

• Prominent white space confuses work area with app controls

Google Analytics

Pros

• Varying typography helps draw the eye through the data

• Blocks are outlined, which helps with visual organization

• Blocks and stats have clear labels

• Space is well-utilized to deliver data (not crowded by additional actions)

Cons

• Colors could be improved for clarity and cohesion (although, this is controlled by the user rather than the app)

Heuristic Analysis

A review of Rotary's existing tools to track membership goals, progress and provide analytics.

After reviewing takeaways from our competitive analysis, we applied our learnings to client-provided starting points for the UI (namely, screenshots of static tools they currently used to serve the purposes being addressed by the new app).

Membership Goal Worksheet

Issues:

• Text-heavy; text related to actions are unclear

• Layout issues; text is too close together, tables and graphs are not aligned

• Graph is unlabeled

Membership Progress Report

Issues:

• Text-heavy

• Colors are overwhelming

• Need to create a "what's the point" slimmed down view for the user who wants a high-level, at-a-glance takeaway

• Percentages are confusing when they go beyond 100%

Attrition/Attraction Averages

Issues:

• Needs better visual hierarchy

• Shorten data labels to reduce their use of space

• Need to create a "what's the point" slimmed down view for the user who wants a high-level, at-a-glance takeaway

Dashboard

Issues:

• Text-heavy: too much to read on top, not skimmable

• Buttons have way too much text, especially given how many buttons are available to the user

Design Goals

• Make action items clear

• Create a strong sense of visual hierarchy through typography and color

• Limit content shown to user at once to avoid overwhelming them

Wireframes

With design goals now in place, we were ready to begin designing user flows and wireframing. Because this project was schedule driven, user flows were developed in conjunction with the wireframing process.

Style Direction

After receiving sign-off on the wireframed flows, I reviewed the Rotary brand to develop three directions to skin the app.

Ultimately, the client preferred style 2, foregoing rounded edges.

Style 1 - Clean White

Style 2 - Brand-Forward

Style 3 - Brand-Forward Variation