1. GOOD
SAMARITAN
App Development for
User Experience Mobile First
by
Shazia Malik
Project Vision
User Personas
User Storyboards
UX Strategy
Content Strategy
Process Flow
Wireframe Links
User Testing Videos and Analysis
Analytics Measurement
A/B Testing Ideas
App Wireframes on: iPhone, Android, iPad,
Phone web and tablet web
Annotated Wireframes with different states
2. VISION
In a world inundated with stories of tragedies and
catastrophes, the goal of the Good Samaritan App
is to shine light on the good stories and initiatives of
human triumph.
I envision Good Samaritan to be a platform for peo-
ple like Arunachalam Muruganantham, a school
dropout who invented and revolutionized sanitary
pad making for women in rural India to brag about
themselves. Tell us his story of triumph.
In another case, Prasad Prakash, a young high
school teacher teaches the poorest of the poor chil-
dren in his backyard. Encouraging little girls like
Chumki, who can’t afford to go to school because
she has to make a living, to learn at his school.
Wouldn’t it be great if an App like ours allowed him
to tell the world of his efforts?
Also take for instance, Radhika Mandar a woman
who feels strongly about the problems that plague
her country but has neither the time nor the knowl-
edge to actively contribute to social causes. The
stories on Good Samaritan inject the perfect dose of
promise and positivity into her life.
2
3. Mr. Prakash Prasad (Research: News Story)
USER TYPE
Android user.
Socially active especially on What’s App.
DEMOGRAPHICS
Seventeen year old boy who teaches poor children for free
every day, in the afternoons.
GOALS
“I want to build our nation,” the young headmaster explains in careful
English. “I do not fear to accomplish this work.”
Frustrations: “Our area is economically deprived.”, lack of space, lack of supplies.
Successes: One of his students, Chumki who can’t afford to spend time learning
because she has to earn is now able to attend school thanks to Prasad’s classes.
STORY
“In the beginning I was just play-acting, teaching my friends,” Prakash
Prasad says, “but then I realised these children will never learn to read and
write if they don’t have proper lessons. It’s my duty to educate them, to
help our country build a better future.” “If I don’t do it, who will?”
Prasad, a seventeen year old boy has started a small school in his parents’
backyard to teach under priveledged children. No desks, no chairs, and
under the scorching sun, children attend to learn.
When I have enough funds, I’ll build a school in Calcutta so I can build our nation.
PERSONAS
Prakash Prasad
(The Storyteller)
3
4. RADHIKA MANDAR (Research: User Interview)
USER TYPE
iPhone user.
Socially active especially on What’s App.
DEMOGRAPHICS
Married with two teenage children
GOALS
Radhika is a fairly independent woman who wants to get up in life but
overall she is also content being a mom and a wife with a reasonably
comfortable paycheck every month. Radhika makes it a point to travel,
hike and pursue hobbies other than the daily grind of life.
Frustrations: State of women in India, apathy of Indian citizens, her husband’s unenthu-
siasm for things she likes and a sense of helplessness to initiate change for the better.
Successes: Loves traveling, reading, fitness especially yoga and meditation. Anything
that would enrich her with new experiences.
STORY
Radhika swings between the traditional demands of being a mom/wife and
a career woman, strong and independent, who is capable of standing up
for herself and voicing her opinion. Her facebook timeline invariably is about
world issues, human rights problems and speaking out for the less privelged.
When I have ten crores in the bank, I’ll build a house in Indore so I can retire in peace.
PERSONAS
Radhika Mandar
(The Reader)
4
5. A friend suggests, you
should talk about your
work on Good Samaritan!
As Mr. Prasad goes
through Murugunan-
tham’s story, he sees
himself in it. Simi-
lar beliefs, passion,
similar struggles and
similar victories.
This could be my story!
This could be me!
STORYBOARDS
That evening, sur-
rounded by family
chaos, he explores the
App. The bite sized
stories make it easy to
assimilate.
Mr. Prasad is a teacher. He al-
ready does fabulous work like
some of the Storyteller users or
Initiative creators on our App.
5
Prakash Prasad
(The Storyteller)
6. Take a picture of his class.
Films a video of
his star students,
Lata, Meena and
Gayatri.
Gets his son to film
a video of himself,
where Mr Prasad
talks at length about
his journey.
STORYBOARDS
Prakash Prasad is
thus motivated to re-
cord his story.
6
7. That morning, on her way to work by train, Radhika is
disturbed and depressed as she listens to music on
the phone. Her maid’s story and the view outside fills
her with sadness.
One morning, Radhika’s maid breaks down before Radhika because
of familial abuse. All Radhika can do is console her.
Radhika Mandar
(The Reader)
STORYBOARDS
7
8. To distract herself, she checks her face-
book as she listens to her music. New on
her timeline, is a link to a Good Samaritan
story on Arunachalam Muruganantham.
And people were loving it!
She checks it out and Muruganantham’s story
puts a smile on her face too.
Radhika Mandar
(The Reader)
STORYBOARDS
8
9. She cross checks the story on
Google between work and she
finds a tiny story on him.
She browses more stories during lunch
time. This is so interesting!
She finds an intiative of a computer class
for slumchildren and thinks it’d be a great
resource for her maid!
The following day, after telling her about
the class, she shows her maid Muruga-
nantham’s story to cheer her up.
They both burst into giggles. A man wear-
ing a sanitary pad! What next?!
Radhika Mandar
(The Reader)
STORYBOARDS
9
10. • Provide a platform for users like Prakash Prasad to relate their stories in
an engaging way through ‘Create Initiatives’ feature.
• Provide a compelling storytelling format for Users to quickly create suc-
cinct and engaging stories.
• Inspire and relate good news to users like Radhika Mandar about people
good work.
• Give users like Radhika an opportunity to even participate in good work in
the smallest way through Joining Initiatives feature.
• With a sense of community appreciation (through likes and comments) in-
spire users like Prasad to continue doing good work.
• Bring people like Prasad in touch with experts, investors etc. by featuring
their stories and including a ‘Resources section’
• Improve India’s image on the world stage.
UXSTRATEGY
Features List:
10
11. Solution:
• Create content to show Users how to tell
stories effectively.
• Employ a content curation team.
• Structure the App so that content entry is controlled.
CONTENTSTRATEGY
User generated content
can be challenging:
1. Quality control: is the story interesting?
2. Repetition
3. Abandoned Initiatives
4. Offensive
11
12. What resources
are you willing to offer
your community?
eg. teaching, legal advice, financial
advice, cook, care
Professional service:
eg. real estate space, books, food
Resources:
DONE
STOP
GOOD
SAMARITAN
Downloading...
SIGN UP?
YES
YES
NO
Sign Up page
First Name
Last Name
Email
Password
eg. John
eg. Smith
eg. johnsmith@gmail.com
Enter ten characters with at least
one number and one symbol
NEXT
NEXT
NEXT
To help us keep you posted
on your community:
Your expertise might just be
what the community is after.
Tell us the fields you’re proficient in.
You must select at least one.
ALLOW US TO ACCESS YOUR LOCATION
or
Enter ZIP
ZIP Code
Education
Finance
Design
Architecture
Fine Arts
Films
Computer Science
Mathematics
Social Causes
Environmental Causes
Science
Business
Marketing
Law
Human Rights
Women’s Rights
INITIATIVES
1
Ismail Chugtai
has enlisted you on his
intiative, TEACH GIRLS.
Pledge your support?
To celebrate more people
like yourself, please accept
this bronze medal of honor.
Congratulations, Mr Sinha.
You’re, now officially a
Good Samaritan.
Continue the good work and
earn more of these to become
the Local Hero.
?
?
BRONZE SILVER
GOLD
Learn more about
TEACH GIRLS
2
2
3
1
Rakesh Sinha
You’ve just received two new
medals from:
Ismail Chugtai
Prashant Gaikwad
BROWSE
Mr Ismail lures Mr. Sinha into granting permission to use the Society’s terrace space for holding classes to
educate young girls. If you Sign up on Good Samaritan, I’ll give you a bronze medal. It’s not a big deal for
Mr. Sinha to grant permission and the medal is added incentive. So he signs up and this is his flow.
PROCESS FLOW
This process flow was created at the beginning of my UX Strategy work for the App when I was considering
the use of a reward system for people who took/created initiatives. Users could award medals based on the
need, progress and seriousness of an intitaive.
This would act as added incentive for Users to create initiative. Public validation is a great driver of action.
12
13. “I need space to
teach a class.”
Empty spaces to run classes
Empty spaces...
STOP
STOP
Empty Flat for Rent
Hire Terrace for Rs 100 per hr
How a Society made maids’
kids literate.
Economic Class improved of
watchmen
Search Results
How a
Society
made
children
of maids,
literate. Joseph Pinto
Joseph Pinto
Hire
terrace
for
Rs 100/-
In our endeavour to
start basic English
classes for girls,
Mahavir stores was
generous to donate
their shop on
Thursdays.
Primary Initiator
A
B
23129
Joseph’s Initiatives
Send message
Joseph’s expertise
Teacher, Mathematics,
Music, Carpentry
Dear Mr Pinto,
Congratulations on your
many intiatives! A GS
member and I plan to
start some classes for
girls and were in need of
classroom space.
We don’t have a budget
and I was hoping you
could connect me with
some of your resources or
knew anyone who’d be
interested in donating.
Thank you,
Ismail
Manish Singh
+91 98675 4563
Someone has started an initiative for Mr Ismail’s issue. Now to par-
ticpate they need an empty space that would serve as a classroom!
Here is his process flow if he were to look for space on the App.
PROCESS FLOW
This process flow explores how creating initiatives can in turn help create other initiatives. Users like Prasad can not only inspire others with their
work but with their experience, act as experts for people with similar needs. Share resources, give tips, advice etc...
Alternately, having a dedicated resource page in the App, also, is helpful.
13
14. WIREFRAMELINKS
GOOD SAMARITAN SIGN UP & LAUNCH_VERSION 1
https://invis.io/ZA4OZOOSC
GOOD SAMARITAN FINAL PROTOTYPE
https://invis.io/Q258CQNNU
GOOD SAMARITAN COMPOSE INITIATIVE
https://invis.io/MB4SL4KE8
GOOD SAMARITAN EDIT INITIATIVE
https://invis.io/TF55VJZ2A
GOOD SAMARITAN USERTESTING.COM LINK
https://invis.io/4G56GD27Z
14
15. 15
PRELIMINARY
USER TEST:
Male, 35, INDIA
TASK
Compose an initiative.
Composing an initiative is one of the primary tasks that Users will perform on my App. Since the focus is to present a story in a short, compelling way it is important to
provide the User, tools that would enable him/her to progressively enter sections of his story/initiative (text/media) right from it’s genesis to its evolution.
The User will not only be able to create an initiative but add to/edit it so their initiatives have to be easily accessible.
Methodology
One user was presented the compose flow of a prototype on Invision.
Provided the User with a brief description/understanding of the App.
The User was asked to launch the App and begin composing an initiative from the Home Screen. I wanted to test if the compose tools were clear, easy to use and
intuitive. I also wanted to test if the layout of the story i.e. the delight quotient was apparent.
Delight Quotient
The Twitter App uses a great layout in its ‘Moments’ feature. The video or image takes up the entire background with a short title and slug. For me, this was a very
immersive experience where it drew me into the story. It also felt like scrolling through magazine articles rich in images and videos. For my App, I felt this would be
appropriate because that is the goal of the App - to entice, invite and inspire the reader into joining initiatives.
Results/Analysis
The Example/Pre-created Initiative comments:
• The User was able to understand the layout of the sections - title, slug line, image.
• The User instinctually clicked on it and was taken to a light box mode with action icons at the bottom.
• The User was easily able to identify the icons - initiative members, follow, etc…
• The Join Initiative icon of a ‘link’ was misleading. The User thought it was a weblink.
• Better presentation - the screen doesn’t say anything about more content. So I pointed him to the progress indicator bar at the bottom.
• He said it wasn’t good at all because its like a magazine article. He said he wants to be able to interact with it immediately. It wasn’t clear that he could
click on it to access interaction.
The Home Screen:
• The User identified that the image was of an initiative.
• This is where I prodded the User to start an Initiative.
• After going through the compose flow we came back to the Home Screen.
• The User wanted to know how he could browse initiatives.
• I explained that he could swipe up. He didn’t like it very much because there was no exploratory or discovery component to the UX.
• If he is interested about poverty - how does he do that? He thought that the search feature wasn’t exciting at all. He would prefer there to be a collection
of stories. This feels like it’s a BBC site for news which wasn’t appropriate in this case - This launched into a discussion of the product.
Website link:
https://invis.io/MB4SL4KE8
16. 16
PRELIMINARY
USER TEST:
Male, 35, INDIA
TASK
Compose an initiative.
Website link:
https://invis.io/MB4SL4KE8
The Initiative:
• The User had no trouble finding the pen icon on the top right.
• The User clicked on the tabs but seemed a little lost. He then asked me if he should click on ‘Example’. I encouraged him to follow his intuition.
• When he clicked on the Title tab - I explained that I had pre-typed the title for him.
• After sometime I asked if he got how to compose an initiative. He said yes, but he didn’t like the interface at all because it doesn’t immediately occur to the
user that the Title bar is clickable and editable. At this point he asked if he could launch into a critique - I said, sure:
(Blue Sky) He said he wouldn’t organize the screen like this. He would like this to be a wizard instead of listing it out. This would allow the user to take different paths. For
instance, start with ‘What is your initiative about’ and have a text area and a ‘Done’ button.
The words Subheading, subheading, subheading is too confusing. Even if it is arranged like this, you could have it getting built or a progress bar because every initiative
is going to be different. What if there is no image, what if there is a video? So it should be: What is your initiative about? Would you like to add an Image? Challenges
Faced?
I don’t know what ‘Case Study of Asha’ is. The User didn’t get what the suggested subheadings meant. When I pointed the ‘eg.’ text preceding it, he said it wasn’t clear at
all.
User was also confused about navigating between the sections. Intuitively he didn’t get that he was meant to tap on the bars to get out of them.
At this point I jumped in to explain what I was going for (The Clear app method of organizing lists) to see if it came through. That I wanted to make it easy for the User to
organize sections in his initiative. He said that what I described and what he sees in the UX don’t match. The current screen is a CMS and that as a User, he is not con-
cerned with what a heading/subheading is. This information should be hidden from him. Assuming every section has a Title, Body and Image, it should simply add one
component with three options and the User would add whatever he likes.
User also wondered about collaboration? How do I invite people or how do I spread the word?
He called this mode his initiative management screen. So there should be three basic actions: Add and Invite.
Since a name is already provided why ask for a name to save the initiative?
Analysis:
The User made some great points about the compose feature which brings me back to the drawing board about what the site is about. Is it just a news app type of product
that is a collection of great initiatives being taken in the community or can Users participate in it? And to what extent?
The compose section should indeed be an initiative management system that should be more intuitive in adding sections. Maybe have a wizard for compulsory elements
like ‘Name of the Initiative’ and ‘Why take the initiative’?. Other sections like milestone/events etc… can be elements that a User can add voluntarily.
The discovery and exploratory comments were great insights. Have a more explicit search feature. Or instead of search say ‘explore’.
The User also brought up other questions that need to be addressed:
• How would you solve the problem of duplicate initiatives? What if the User creates an Initiative that already exists?
• Sharing of Initiatives? How does the User spread the word or invite people to participate in them?
• The User thought that the Example element was redundant.
• The User thought that the first call to action should be to Sign Up.
17. Test 1: https://youtu.be/tkEn27zxfZI
Test 2: https://youtu.be/0o4hGb1T5_8
Test 3: https://youtu.be/5KBUBsH6Gxk
USERTESTVIDEOS
Link tested:
https://invis.io/4G56GD27Z
USER TESTING.COM
17
18. DEMOGRAPHICS REQUESTED: Participants Using Smartphones
Age: 18–65+
Income: $0K–$150K+
Gender: Any
Country: United States, India
Operating Systems: iOS
Social Network: Any
USER MINDSET:
Users should have a general interest in social causes
and helping the community.
TASK:
Join the Initiative, “Clean Mumbai”.
For the Sign Up form, tap on the first name field to fill out the rest of the form.
Choose ‘Education’ as your expertise.
USERTESTANALYSIS
PLAN:
18
19. 19
Goal: To Join Initiative, ‘Clean Mumbai’.
I wanted to test a User’s attempt to browse the App (with its limited initiatives) and attempt at joining an initiative without actually Signing Up first. The User would then be
prompted to Sign Up where in the User would go through the Sign Up process till he/she receives a ‘Join request sent’ confirmation.
Most users do not sign up immediately and need more to ‘be sold’. In this case the ‘Clean Mumbai’ initiative would compel the user to be a part of it and hence require Sign-
ing Up.
Methodology: The User was given the above Task with instructions and overall questions answered by the User below in Behavior.
Behavior:
Given the task, the User’s immediate impulse was to hit the Sign Up button of course to no avail. After a few times, the User tapped on the link below: ‘Find out what our
members do’.
Here, I did not provide the User with information about how they would find the ‘Clean Mumbai’ Initiative. The User tapped on Social cause but because of the Invision high-
lights, she ended up tapping on Environmental.
On this page, I provided a link to Sign Up and Join. But the initiative was not Clean Mumbai. The User again tapped on Sign Up to no avail. She tapped on Join but be-
cause I had allotted a swipe gesture to a fairly large area, the User unintentionally landed on the Clean Mumbai initiative.
On this page, after one or two attempts of tapping the Sign Up link, she eventually tapped on ‘Join’.
From here it was simple till the location page, where she tapped on the zip code field (I should have provided an instruction to click on the geotab icon) before tapping on
the right icon.
She eventually completed the process and said it was fairly ‘simple’ so far - music to my ears.
Verbal Questions I had for her:
Q. Would the User sign up if this was not a test?
A. She would not because there was nothing that emotionally hooked her to our site. She needed more information to feel powerful about the site.
Q. Does this company look reliable (one of my descriptive words for my app)?
A. She did not. The app doesn’t look very organized. It looked amateurish. Not someone who’d taken the time to put something together for a good cause.
Other questions:
What frustrated you most about this site?
I think the site didn’t give me clear directions... but I figured it out.
If you had a magic wand, how would you improve this site?
I would definitely provide a little more info on the causes in order to establish an emotional connection.
What did you like about the site?
I liked the different areas listed very neatly where I can donate in terms of services.
How likely are you to recommend this site to a friend or colleague (0=Not at all likely, and 10=Very Likely)?
1
USER 1:
Female, 41, USA
TASK
Join the Initiative,
“Clean Mumbai”.
For the Sign Up form,
tap on the first name
field to fill out the rest
of the form.
Choose ‘Education’ as
your expertise.
20. 20
USER 2:
Male, 62, USA
Goal: Same as User 1
Behavior:
User 2 like User 1 immediately tapped on Sign Up to complete the Join task (drawing attention to the hopelessly unclear task I’d written down). He tried this for a good few
seconds, even turning off his ‘Do not disturb’ function because he thought that might have something to do with it.
Accidentally, he taps on the tappable target, which brings him to the Initiatives page. Here again he tries to tap the Sign Up link.
The User was really lost and not sure how to proceed. The instruction to tap on the first name field was throwing him off (I should have specified where in the task he would
be asked to Sign Up).
The User eventually got to the next page ‘somehow’ and still tried to Sign Up, even though there was a ‘Join’ button on the top right corner of the initiative.
The User then swiped left and was brought to the Sign Up page!
This User also impulsively clicked on the Zip Code field and from then on it was fairly smooth except for a few ‘tapping’ issues (not sure if I should reconsider the tap targets
or if it’s an Invision thing)
Verbal Questions I had for him:
Q. Would the User sign up if this was not a test?
A. No, given the problems he had signing up. It was not very straightforward.
Q. Does this company look reliable (one of my descriptive words for my app)?
A. Again with the number of problems he had, he would not.
Other Questions:
What frustrated you most about this site?
Most of the time, when I tapped on something, it did not work. For example, tapping on “Sign up” on the first screen did not work.
If you had a magic wand, how would you improve this site?
I would first be sure that each button worked. The “Sign Up” button on page one, as well as the “Sign Up” link on other pages did not work on my iPhone 6.
What did you like about the site?
I like that it is dedicated to social causes. I also like how easy it is for visitors to indicate their areas of expertise.
How likely are you to recommend this site to a friend or colleague (0=Not at all likely, and 10=Very Likely)?
5
TASK
Join the Initiative,
“Clean Mumbai”.
For the Sign Up form,
tap on the first name
field to fill out the rest
of the form.
Choose ‘Education’ as
your expertise.
21. 21
USER 3:
Female, 59, USA
Technical issues were reported ow-
ing to the not clickable areas… so
the test was not completed.
At this point, I took the opportunity to
revise my Task.
TASK
1. After the app launches, browse
Environmental Initiatives.
2. Join the Initiative, “Clean Mumbai”
3. Follow the prompt to Sign Up (tap-
ping on the first name field will fill out
the rest of the form).
4. Choose ‘Allow us to access your
location’.
5. Choose Education as your Exper-
tise.
MINDSET
Please remember these are wire-
frames and not the final prototype.
Users should have a general inter-
est in social causes and helping the
community.
POST TEST QUESTIONS
1. What frustrated you most about
this flow?
2. If you had a magic wand, how
would you improve this flow?
3. Was this flow fairly intuitive and
simple?
4. How do you feel about the lan-
guage in the copy used?
I decided not to ask the reliability
question during the wireframe stage.
I feel things like ‘emotional connec-
tivity’ etc. come into play when I have
an actual prototype ready.
Goal: Same as User 1
Behavior:
After a little hesitation, the User did end up tapping on the intended target. She took up some time to connect Browse with See the work our members do…
The User effortlessly tapped on Environmental.
The User kept scrolling to the side intending to ‘browse’. I only had two initiatives altogether so she ended up scrolling to the next steps… which threw her off a bit.
On the ‘Clean Mumbai’ page, she wasn’t able to see anything that would allow her to Join. Which was interesting because there was a Bold ‘Join’ link on the top right cor-
ner. Again she kept swiping to the right.
She then ended up back on the Sanitary Napkins page. She was really confused and said ‘I’m not really seeing anything…’ never completing what she was looking for…
The thing that threw her was the name of another initiative called ‘Sanitary Napkins’. She thought we had mistakenly named it as having something to do with Clean Mum-
bai and making it a sanitary city. But she didn’t read the tag line that said - a revolution.
The Sanitary Napkins initiative was supposed to be about how a person invented a revolutionary type of napkin but the user said it sounded grosse and wanted us to con-
sider renaming it.
And then she taps Join, very naturally, and not by accident and continues with the rest of her task.
The User did not complete the task through to the end thinking that the last instruction on the sheet was the last step.
User’s final comments: navigation was intuitive but the name Sanitary napkin had a negative vibe and we should change it.
Other Questions:
What frustrated you most about this flow?
after selectin initiatives and then Environmental, I did not see a list of initiatives. The tiles are not a problem but they did not tell me much and the first title in the list threw
me at first because of the name. It was intuitive to swipe to see all of the initiatives but at first I thought the first two were basically referring to the same effort. But based on
the followers I realized that they were each a separate initiative. So basically what frustrated me at first was not easily knowing exactly what I was looking at as far as the
individual initiatives and what they wre exactly. Beyind that the navif=gation was very easy and flowed much smoother.
If you had a magic wand, how would you improve this flow?
After selecting and initative, if tiles are being used, I would fill it with a picture of the work being done and a more descriptive intro. For some reason I also fid it more com-
fortable to scroll up and down vs side to side.
Was this flow fairly intuitive and simple?
Navigation wise yes. I knew how to move around the and get where I wanted to go.
How do you feel about the language in the copy used?
I mentioned this in the video, but when I first saw the title “sanitary napkin” I took a step back and questioned the reason for using such a label. I can see how the term can
be used here in a positive conotation but it has a second meaning which may make some people uncomfortable.
22. 1. The biggest lesson to be learnt is the specificity of the task. But in saying that, I was also ap-
prehensive about telling the User too much because you lose out on how a User would im-
pulsively behave. In this case Joining immediately meant Signing Up.
2. I also did not provide the User with enough of a browsing experience. I should have had
more tiles and navigating between different initiatives and within initiative needs to be clari-
fied.
3. I agree with User 1 comments about Emotional connect but I wonder how one would do that
at the wireframe stage or if it is indeed possible. This brings us back to the Delight quotient
going deeper than UI. Do I need to terribly sweat over this at this stage? Or do I let my sto-
ries provide the emotional connect?
4. I disagree with User 3’s suggestion of changing the Sanitary napkin title but this should be
confirmed with more user testing.
5. I wonder if a lot of the problems mentioned above have to do with an unclear task and an un-
der developed flow instead of UX issues specifically…
USERTESTANALYSIS
Results:
22
23. ANALYTICSMEASUREMENT
1. Sign Up: how many users are actually signing up.
2. Initiatives Viewed per user.
3. Create Initiative. How many people follow through
with the steps involved in creating an initiative?
Three important
analytics measure-
ments that should
be assessed once
people start using
the App:
Others: Join Initiative, Follow Initiatiave, Share intiatives, Abandoned initiatives
23
24. A B
A/BTESTING
Since storytelling is
key, how do Users
find initiatives? Ex-
ploring of Initiatives
would be an area
I would like to do
some A/B testing in.
Would it be better to
provide the User with
a range of option to
scroll through
or
present it, one ini-
tiative at a time, like
Kickstarter does it.
24
25. Android AppiPhone App iPad App
DIFFERENTPLATFORMS
Explore Page:
The wireframes here repre-
sent how the Explore page
will appear in the Good
Samaritan App on different
platforms.
25
27. PAGESTATES
Upon selecting Article we have three
fields:
1. Image/Video
2. Caption or Title for it.
3. A brief description for it.
The page title on the header tells the
User that an article component is
chosen.
Cancel button takes the User out of
that component back to the Initiative
Management Screen.
Done button is unavailable because
the User hasn’t added any informa-
tion.
Empty Field
Here a video has been uploaded as
the User enters the Title mode.
Tapping inside the Caption field will
pop up the keyboard.
The Title field will also appear slight-
ly transparent to remind the User
that he is in a modal view.
Cancel button will Cancel him out
of the Title mode, preserving the
uploaded image/video.
Done button will automatically take
him into the Description mode.
Add Caption
The keyboard is already visible as
the User is made ready to type.
The Title field is slightly dimmed out
to focus all the User’s attention on
typing the Description.
Cancel button will Cancel him out
of the Description mode, preserving
the uploaded image/video and its
title.
Done button will take him to an
ideal state of fully filled fields.
Add Description
Article?
or
Event? Article
Add
Component
to
Initiative
Compose Initiative:
Ideal State Flow
An Ideal State of an initia-
tive will have just the right
amount of information to
me engaging and visually
succinct.
27
28. Compose Initiative:
Ideal State Flow
An Ideal State of an initia-
tive will have just the right
amount of information to
me engaging and visually
succinct.
PAGESTATES
The Ideal State: Here, not only
are all the fields duly filled, but the
amount of text is enough to appear
concisely.
The Title of the article nicely fits
inside the header.
The Video Icon under the Done
button tells the User that he has
uploaded a video. The Edit button
takes him back to his photostream.
Cancel button will take the User
back to the Initiative Management
Screen.
Done button will save the compo-
nent.
All fields are filled
The Ideal State:
Here, the title is short enough to fit
within the page width.
And the description is short enough
to appear fully and readable at one
glance. Done button will save the
component.
The Uploaded Video will play upon
launch. The audio button is set on
mute by default.
The Join button is a call to action
and appears in the center.
The cross will cancel the User out of
the View mode.
View
This page displays all the compo-
nents inside the Initiative. The cur-
rent Initiative, also titled Sanitary
Pad Man, has only one component.
The Video Icon on the top right tells
us it’s a video.
The delete and edit buttons are
found under that component. Users
tap on the component to view it.
As the number of components in-
crease, a User can search for them
(the Search Icon in the footer)
Users add more components by
tapping the + button
The Publish button is unavailble
because the User needs more than
one component to publish an initia-
tive.
Inside the Initiative Management
28
29. Compose Initiative:
Typical State Flow
A Typical State of an initia-
tive will have a little more
than the right amount of
information. It is general-
ly difficult for Users to be
succinct especially when
writing about subjects that
they’re passionate about.
At the same time, given
that mobile keypads are not
conducive to typing essays
or large amounts of infor-
mation, we can, maybe,
assume that information
would be manageable.
PAGESTATES
The Typical State: Here, informa-
tion in the description field overflows
from the visible space.
The Title however still nicely fits
inside the header.
All fields are filled
The Typical State:
Here, again, the title is short enough
to fit within the page width.
However the description spills over
as indicated by the ellipsis.
All component titles start at the
same position.The text has not
been pulled up to make room for the
hidden text so as not to disturb the
visual and for consistency.
Tapping on the description area,
will take us to the description page
where the reader can exclusively
read the description text.
View
The Typical State:
Here, the text is pulled up so all the
information nicely fits on one screen.
In a typical state, the description
is long not to fit on the front page,
but short enough to fit when viewed
exclusively.
The cross will cancel the User out of
the Description View mode.
Description View
Same as Ideal State
Inside the Initiative Management
29
30. Compose Initiative:
Empty State Flow
An Empty State will have
the minimum required in-
formation to make a valid
initiative component but not
exciting enough to engage
a User.
PAGESTATES
The Empty State: For an article to
be a valid component, the title field
is compulsory. The User can choose
between the image/video or descrip-
tion.
Displayed above, is the barest infor-
mation that a User is likely to enter
to make a valid component.
All fields are filled
The Empty State:
No image/video with limited de-
scription - the least effective way to
engage readers.
View
Since no video/image has been up-
loaded the thumbnail appears blank.
Inside the Initiative Management
30
31. Compose Initiative:
Fully Loaded State
Flow
A Fully Loaded State will
have: a long title that can-
not fit on one line and a
heavy description that
requires a User to scroll,
even in the Description
View mode.
PAGESTATES
Here, information in the title field
overflows onto the second line.
Long title in Title Field
Here, the title is too long to fit com-
fortably inside the thumbnail, hence
requires an ellipsis.
View
Here, information is spilling over
everywhere:
1. The title requires two lines.
2. Consequently, the title in the
header has no room and requires an
ellipsis.
3. The content in the description
field spills over into the hidden ar-
eas.
Filled out fields
31
32. Fully Loaded State:
Here, both the title and the descrip-
tion cannot fit onto a single page
and are followed by an ellipsis to
retain the visual integrity of the UI.
View
Fully Loaded State:
Here, the quantity of textual content
is so large that a User is required
to scroll up and down to access its
entirety.
The title (unideal) also is broken up
into three lines with a hyphen, mak-
ing it visually unpleasing.
Description View
Compose Initiative:
Fully Loaded State
Flow
A Fully Loaded State will
have: a long title that can-
not fit on one line and a
heavy description that
requires a User to scroll,
even in the Description
View mode.
PAGESTATES
32
33. NEXTSTEPS
1. Creating Stories: Dig deep into how users tell
stories. And what readers find fascinating.
User feedback:
2. Wireframe the remainder of the App:
Profile Page
Search: search categories, filters, etc...
Notifications
3. Joining/Managing Initiatives:
How would it work, behind the scenes?
Who gets to create intiatives? More than one
member?
Deleting existing intiatives?
I would definitely provide a little more info on the caus-
es in order to establish an emotional connection.
33
