Download - 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
Green Monkeys: Mike, Jazzie, Igor, Erin
• 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:
Green Monkeys: Mike, Jazzie, Igor, Erin
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:
Green Monkeys: Mike, Jazzie, Igor, Erin
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.”
Green Monkeys: Mike, Jazzie, Igor, Erin
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.
Green Monkeys: Mike, Jazzie, Igor, Erin
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
Green Monkeys: Mike, Jazzie, Igor, Erin
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.
Green Monkeys: Mike, Jazzie, Igor, Erin
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.
Green Monkeys: Mike, Jazzie, Igor, Erin
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:
Green Monkeys: Mike, Jazzie, Igor, Erin
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.
Green Monkeys: Mike, Jazzie, Igor, Erin
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.
Green Monkeys: Mike, Jazzie, Igor, Erin
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
Green Monkeys: Mike, Jazzie, Igor, Erin
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.
Green Monkeys: Mike, Jazzie, Igor, Erin
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
Green Monkeys: Mike, Jazzie, Igor, Erin
Thank you!