centup mobile app design proposal

Green Monkeys: Mike, Jazzie, Igor, Erin

Create an iOS app that gives readers a unique

way to discover and read CentUp content.

The Problem

Splash Screen


• NOTES FOR PRESENTATION

• How to remove barriers to monetary giving • How to encourage microtransactions • How to allow for easy content filtering

To Discover

After researching competitors and the CentUp brand, there were a few things we still needed to figure out:


Our ResearchConducted

15 Interviews!• Tell us about your experiences while searching for and

reading content on your phone (reasons for frustrations, reasons for satisfaction). !

• Why do you use the readers or websites that you do?!• How do these readers/websites curate content for you?!• How do you ensure that you are viewing content that you

enjoy?!!• Do you engage in micro transactions within the apps that you

use? Tell us about those experiences.!!• What factors affect your likeliness to donate money to a

charity or cause?!!

Open ended questions to learn about and design for user habits and needs:


Insights

“If I’m giving money, I want to know everything about

where that money is going and what it’s being used for.”

“Most of the time, I have to sort through a bunch of articles that I

don’t want in order to find something interesting to read.”

“I try to avoid microtransactions because they can be annoying and

intrusive.”


Insights• Users find new content on large aggregator sites like Twitter because they can easily filter

their content by only following who they want. • Despite content being filtered by aggregator app/site, users still spend a portion of their time

scrolling through content to find something they would like to read. • Users mostly follow and read blogs written by people they know (friends or family) or people

they feel connected to (media personalities).

Finding & Reading Content

!• Users will only give if they feel a connection to the charity (are familiar with the cause or

personally affected in some way, charity and personal beliefs align). • Transparency is most important barrier. Multiple users have turned down giving donations

because they were weary about where their dollar was actually going and what it was being used for.

• Multiple users have turned down giving donations because they didn’t feel that the small amount they were giving would make a difference and it is a larger hassle to give than to not.

Monetary Giving

Microtransactions on Web & in Apps• When asked to give small amounts near checkout step, users decline because they don’t

want to take the time to research or look up the cause. • Users find that microtransactions can be annoying if they are intrusive and interfere with the

user’s primary goals of using an app.


Style GuideTypography Color

Headlines Allegrya Bold 24px/26px

Sub Headlines Source Sans Pro Bold 20px/22px

Paragraph Text Source Sans Pro Regular 16px/20px

Feed Categories Source Sans Pro Regular 18px #777167

Meta Data Source Sans Pro Regular 14px

publisher: #33B7E6 | Date: #ADAAA3

Icons

Category Filtering

All Screens


Article Feed

Swipe section

sideways to view more

articles within this specific

category

Scroll down to view more categories

Features:!• Easy filtering options so users don’t

waste time searching through content • Clickable content creator link allows

users to view other content from that source

• Article posted timeframe allows users to ensure they are reading the most up to date content.

• Ability to search through articles with search icon appeals to users who don’t like to browse and know what they want. !!

Design:!• Clean and minimal design doesn’t

interfere with the user’s experience. • White background and varying

typefaces and sizes allow for readability.


Reader Screen:Simply swipe up CentUp

button to give pre set base donation

Two ways to quickly CentUpHold down to charge up your CentUp

amount (release at any time to customize your amount or hold down until you reach

your pre set maximum amount).

When you reach your desired amount, swipe up to donate. The amount will be deducted from your account balance (bottom left) and a thank you message confirming the amount

pops up at the top of the screen.

1. 2.


Reader ScreenWorking prototype: A few tips and instructions for using the prototype

centup.michaelwpare.com/centUp.html

This prototype works in webkit browsers (Full functionality in chrome only).!!• To CentUp your base donation amount, swipe up at least 75 px and no more than

300px, then release the button.!!• To charge your donation, hold down on centUp button for longer than .75 seconds

and continue holding until you reach either the amount that you want or your max donation (set to 150 for the prototype). Once charged swipe up as normal to donate.!

!• To hide or reveal your available funds, click on the icon in the bottom left-hand corner.!!• Dragging the button higher than 50% up the page will reset the donation and drop the

coin back to the bottom of the screen. This is how a user would reset if they either accidentally charged the coin or decided not to cent up after dragging the coin.

Link to prototype:

http://centup.michaelwpare.com/centUp.html


Settings

Settings Menu Account Information Filtering OptionsActivity HistoryAll options are

easily accessible from the article feed

Users can change their base donation amount and maximum donation amount

Users can quickly view all articles they have Cented Up. Acts as a

“saving” articles feature.

Users can update their category preferences to ensure they are always viewing content

they enjoy.


Personalize Feed

Quirky and Inviting Onboarding Process• Gathers user preferences in a fun way to filter their initial feed and show categories that they like. • Engages users from the beginning of their CentUp App experiences and makes CentUp stand out from boring

competitor onboarding processes.


Personalize Feed

Quirky Onboarding Process

Funny “mad lib” sentence created for the user based

on the answers given. Answers will be used to filter the content shown in

their feed.

Introduction to CentUp brand and personality and what

CentUp does


Charity Selection

Encourage donations by being transparent and goal oriented.

• Attainable goals reflect brand philosophy by showing that a few cents make a difference.

!• Transparency makes users feel more connected

and comfortable giving and they are more likely to centUp knowing exactly what their money is being used for.

!• Users receive notification when goal is reached

and are prompted to pick a new charity/goal. This keeps charity aspect in user’s mind to encourage giving.


Summary

Our design utilizes the following features to optimize user experience and make CentUp stand out among competitors:!!

• Transparency to encourage monetary giving • Fun and engaging microtransaction • Easy content filtering and personalization


Thank you!

centup mobile app design proposal

Technology