Robert Erdt - Portfolio Website

Designing an IOS MVP for a Non-Profit called Bits-of-Change

Bits-of-Change Hero

Welcome to the Bits-of-Change concept post, my first public post. For these design posts– I want to challenge myself with product development and learn the best practices while creating a product. I hope others can benefit from the process of me running through creative exercises, including strategy, UI design, and Prototyping.

Personally, I really enjoy clean designs that feel smooth and flawless. I believe good UI design is a balance of aesthetics and the available engineering resources. Knowing your team and their capabilities while understanding the user and how they behave in the real world really helps to understand the process of creation.

For this design, I’ve created Bits-of-Change.

Bit’s-of-Change is an app that helps people find NPO’s, Foundations, and Projects that are working in the environmental space. The concept is that users should be able to find exciting projects and donate to those projects.

Building Product Requirements

To give context to the company’s current status, I’m going to assume the following for Bits-of-Change:

  1. Bits-of-Change has a web app with an API integrated to find NPO’s.
  2. Users can donate to these projects, but only by going to the external website. 
  3. Conversions of non-donors to donors are low, conversion metrics are loosely tracked.
  4. Desktop usage has decreased, and mobile usage has increased.
  5. Competitors are releasing apps.

To get started with the design of the app, I’m going to briefly create a high-level overview based on the lean startup up method. This method will help vet out the most important features for the Minimum Viable Product (MVP).  If you are not familiar with Lean methodologies, I highly recommend “The Lean Start Up” by Eric Ries.

In a simple form, the lean method provides a framework that allows companies or individuals to iterate and validate ideas while using the least amount of resources to bring new products to the market. Combined with the customer development process you may find in agile, it helps you build better products that are validated by customer feedback loops.

Cursory steps I’m going to take to create the initial requirements and to vet out the MVP.

  1. Problem
  2. Assumptions
  3. Risk
  4. User Stories
  5. Features
  6. Design

What Problem are we solving with Bits-of-Change mobile app?

Bits-of-Change believes people want to help the environment, if Bits-of-Change can offer a streamlined way for people to contribute to the most impactful projects, more people could become aware of efforts related to environmental research and contributions to impactful projects would increase. In addition, we believe donor conversions will increase by x%.

How Bits-of-Change Saves the World

Building a Hypothesis for Bits-of-Change Mobile App

1. Identifying the Assumptions

Most people don’t carry much cash anymore but would still like to contribute to the causes they care about.

Test: Find users who are commenting on forms or other donation apps, do they like it? What’s the consensus among users?

NPO’s, Foundations, and Project organizations would want to sign up on our platform and be ok with the idea we are presenting.

Test: Show MVP designs to our super users and find new impactful organizations to survey. Sharing info that we learned in the potential customer exploratory interviews could be useful. Find non-profit API’s to integrate into our app where we could expand our product offerings.

Round-up cash apps have become a popular way to invest and save money.

Test: Reach out to them to find out what they like about, are they interested in contributing to the environment? Ask indirect questions to validate the idea further. Discover market research.

Users would trust our app enough to link their bank accounts to the app giving us permission to view transactions.

Test: Ask the potential users how they invest, survey investment app users and see their comfort levels.

Users would feel better if they could see where they are donating too, less risk then putting change into a donation bin at the local store, and more visibility into impactful environmentally focused nonprofits.

Test (more like an assumption): We can easily find this info by asking potential users how they currently donate.

2. Analyzing the Risk

At any time when you are creating something new or updating a project, Risk analysis can help identify immediate, short, and long-term problems that you may need to overcome. Identifying risk is helpful at any stage of the development process and is something I always keep in mind. Risk analysis is a very important step in validating the feasibility of ideas, limiting downstream resources, and keeping engineers happy.

For me, risk analysis has three parts:

  1. Identifying Risk
  2. Mitigation
  3. Re-Analyzing Risk

So, what are some of the important risks for Bits-of-Change mobile app development and how do we mitigate the identified risk? Below are some of the important risk’s I’ve identified.

  1. Automated donating relies on bank account API integrations. Most bank API’s are invite only creating a dependency on the sustainability of third-party API’s.
    • Mitigation: Research API companies, find reputable companies that provide access to bank API’s. Ask dev team for feedback about the API’s that they are aware of. Also ask about experience with these API’s.
  1. Security will be a concern for users and any form of in-app payment will create liabilities for company.
    • Mitigation: Consult with a dev team to get feedback on security constraints, check app store submissions for feasibility, and consult legal.
  1. Legal concerns for financial transactions and storing bank account records.
    • Consult legal team and ask for feedback providing them concepts of features. Use info found from legal to re-course with dev team and to re analyze the risk for bank integrations.

3. Building the User Stories

  1. Sally’s User story
    • Sally is a young adult professional
    • Sally makes above average wages and contributes to Env. Causes when presented with the option.
    • Sally has a college level education
    • Sally is an active user on Bits-of-Change web app
    • Sally is ok with giving trusted third part app companies her bank account access.
    • Sally on average spends 80 dollars a day with 3-4 transactions per day day.
  1. Jim’s User Story
    • Jim is middle-aged
    • Jim is compassionate about global change, but skeptical about donating to unknown sources.
    • Jim is concerned environmental causes are not always ethical operations
    • Jim relies on articles, blogs, and SM feeds like Facebook to make donation decisions.
    • Jim doesn’t feel comfortable giving external sources access to his bank account transactions but will still donate manually.
    • Jim spends on average 400 dollars a week, averaging 3 transactions per week.

What Features could we build based on the information we've gathered?

  1. On-boarding – High Priority
    • Help users find non-profits for areas they care about, categories or a matching algorithm.
  1. Non-Profit Feed – High Priority
    • Can be filtered by category
    • Can search for environmental nonprofits by category
    • Can show impactful projects of the day
    • Show the non-profit impact score
    • Quickly add to interested non-profits list
    • Share Non Profit to social media
  1. Non Profit expanded view – Medium/High Priority
    • Show the nonprofit in detail
    • Add to interested non-profits list
    • Configure donation
  2. User login – Low Priority
    • Google login
    • face ID
    • Collect: Name, Email, interests,
    • Create an account
  3. User account – Low Priority
    • Add Payment Method
    • Show login button
    • Link bank account
    • Show transaction history
    • Legal info

Designing the MVP

Looking at the product requirements, I saw a few of things that I kept in mind while coming up with the design. 

  1. There’s two opposing types of users – Free Giver and a Skeptic.
  2. One user group is giving access to banks & one user group is not fully willing.
  3. The brand is about awareness for NPO’s and I didn’t feel like a login wall would be very beneficial to gain user trust. 
  4. Keeping in mind the user groups, age, and mission of Bits-of-Change– I felt the app should have some playful components while keeping the design focused on the main mission– awareness.

1. Wireframe

Wireframing is a quick way to put together ideas for a general layout. For me, I like to wireframe with wireframing tools to make the presentation a little more effective. I’m also a lefty, and we don’t always like whiteboards.

2. Onboarding

Designing Onboarding
On-boarding Screens

With Bits-of-Change and almost any app these days, I feel onboarding is an opportunity to provide the user with two things— Brand Awareness & User Trust

To build brand awareness, I added the mission statement and a statement about how donations are working. I also added a message that states donating is options, to reinforce our primary mission and to ease the user that they are not going to be forced to pay upfront.  As a donator myself, I would have more trust that the creators care about their product and their mission of growing awareness.

To provide a better first-time experience for the user, I added a configuration screen to pre-filter the results for the user. I would anticipate that the quicker the user can find relevant content in the home-feed, the faster the user may become a converted donor. The configuration screen could also create an opportunity to gather behavior metrics to determine the content types that are most frequently selected.

3. Main Tabs

Home Feed

Bits-of-Change Mobile feed
Main Screen

After you get through onboarding, the user would be presented with the main feed. The main feed is designed to show the user some small highlights and a category of the Non-Profit. I added a like button and a share button on each NPO’s card. 

Like. Upon tapping the like button, the organization would be added to the saved tab. The user could then easily find and check-up on organizations that interest them.

Share. The share button would pull native windows to share via text, social media, or email. The user sharing the organization could promote projects while increasing downloads and activated users.

Expand. Tapping on the organization cards would segue to the expanded view. Here, the user can get a full scope of the organization. The expanded view could show recent milestones, news, and total donations. The feed could be expanded in the future with more details and focus on how the donations are being utilized. We would want to run through customer development to refine the contents of the expanded view. Users would be our greatest asset to learn this information, however, we would want to provide the main concepts of the app, like configuring the donations and linking to the donations page.

 

Donations

 

  1. Manual donations, Bits-of-Change already had manual donations in the web app, it didn’t work well. Additionally, we could add a link to a browser page for the manual donations. Monitoring the click metrics and interviewing Beta users could determine the best route to approach this in the future. 
  2. Automated donations, why develop credit transactions twice? We killed two birds with one stone and created round-it-up donations. Imagine the marketing–”This app lets you manually donate” or “This cool new app lets you automate your donations”. 
During my research into potential users, I found that the majority of round-it-up users don’t like automated transactions constantly being withdrawn from their accounts nor would this make a lot of sense from an engineering perspective.
 
How would it work?
  1. The user links a card/bank account to the app.
  2. Each transaction is monitored in a ledger where some code can round up to the nearest tenth or the hundredth of a dollar.
  3. The amounts from the round-up are accumulated and shown to the user in the “donations queue”
  4. The user can then decide to empty the queue into predetermined categories triggering a bank account transaction
Designing Tab Bar IOS

4. Login

Designing a login screen for IOS

Bits-of-Change’s mission is to build awareness. The app’s flow is to provide awareness first, then get the user to sign-up or sign-in. Because there’s no web app configurations or accounts for users currently, we didn’t need to have users sign-in right away. Additionally, I found there are restrictions to submit non-profit apps to the app store, requirements that we vetted out during risk assessment.

Finishing Up

Creating Bit’s-of-Change’s MVP was a really fun opportunity to learn new things and to develop stronger product intuition. By no means do I view this content as a final product or even a complete product design. I left out details that would be critical to bringing this product to market. In the future, I hope to refine my outline, focus on tracking metrics and becoming a better designer.

To reinforce the main idea of this post, I tried to keep the MVP simple and effective while keeping in mind engineering time, UI constraints, and project dependencies.

I hope you enjoyed this post! It would mean a lot if I could hear reader’s feedback in the comment section. Please feel free to leave a comment, challenge, or an idea for an app that I could design for the next post.

-Robert Erdt

Sharing is caring.

Share on facebook
Share on google
Share on twitter
Share on linkedin