involveMint Web App
Product Strategy • DesignOps • User Research • Human Interface Design • Prototyping
involveMINT • 2020
Summary
Summary
I led a product development team in designing a progressive web application which pays citizens for their volunteerism. Users may spend their earned crypto-credits on local goods and services via online or in-person shopping.
I led a product development team in designing a progressive web application which pays citizens for their volunteerism. Users may spend their earned crypto-credits on local goods and services via online or in-person shopping.
Led a software product team of designers…
by mentoring staff, assigning user stories, and reviewing work.
Helped define product features & roadmap…
through discovery research & user story mapping workshops.
Designed, prototyped, and user-tested…
interfaces to ascertain value to users and the business.
Introduction
Introduction
Empowering communities to self-repair.
Empowering communities to self-repair.
involveMINT is a non-profit business focused on alleviating systemic problems in under-resourced communities such as failing infrastructure, food deserts, transportation, littering, tutoring, healthcare, and more. Aspiring to find a way to remediate these issues, the company’s founder had an inspired idea: could a sustainable business model be developed that incentivizes citizens to improve their communities while compensating them for their altruism?
involveMINT is a non-profit business focused on alleviating systemic problems in under-resourced communities such as failing infrastructure, food deserts, transportation, littering, tutoring, healthcare, and more. Aspiring to find a way to remediate these issues, the company’s founder had an inspired idea: could a sustainable business model be developed that incentivizes citizens to improve their communities while compensating them for their altruism?
Discovery Research Phase
Discovery Research Phase
Understanding & Framing the Problem
Understanding & Framing the Problem
I was hired as the Lead Designer where I would collaborate with the company’s founder, board members, and engineering leads in pursuit of launching a progressive web application. For research, I would lead team members through stakeholder interviews, a product audit, a business strategy assessment, and user story mapping workshops. Outputs from these efforts would inform the features of a mobile app that could fulfill the company’s mission to uplift local communities.
I was hired as the Lead Designer where I would collaborate with the company’s founder, board members, and engineering leads in pursuit of launching a progressive web application. For research, I would lead team members through stakeholder interviews, a product audit, a business strategy assessment, and user story mapping workshops. Outputs from these efforts would inform the features of a mobile app that could fulfill the company’s mission to uplift local communities.
Team & Methodologies
Team & Methodologies
Collaborating with Specialists
Collaborating with Specialists
Conducting stakeholder interviews with the company’s founder and his affiliated consultants gave me insight into the company’s aspirations. These conversations were helpful, revealing a history of previous efforts to build an app, a business strategy that involved minting a cryptocurrency, and guidance on navigating pitfalls that previously impeded their efforts.
Furthermore, the company created a new development team by sourcing talent from students of Carnegie Mellon University and the University of Pittsburgh’s software engineering and design programs.
Conducting stakeholder interviews with the company’s founder and his affiliated consultants gave me insight into the company’s aspirations. These conversations were helpful, revealing a history of previous efforts to build an app, a business strategy that involved minting a cryptocurrency, and guidance on navigating pitfalls that previously impeded their efforts.
Furthermore, the company created a new development team by sourcing talent from students of Carnegie Mellon University and the University of Pittsburgh’s software engineering and design programs.
Collaborating with stakeholders and members of the product team.
Local volunteers enrich their communities by cleaning their neighborhoods and offering assistance to those in need.
Business Model
Business Model
Rewarding the Labor of Volunteers
Rewarding the Labor of Volunteers
Community service is a noble endeavor that often yields tangible improvements when applied to infrastructure, the environment, and the economy. But incentivizing a populace to volunteer can be difficult – especially in communities that struggle to overcome economic instability. Residents are often unable to donate their time; providing free labor is just too expensive.
Therein lay the opportunity: InvolveMINT could bolster volunteerism by paying citizens with a minted, hyper-local cryptocurrency. Citizens could spend these credits at participating merchants, who in turn, may commerce in either B2B transactions or spend their credits at will. If this system of commerce could be sustained then distressed communities would have a mechanism to self-repair through their own citizenry.
Community service is a noble endeavor that often yields tangible improvements when applied to infrastructure, the environment, and the economy. But incentivizing a populace to volunteer can be difficult – especially in communities that struggle to overcome economic instability. Residents are often unable to donate their time; providing free labor is just too expensive.
Therein lay the opportunity: InvolveMINT could bolster volunteerism by paying citizens with a minted, hyper-local cryptocurrency. Citizens could spend these credits at participating merchants, who in turn, may commerce in either B2B transactions or spend their credits at will. If this system of commerce could be sustained then distressed communities would have a mechanism to self-repair through their own citizenry.
Content & Product Audit
Content & Product Audit
Evaluating Value & Potential
Evaluating Value & Potential
My investigation into previous initiatives found esoteric wireframes, scant high-fidelity designs, diffused marketing content, no documented user stories, and some aspirational user flows with feature descriptions. In their totality, these artifacts weave a story of starts, stops, and good intentions that were unfortunately waylaid before coming to fruition. Assessing these outputs taught us about what could lead us astray, provide artifacts that could be leveraged again, and justify a more robust process when beginning development anew.
My investigation into previous initiatives found esoteric wireframes, scant high-fidelity designs, diffused marketing content, no documented user stories, and some aspirational user flows with feature descriptions. In their totality, these artifacts weave a story of starts, stops, and good intentions that were unfortunately waylaid before coming to fruition. Assessing these outputs taught us about what could lead us astray, provide artifacts that could be leveraged again, and justify a more robust process when beginning development anew.
Examples of page designs from previous development efforts.
Finalized Problem Statement
Finalized Problem Statement
Research Insights
Research Insights
Citizens in under-resourced communities lack access to resources that could improve their economic status and enrich their local neighborhoods. InvolveMINT seeks to alleviate this by compensating volunteerism with a hyper-local cryptocurrency, thereby rewarding citizens for uplifting their communities. A mobile app could support this business model by tracking activities, recording time spent volunteering, and facilitating commerce between users. However, the company struggled to both assemble and retain a product team for the necessary time to fully develop an app containing these features.
Citizens in under-resourced communities lack access to resources that could improve their economic status and enrich their local neighborhoods. InvolveMINT seeks to alleviate this by compensating volunteerism with a hyper-local cryptocurrency, thereby rewarding citizens for uplifting their communities. A mobile app could support this business model by tracking activities, recording time spent volunteering, and facilitating commerce between users. However, the company struggled to both assemble and retain a product team for the necessary time to fully develop an app containing these features.
DesignOps & Product Management
DesignOps & Product Management
Mapping Knowledge & Aligning on Features
Mapping Knowledge & Aligning on Features
My discovery research brought clarity to involveMINT’s mission, identified the problems endured by its target audience, and revealed potential where the company could apply itself to affect change in communities. Next, we needed to leverage this knowledge by defining how to support a user through the company’s business model while also setting up a means to create these features through a product development cycle.
My discovery research brought clarity to involveMINT’s mission, identified the problems endured by its target audience, and revealed potential where the company could apply itself to affect change in communities. Next, we needed to leverage this knowledge by defining how to support a user through the company’s business model while also setting up a means to create these features through a product development cycle.
User Story Mapping
User Story Mapping
Defining User Interactions
Defining User Interactions
Before crafting an interface it was pertinent to anticipate how users would navigate and interact with involveMINT’s business model. By mapping these stories and interactions across a semi-linear spectrum, the team could align on a set of features that connect holistically into a unified product. We documented each user’s story, how their interactions flow forward, and what UI elements would aid them in completing tasks along their journey. These user stories and UI elements become actionable work that our product team could use to guide design and development.
To fully 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 could accept the digital currency, clarifying user permissions, the introduction of an in-app marketplace, and more. An ideal journey for each user class was created by distilling their stories into a clearer, more focused experience than previously existed.
Before crafting an interface it was pertinent to anticipate how users would navigate and interact with involveMINT’s business model. By mapping these stories and interactions across a semi-linear spectrum, the team could align on a set of features that connect holistically into a unified product. We documented each user’s story, how their interactions flow forward, and what UI elements would aid them in completing tasks along their journey. These user stories and UI elements become actionable work that our product team could use to guide design and development.
To fully 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 could accept the digital currency, clarifying user permissions, the introduction of an in-app marketplace, and more. An ideal journey for each user class was created by distilling their stories into a clearer, more focused experience than previously existed.
Two of three artifacts from the user story mapping workshops I facilitated. While conducted in person, we digitized the maps for posterity.
We used the tool Trello to manage a kanban board.
DesignOps
DesignOps
Assigning User Stories
Assigning User Stories
We kept our process lean and flexible by centralizing most of our communications to Slack and Google Meet while managing our user stories through a Kanban board (Trello). Our roadmap and release schedule were negotiated between myself and the company’s founder, which helped us to prioritize features and target deadlines for delivering mockups and prototypes to developers. Working in agile sprints, I would assign user stories to the design team (myself included), offer guidance and coaching when necessary, facilitate weekly ceremonies, and give final approval before submitting our work to developers.
We kept our process lean and flexible by centralizing most of our communications to Slack and Google Meet while managing our user stories through a Kanban board (Trello). Our roadmap and release schedule were negotiated between myself and the company’s founder, which helped us to prioritize features and target deadlines for delivering mockups and prototypes to developers. Working in agile sprints, I would assign user stories to the design team (myself included), offer guidance and coaching when necessary, facilitate weekly ceremonies, and give final approval before submitting our work to developers.
Design & Build Phase
Design & Build Phase
Crafting the Interface
Crafting the Interface
Combining our learnings from discovery research with the outputs of user story mapping provided a clear path forward for design and development.
Combining our learnings from discovery research with the outputs of user story mapping provided a clear path forward for design and development.
Human Interface Design
Human Interface Design
Creating our Design System
Creating our Design System
Defining a set of rules, colors, typography, and UI elements for the team to embrace would be an important enabler. 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 for any domain or use case that serves users of involveMINT. It also 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. The following are examples of components, elements, and styles utilized within involveMINT's Design System.
Defining a set of rules, colors, typography, and UI elements for the team to embrace would be an important enabler. 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 for any domain or use case that serves users of involveMINT. It also 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. The following are examples of components, elements, and styles utilized within involveMINT's Design System.
Human Interface Design
Human Interface Design
Shared Experiences
Shared Experiences
A set of features in the app would be shared between user types, helping to create an intuitive mental model that lessens friction across experiences. Consistent use of UX patterns creates an opportunity to instill trust; especially important for an app that facilitates commerce between users and merchants.
A set of features in the app would be shared between user types, helping to create an intuitive mental model that lessens friction across experiences. Consistent use of UX patterns creates an opportunity to instill trust; especially important for an app that facilitates commerce between users and merchants.
Human Interface Design
Human Interface Design
Signing Up & Logging In
Signing Up & Logging In
Users were required to provide a single email and password combination to create or log into an account with involveMINT. For the minority of users belonging to multiple classes, they are navigated to an additional screen depicting the profiles they can log into; a single permitting access to their profile of choice.
Users were required to provide a single email and password combination to create or log into an account with involveMINT. For the minority of users belonging to multiple classes, they are navigated to an additional screen depicting the profiles they can log into; a single permitting access to their profile of choice.
When a user chooses to sign up for a new account they're displayed a short, interactive carousel that explains the concept behind the app.
Users creating a volunteer account, referred to as a ChangeMaker, are asked to provide essential account information in order to use the app.
Human Interface Design
Human Interface Design
Onboarding & Account Setup
Onboarding & Account Setup
All new users would be guided through a short tutorial that explains the concept behind using the app. Should they choose to continue, we guide them through an account creation process to capture key information about the type of user account they are creating. This account creation pattern is very similar across all user account types, ensuring a reliable method of capturing core information tied to those specific accounts.
All new users would be guided through a short tutorial that explains the concept behind using the app. Should they choose to continue, we guide them through an account creation process to capture key information about the type of user account they are creating. This account creation pattern is very similar across all user account types, ensuring a reliable method of capturing core information tied to those specific accounts.
Human Interface Design
Human Interface Design
The Volunteer's Experience
The Volunteer's Experience
ChangeMakers, being our primary users, are the workforce behind involveMINT’s business model. The features and tasks available to them would reverberate outwards, influencing and defining the feature sets of the other two user classes.
ChangeMakers, being our primary users, are the workforce behind involveMINT’s business model. The features and tasks available to them would reverberate outwards, influencing and defining the feature sets of the other two user classes.
Human Interface Design
Human Interface Design
Available Positions
Available Positions
Users can search through a timeline of available volunteer positions near their location. Each position provides position details, example images, and the ServePartner behind the available position that has been made available.
Users can search through a timeline of available volunteer positions near their location. Each position provides position details, example images, and the ServePartner behind the available position that has been made available.
A user searches through available volunteer positions they may apply to work for.
A user's profile displays their current and past positions, their impact on the community, and a timeline of completed service.
Human Interface Design
Human Interface Design
My Profile
My Profile
A profile is made for each ChangeMaker class user, displaying their current and past positions, their impact on the community, and a timeline of their previous volunteer contributions.
A profile is made for each ChangeMaker class user, displaying their current and past positions, their impact on the community, and a timeline of their previous volunteer contributions.
Human Interface Design
Human Interface Design
My Wallet
My Wallet
A user's waller contains the current balance of TimeCredits earned through working volunteer positions or sent to them from other users. The wallet also keeps a record of previous transactions allowing a user to send TimeCredits to other individuals or participating businesses.
A user's waller contains the current balance of TimeCredits earned through working volunteer positions or sent to them from other users. The wallet also keeps a record of previous transactions allowing a user to send TimeCredits to other individuals or participating businesses.
A user's wallet is always accessible from the bottom navigation, allowing them to view transaction history and to send or receive Timecredits.
A marketplace allows users to buy or sell goods and services from another using the Timecredits they own.
Human Interface Design
Human Interface Design
The Marketplace
The Marketplace
Users and participating businesses can post their services or products on a digital marketplace. This encourages commerce between users while opening new pathways to earn TimeCredits outside of volunteering for positions in the community.
Users and participating businesses can post their services or products on a digital marketplace. This encourages commerce between users while opening new pathways to earn TimeCredits outside of volunteering for positions in the community.
Human Interface Design
Human Interface Design
The Merchant's Experience
The Merchant's Experience
The second pillar of involveMINT’s business model are SpendPartners. These are local businesses that accept credits in exchange for their goods and services. Initially, this class would comprise smaller, local businesses with the hope of scaling to include larger corporations, municipalities, and even utility companies as the adoption of credits broadens. While some of the SpendPartner features are unique, many are shared with ChangeMakers to facilitate commerce between users harmoniously.
The second pillar of involveMINT’s business model are SpendPartners. These are local businesses that accept credits in exchange for their goods and services. Initially, this class would comprise smaller, local businesses with the hope of scaling to include larger corporations, municipalities, and even utility companies as the adoption of credits broadens. While some of the SpendPartner features are unique, many are shared with ChangeMakers to facilitate commerce between users harmoniously.
Human Interface Design
Human Interface Design
My Dashboard
My Dashboard
Once logged into their account, a Merchant is greeted by easy-to-glance information about their account. Displayed to them is the month-to-date performance of their TimeCredit budget, the health of their time budget, and some of their most recent transactions.
Once logged into their account, a Merchant is greeted by easy-to-glance information about their account. Displayed to them is the month-to-date performance of their TimeCredit budget, the health of their time budget, and some of their most recent transactions.
Merchant users are shown a dashboard of information upon logging in, allowing them to quickly view the performance of their business.
Merchants can view the health of their monthly budget and make adjustments as deemed necessary.
Human Interface Design
Human Interface Design
Setting a Monthly Budget
Setting a Monthly Budget
How many TimeCredits should a merchant accept from the patrons of their business? Can that amount be adjusted, at will?
To accommodate a variety of circumstances that many merchants of the involveMint app may find themselves, we provided a means to both adjust how many TimeCredits can be accepted as well as how quickly that amount is being utilized by customers, known as the Depletion Rate. This percentage of depletion tells merchants if more or less TimeCredits should be accepted over the course of 30 calendar days.
How many TimeCredits should a merchant accept from the patrons of their business? Can that amount be adjusted, at will?
To accommodate a variety of circumstances that many merchants of the involveMint app may find themselves, we provided a means to both adjust how many TimeCredits can be accepted as well as how quickly that amount is being utilized by customers, known as the Depletion Rate. This percentage of depletion tells merchants if more or less TimeCredits should be accepted over the course of 30 calendar days.
Human Interface Design
Human Interface Design
Managing Receipts
Managing Receipts
When something is purchased by a customer then a receipt is issued, notifying both patron and merchant in the app. Most receipts are tagged as "Active" and remain so until it's used to redeem a product or service by the merchant. Once redeemed, receipts are archived but still within view in case a merchant needs to refer to a previous transaction.
When something is purchased by a customer then a receipt is issued, notifying both patron and merchant in the app. Most receipts are tagged as "Active" and remain so until it's used to redeem a product or service by the merchant. Once redeemed, receipts are archived but still within view in case a merchant needs to refer to a previous transaction.
Redeeming an active receipt allows patrons and merchants to complete a transaction with one another while maintaining a history of commerce.
Conclusion
Conclusion
Thoughts & Parting Words
Thoughts & Parting Words
involveMINT secured enough resources to design and test two of the three primary user classes: ChangeMakers and SpendPartners. Unfortunately, there were not enough resources to design the interface for SpendPartners. However, we were able to evaluate the user class' feature set and then develop a user story map to define the UX and UI at a later time. But to have helped involveMINT assess its core business model, redefine its vision, and then deliver user-tested solutions for its application was incredibly rewarding. It was a delight to help the non-profit refocus its efforts while expanding its influence to empower communities.
involveMINT secured enough resources to design and test two of the three primary user classes: ChangeMakers and SpendPartners. Unfortunately, there were not enough resources to design the interface for SpendPartners. However, we were able to evaluate the user class' feature set and then develop a user story map to define the UX and UI at a later time. But to have helped involveMINT assess its core business model, redefine its vision, and then deliver user-tested solutions for its application was incredibly rewarding. 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. I have never worked with anyone who was more of a boon to our application workflow and design process.”
"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. I have never worked with anyone who was more of a boon to our application workflow and design process.”
– Daniel Little, Founder & CEO, involveMINT
– Daniel Little, Founder & CEO, involveMINT
Credits
Credits
Team & Tools
Team & Tools
Notable Collaborators
Daniel Little, CEO & Founder
Jeremy Zacharia, Lead Developer
Robert Marks, Usability Research
Erin Xie, Product Designer
Erika Durochia, UI Designer
Maggie Ma, UI Designer
Madi Banaszak, UX Designer
Notable Collaborators
Daniel Little, CEO & Founder
Jeremy Zacharia, Lead Developer
Robert Marks, Usability Research
Erin Xie, Product Designer
Erika Durochia, UI Designer
Maggie Ma, UI Designer
Madi Banaszak, UX Designer
Software
Figma
Figjam
Zoom
Google Meet
Trello
100's of Post It Notes
Software
Figma
Figjam
Zoom
Google Meet
Trello
100's of Post It Notes