top of page
Asset 1-100.jpg

Rotary Membership Action Plan Web App

UX Design

Client:

Rotary International

ROLE:

Product Designer

DURATION:

6 Weeks

The goal of this project was to create a web app (exclusively for desktop use) that parsed and presented organization-wide membership data so club leaders at varying levels can review their membership growth progress, track goals and identify trends. Additionally, the app needed to function with Rotary's existing digital tools, while also integrating a third-party survey platform. The greatest challenge of this project was keeping the client focused on MVP features to avoid scope creep.

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.


Progress Dashboard Wireframe



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



DESIGNS

The length of the design process is always variable, depending on the needs of the customer. In most cases, I strive to iterate off of real user feedback, setting up moderated or unmoderated tasks to test partial prototypes for usability and comprehension.

BEFORE/AFTERS

Membership Progress Dashboard
Membership Progress Dashboard

Before

press to zoom
Membership Progress Dashboard
Membership Progress Dashboard

Before

press to zoom
1/1

PROTOTYPES

At the prototyping stage, I'm working closely with devs to ensure that expected behavior isn't only shown through the design, but annotated and documented for their reference as they bring the design to life.

bottom of page