involveMINT: 
Communities Refreshed

A progressive web application to empower under-resourced communities.

Key Responsibilities

• Feature Discovery
• User Story Mapping
• Wireframe Design
• High Fidelity Design
• Prototyping
• User Testing

Services

• Strategy
• UX Design
• UI Design

Hand-Phone

"I have never worked with anyone who was more of a boon to our application workflow and design process."

Daniel Little

CEO, involveMINT

Introduction

involveMINT is a non-profit business that focuses on alleviating systemic problems in under-resourced communities such as unemployment, failing infrastructure, food deserts, littering, sustainability, and more. To tackle these issues the non-profit introduced a new form of digital currency: TimeCredits. Paying users for their time as they complete volunteer projects. Users then spend their TimeCredits on goods and services at participating local businesses.

While some amount of TimeCredits had been minted it became clear that involveMINT's MVP at the time had far outgrown its utility. Creating a brand new progressive web application became necessary, as it would allow the non-profit to better serve local communities while securing funding from future investors.

Approach

A discussion with involveMINT’s stakeholders lead to an in-depth review of the non-profit’s current state of affairs, existing assets, and how to collaborate moving forward. These meetings proved fruitful; revealing a colorful past of preliminary wireframes, user research initiatives, and development cycles. Unfortunately, past efforts to create a new app had failed early in their development... leaving behind a handful of loosely defined wireframes that were largely disparate from one another in both vision and functionality. As a response, we paired down the vision for the app to its essence: to facilitate commerce between all three user classes with the least amount of friction. Gone were past cumbersome efforts, freeing us to pursue a united vision for the application's feature set. 

User Story Mapping

Before designing the interface it was pertinent to know how each user class would navigate through the app; documenting each user’s story, how their interactions flow forward, and what UI elements would aid them in completing tasks along the way. To capture these stories I facilitated several User Story Mapping workshops with key stakeholders across the organization. These workshops allowed the non-profit to redefine many broader aspects of the business: from how users would accept the digital currency, the different user permissions, the introduction of an in-app marketplace, and more. We were able to clearly define the ideal journey for each user class while distilling their stories into a clearer, more focused experience than before.

Shortly after completing the workshops, we began an eight-month-long roadmap into designing involveMINT’s new progressive web application. I would lead a team of five in designing the User Experience and User Interface, with a focus on targeting one of the smallest modern smartphones: the iPhone SE. The non-profit had enough resources to design two of the three primary user classes: ChangeMakers and ExchangePartners. Unfortunately, the third user class, SpendPartners, would be designed at a later date. However, we did map the SpendPartner's UX and UI for future development.

Design
System

Defining a set of rules, colors, typography, and UI elements for the team to embrace would be the project’s keystone. We could set global styles, create a searchable library of modifiable components, and sync them flawlessly across the team. A single source of truth, ever-growing, and accessible to all. What software was up to the task? Figma. It enabled us to create wireframes at a rapid pace while consistently shipping high fidelity mockups for user-testing and eventual handoff to our development team. Below are a select number of components, elements, and styles utilized within involveMINT's Design System.

Drag the slider above to see how some components graduated from low fidelity (for wireframing) to high fidelity (for mockups).

Colors: Primaries

Using green, orange and purple to differentiate each user class of involveMINT's application.

primary-colors-1-1
primary-colors-2-1

Typography

San-serif typefaces, Manrope and Inter, which offer great flexibility for the web.

typography

Iconography

A selection of custom icons combined with the open-source and MIT licensed ionicons.

Components

Interactive elements styled to each user class of the application. Some examples below.

Shared
Experiences

Some features of the app would be shared between users, albeit to varying levels of fidelity. This helps create an intuitive mental model that can lessen friction across all users. With that familiarity of form and function is an opportunity to create trust; especially important for an application that facilitates commerce.

sign-in-and-login

Signing Up & Logging In

A smaller portion of users can belong to multiple user classes, or profiles: ChangeMakers (workforce), ExchangePartners (businesses), and ServePartners (job creators). It would be cumbersome for users to have separate login credentials for each of those classes. Conversely, it would improve the user’s experience if only a single email and password combination were required to access their entire account.

We adopted the latter approach; a user’s account would be separate from the classes they have access to. Once signed into their account they are presented with a screen depicting the multiple profiles they have created; a single tap away to log into a profile they’d like to operate. If they only belong to a single user class then we immediately bypass this screen and take them to their respective profile page.

Onboarding & Account Setup

All users would be guided through a short explanation of each user class. Should they choose to continue, we guide them through an account creation process to capture key information about the specific class they are creating. The pattern is the same across all user classes, ensuring a reliable method of capturing core information tied to those specific accounts.

onboard

Digital Wallet

The app’s digital currency, TimeCredits, serves as the glue which holds together involveMINT’s business model. Interacting with the currency would be the most important shared experience across all users, regardless of class. This necessitated the creation of a Digital Wallet for users to manage their finances. It would be accessible from nearly every screen and allow users to quickly reference information regarding their finances such as their current balance, past transactions, purchased vouchers and sending or receiving TimeCredits. Users access the Digital Wallet by simply tapping the involveMINT logo, where it reveals itself from below the nav-tab.

User Class:
ChangeMaker

ChangeMakers, being our primary users, serve as the workforce behind involveMINT’s business model. The features and tasks available to them would reverberate outwards, influencing and defining the feature sets of our remaining two user classes. 

Some ChangeMaker features are:

  • A Positions Feed to search, view, and sign up for Positions
  • The ability to record Proof of Labor during and after working a position
  • An in-app Marketplace to order goods and services, or post items for sale
  • A Public Profile showcasing the work completed by a user
  • A Digital Wallet for users to send and receive TimeCredits
  • In-app Messaging to communicate with other businesses and users
  • Purchase Vouchers from businesses to redeem at a later time
  • A Passport for users to maintain clearances and certifications
im-changemaker-1.1
im-changemaker-2.1
im-changemaker-3.1
im-changemaker-6.1
im-changemaker-5.1
im-changemaker-4.1
im-changemaker-7.1
im-changemaker-8.1
im-changemaker-9.1

User Class:
ExchangePartner

The second pillar of involveMINT’s business model are ExchangePartners. These users are comprised of businesses that have agreed to accept TimeCredits for their goods and services. Initially this class will be satisfied by smaller, local businesses. Over time, however, it can grow to include larger corporations, municipalities, and even utility companies as adoption of TimeCredits broadens. 

Some of the ExchangePartner’s features are unique, while others mirror what’s available to the ChangeMaker class in order to faciliate commerce between users harmoniously.

Some ExchangePartner features include:

  • A Dashboard to quickly view the health of their finances

  • Set A Budget amount of TimeCredits to accept from patrons, per month

  • View the Depletion Rate of their business, depicting how much of their budget is being utilized per day

  • Manage Vouchers purchased from patrons

  • Manage Active Vouchers by Redeeming, Archiving, or Refunding them back to recent patrons

  • Manage their Store Listing in the Marketplace and what goods and services are available to purchase

  • A Digital Wallet for users to send and receive TimeCredits

  • An in-app Marketplace to order goods and services, or post items for sale

  • In-app Messaging to communicate with other businesses and users

  • Purchase Vouchers from businesses to redeem at a later time

im-exchangepartner-1
im-exchangepartner-2
im-exchangepartner-3
im-exchangepartner-4
im-exchangepartner-5
im-exchangepartner-6
im-exchangepartner-7
im-exchangepartner-8
im-exchangepartner-9

Conclusion

involveMINT secured enough resources to design and test two of the three primary user classes: ChangeMakers and ExchangePartners. Unfortunately, there were not enough resources to design the interface for SpendPartners. However, we were able to evaluate the user class' feature set then develop a user story map to define the UX and UI at a later time.

Overall, I helped involveMINT to assess their core business model, redefine their vision, then deliver user-tested solutions for its application. It was a delight to help the non-profit refocus its efforts while expanding its influence to empower communities.

"Mitch impressed me with his responsive, can-do attitude and constant desire to learn. No challenge was too hard - if he did not have the knowledge to complete an assignment, he independently sought the required knowledge."

Daniel Little

CEO, involveMINT

Credits

Strategy, UX / UI Design Lead | Mitch Watts
CEO, Strategy, Director | Daniel Little
Development Lead | Jeremy Zacharia
Interns | Erin Xie, Erika Durochia, Maggie MaMadi Banaszak
User Testing Facilitator | Robert Marks

Strategy, UX / UI Design Lead | Mitch Watts
CEO, Strategy, Director | Daniel Little
Development Lead | Jeremy Zacharia
Interns | Erin Xie, Erika Durochia, Maggie MaMadi Banaszak
User Testing Facilitator | Robert Marks

Strategy, UX / UI Design Lead | Mitch Watts
CEO, Strategy, Director | Daniel Little
Development Lead | Jeremy Zacharia
Interns | Erin Xie, Erika Durochia, Maggie MaMadi Banaszak
User Testing Facilitator | Robert Marks

Strategy, UX / UI Design Lead | Mitch Watts
CEO, Strategy, Director | Daniel Little
Development Lead | Jeremy Zacharia
Interns | Erin Xie, Erika Durochia, Maggie MaMadi Banaszak
User Testing Facilitator | Robert Marks

Tools

Figma
Zoom
Google Meet
Pencil, paper & markers
100's of Post-it Notes

Figma
Zoom
Google Meet
Pencil, paper & markers
100's of Post-it Notes

Figma
Zoom
Google Meet
Pencil, paper & markers
100's of Post-it Notes

Figma
Zoom
Google Meet
Pencil, paper & markers
100's of Post-it Notes

Fonts in Use

Inter by Rasmuss Andersson
Manrope by Mikhail Sharanda

Inter by Rasmuss Andersson
Manrope by Mikhail Sharanda

Inter by Rasmuss Andersson
Manrope by Mikhail Sharanda

Inter by Rasmuss Andersson
Manrope by Mikhail Sharanda

⦿ Available to chat.

Be it design, software, music, or the great outdoors– shoot me a message and let’s chat about whatever is on your mind.

Back to top Arrow