DavidCoffield_Portfolio_LMB_Final
1
www.davidcoffield.com Lunch Money Buddy is a fictitious app that allows any user to view the lunch menu from his or her child’s school, set up and save account information, and send funds digitally to pay for their child’s lunches. SAMANTHA, 37 HR Manager, Employee Relations JORGE, 34 Marketing Communications Representative PARENTS OF HAILEE 12, BRENDEN 8 EMPLOYMENT USE OF TECHNOLOGY ADOPTION OF MOBILE MOST COMMONLY USED DEVICE UNEMPLOYED PART-TIME FULL-TIME RETIRED NOVICE INTERMEDIATE ADVANCED EXPERT NONE SOME GREAT DESKTOP LAPTOP TABLET MOBILE HENRY, 70 Sales Manager, Retired GRANDFATHER, GUARDIAN OF JOE, 14 EMPLOYMENT USE OF TECHNOLOGY ADOPTION OF MOBILE MOST COMMONLY USED DEVICE UNEMPLOYED PART-TIME FULL-TIME RETIRED NOVICE INTERMEDIATE ADVANCED EXPERT NONE SOME GREAT DESKTOP LAPTOP TABLET MOBILE After recieving feedback on my wireframe sketches, I began designing the final hi-fi prototype using proto.io. Learning a new program is never an easy task, but proto.io made creating high fidelity prototypes as simple as possible. First, I designed the Login and Sign Up screens. Those two screen set the tone for the rest of the app. Once I got settled in with proto.io , the next three screen were the most crucial because they are the bulk of the app: homepage, accounts and calendar. All three screens needed to reflect the desires of our target perso- nas while maintaining functionality and accessibility. Both personas told stories of people wanting ease-of-use and a multi-functional app, so I kept that in the back of my mind as I finalized Lunch Money Buddy. User Journey Map: Removing All Remaining Funds & Delete Lunch Money Buddy Account THE STORY . HENRY, 70 Sales Manager, Retired Devices: Smartphone, eReader & a desktop at home. JOE, 14 Devices: Smartphone & Laptop. It’s the end of the school year for Joe, which means after summer, he will be a freshman at St. James High School. Henry already heard from parents that the high school doesn’t use or accept Lunch Money Buddy. Henry wants to move any remaining funds from Joe’s account back onto his debit card. Once the money has been transfered over, he will delete his beloved Lunch Money app. Although, he will be pushing to impliment it at the high school PTA meetings, he will just have to wait to see if they choose to adopt it or not. I think I know where to go. Determined. Savvy. Sadness. Thoughts & Feelings Satisfied Happy Disappointed Sad Stages of the Journey Activities PROFILE MANAGEMENT TRANSFER FUNDS DELETING LUNCH MONEY BUDDY SAYING GOODBYE While on the home screen, Henry chooses Profile Management on the top right corner of the app. Henry selects Accounts. While in Accounts, Henry chooses to Transfer Funds. He selects Joe’s remaining balance of $34. 32 to be moved onto his debit card with the last four numbers of 9967. Henry confirms the transfer, and Joe has a remaining balance of zero. Henry proceeds to the home screen, and navigates through Profile Management until he sees Delete Lunch Money Buddy Account at the bottom of the options. Henry already balanced out his account, if he didn’t Lunch Money Buddy would pop up a warning message stating that the user must transfer any remaining balances before deleting an account. Henry confirms that he does, in fact, want to close his Lunch Money Buddy account for good. The app informs the user that it is sad to seem them go, but they understand children grow up so fast! Henry for the first time in a long time is greeted with the login screen and a welcome message from Lunch Money Buddy. Slightly Confused. Sentimental. I have never transfer funds back into my account before. I’m going to have to take a minute to figure this out. All I had to do was slide my finger over to the full amount and confirm to transfer the funds over. That’s simple enough. I have no idea how to delete my account. I’ll go where I always go. Lucky I already transfer the funds over. I love when I do things right the first time. I cannot believe Joe will be in high school. I’m curious on how the high school subsidizes the meal plans. I’m going to miss you buddy. I’m going to try and convince the high school to use Lunch Money Buddy. Sign Up Specific Date Sync 3rd Party App Monthly View Lunch Menu Favorite Meals Calendar Add Money Subtract Money Add Buddy Edit Name & Grade Add Image Search School Code Account Balances Buddies Help & Support Log Out Subsidy Status Edit Profile Alert Options Settings Change Password Close Account Profile Management Accounts Edit Accounts New Account Primary Account Auto-Replenish On/Off Delete Account Change Accountt Lunch Money Buddy: Sitemap Main Screen/Section Content Available Within Main Screen/Section More Details Contained On Specific Screen The Problem Lunch Money Buddy is seeking to corner the market as the one-stop app for any- thing a parent or guardian could possibly need to manage their children’s school lunches. After conducting LMB’s market and potential user research, the client provided me with a detail application specification report of what features should be included in the app, and included in that report were two personas to help guide my design process and ensure the project stays focused on the target au- dience and their needs. From this point further, my objectives are to sketch and build a hi-fi prototype of Lunch Money Buddy , and thoroughly test the app for any issues and/or problems so the client can get the app out to the market and into the hands of parents all over the world. The first approach to developing Lunch Money Buddy is to utilize each persona’s unique characteristics and desires to create specific user journey maps that would include some basic workflows of the app. My goals for each user journey map were to include an easy-to-follow linear timeline with as much information needed for the persona to complete the task and to capture their pain points and admirations along the way. The second approach for developing Lunch Money Buddy was to establish flow and navigation within the app. By taking the workflows and the personas’ actions presented in the user jour- ney maps, I was able to determine the hierarchy and layout of each individual screen and its information. In order to construct a site map that I would be happy about, I used the technique of card sorting. This kept similar information together and categorized sections of the app to simplify the site map as a whole. The picture to the right is the initial card sorting using Post-It notes, and below is the final sitemap that I used as the blueprint for the rest of the development of LMB. MEET THE PERSONAS USER JOURNEY MAPS SITE MAPS https://davidcoffield.proto.io/share/?id=638baff4-2759-4657-91f0-3d08596cec89&v=5 THE LESSONS I LEARNED The Actions The Results Once the foundation had been established, it was now time to begin sketching out the wireframes. I started with quick sketches to free up my creativity and to really nail down the overall functionality, navigation and basic aesthetics of Lunch Money Buddy . Working through some of the nuances, I laid out both a portrait and landscape version of the app using Marvel. Marvel allowed me to upload and link individu- ally drawn screens together and set up simple early usability tests with fellow de- velopers. This allowed for better clarification of some of the key features and helped with any navigational issues that would have taken more time in the later development stages of the app. User Journey Map: Signing Up & Adding a Child SAMANTHA, 37 HR Manager, Employee Relations Devices: Smartphone, tablet, and desktop computer at work. THE STORY . Jorge, 34 Marketing Communications Representative Devices: Smartphone, personal laptop computer and desktop at work. Children: Hailee, 12 and Brenden, 8 After a long, draining day at the office, Samantha picked her children, Hailee and Brenden, up from school. They opened the van door and instantly complain that they are starving. Samantha doesn’t understand why her children are starving when she packed their lunches in the morning. Hailee informs her that Dad (Jorge) had been rushing them to get out of the house so he wouldn’t be late that they forgot their lunches on the counter. Hailee tells her mom that a friend bought some food in the cafeteria using an app called Lunch Money Buddy. She continues to explains what she knows about the app and mentions that most of the kids in her class use it on their smartphones instead of carrying around money all day. After a scornful dinner, Samantha and Jorge search for Lunch Money Buddy in the app store. This will be perfect for our busy schedules. I cannot wait to see what the school has planned for my kids. I hope this app’s easy to learn. I might want to write the login and password down. Another app to figure out... Oh no, we got to get the school code. Thank God they added the find button. This is too easy. Better use my email - it’s easy to remember. This is a simple sign up. I’m not really sure what to do. What is a school code? How am I suppose to find it?!? Now, that both kids are entered in, let’s see what else we can do. I’m not sure how I feel about trusting this app with my money. Is it secure? At least there are familar icons. Thoughts & Feelings Satisfied Happy Disappointed Sad Stages of the Journey Activities DISCOVERY SIGNING UP ADDING A CHILD COMPLETION Jorge’s Emotions Samantha’s Emotions Samantha downloads Lunch Money Buddy on her smartphone. They sign up using Jorge’s email address and select a password. They are greeted with the home screen. They notice an Add Child Button. Once selected, the app prompts them for information regarding the child: Name Grade School Code After entering in Hailee and her grade, they are unsure of the school code. So instinctly, they use the Find School Code button and search for her elementary school by zip code or state and then searching through the list of schools. They confirm the correct school, and are taken back to the home screen with Hailee’s information now available. From here, the repeat the process to add Brenden. Both children’s informa- tion are available on the home screen. They notice they can add an image for each child and upload their favorite image from the phone’s photo gallery. Now, they are ready to begin adding funds for school lunches. This is pretty simple. I can see why the parents are using this app. Both kids are entered in! Anxious Confused Excitement https://marvelapp.com/333144e https://marvelapp.com/32h9d6j Portrait Landscape The Final Result I learned four valuable lessons while working on Lunch Money Buddy. The secrets for building a successful product are understanding your audience and the product, building a solid foundation and lastly, never lose sight of what it is you’re trying to accomplish. Don’t try to reinvent the wheel! Build and learn from what is out there already. If you don’t feel it works right, try to make it better. Keep it simple. Design simple at first and then branch off, if necessary, but don’t overcompensate design for functionality. There has never been a prefect product on the first go-around, and most issues and concerns can be caught and fixed with adequate design, testing of those designs and just enough time to get it right. But, that’s easier said than done!
-
Upload
david-coffield -
Category
Documents
-
view
25 -
download
0
Transcript of DavidCoffield_Portfolio_LMB_Final
www.davidcoffield.com
Lunch Money Buddy is a fictitious app that allows any user to view the lunch menu from his or her child’s school, set up and save account information, and send funds digitally
to pay for their child’s lunches.
SAMANTHA, 37 HR Manager, Employee Relations
JORGE, 34Marketing Communications Representative
PARENTS OF HAILEE 12, BRENDEN 8
E M P L OY M E N T
U S E O F T E C H N O L O G Y
A D O P T I O N O F M O B I L E
M O S T C O M M O N LY U S E D D E V I C E
UNEMPLOYED PART-TIME FULL-TIME RETIRED
NOVICE INTERMEDIATE ADVANCED EXPERT
NONE SOME GREAT
DESKTOP LAPTOP TABLET MOBILE
HENRY, 70Sales Manager, Retired
GRANDFATHER, GUARDIAN OF JOE, 14
E M P L OY M E N T
U S E O F T E C H N O L O G Y
A D O P T I O N O F M O B I L E
M O S T C O M M O N LY U S E D D E V I C E
UNEMPLOYED PART-TIME FULL-TIME RETIRED
NOVICE INTERMEDIATE ADVANCED EXPERT
NONE SOME GREAT
DESKTOP LAPTOP TABLET MOBILE
After recieving feedback on my wireframe sketches, I began designing the final hi-fi prototype using proto.io. Learning a new program is never an easy task, but proto.io made creating high fidelity prototypes as simple as possible.
First, I designed the Login and Sign Up screens. Those two screen set the tone for the rest of the app. Once I got settled in with proto.io, the next three screen were the most crucial because they are the bulk of the app: homepage, accounts and calendar. All three screens needed to reflect the desires of our target perso-nas while maintaining functionality and accessibility. Both personas told stories of people wanting ease-of-use and a multi-functional app, so I kept that in the back of my mind as I finalized Lunch Money Buddy.
User Journey Map: Removing All Remaining Funds & Delete Lunch Money Buddy Account
THE STORY.
HENRY, 70Sales Manager, RetiredDevices: Smartphone, eReader& a desktop at home.
JOE, 14Devices: Smartphone & Laptop.
It’s the end of the school year for Joe, which means after summer, he will be a freshman at St. James High School. Henry already heard from parents that the high school doesn’t use or accept Lunch Money Buddy.
Henry wants to move any remaining funds from Joe’s account back onto his debit card. Once the money has been transfered over, he will delete his beloved Lunch Money app. Although, he will be pushing to impliment it at the high school PTA meetings, he will just have to wait to see if they choose to adopt it or not.
I thin
k I kn
ow w
here
to go
.
Deter
mine
d.
Savv
y.
Sadn
ess.
Thoughts& Feelings
SatisfiedHappy
DisappointedSad
Stages of the Journey
Activities
PROFILE MANAGEMENT TRANSFER FUNDS DELETING LUNCH MONEY BUDDY SAYING GOODBYE
While on the home screen, Henry chooses Profile Management on the top right corner of the app. Henry selects Accounts.
While in Accounts, Henry chooses to Transfer Funds. He selects Joe’s remaining balance of $34. 32 to be moved onto his debit card with the last four numbers of 9967.
Henry confirms the transfer, and Joe has a remaining balance of zero. Henry proceeds to the home screen, and navigates through Profile Management until he sees Delete Lunch Money Buddy Account at the bottom of the options.
Henry already balanced out his account, if he didn’t Lunch Money Buddy would pop up a warning message stating that the user must transfer any remaining balances before deleting an account.
Henry confirms that he does, in fact, want to close his Lunch Money Buddy account for good. The app informs the user that it is sad to seem them go, but they understand children grow up so fast!
Henry for the first time in a long time is greeted with the login screen and a welcome message from Lunch Money Buddy.
Sligh
tly C
onfus
ed.
Sent
imen
tal.
I hav
e nev
er tr
ansfe
r fun
ds b
ack i
nto
my a
ccoun
t bef
ore.
I’m go
ing to
hav
e to
take
a m
inute
to fi
gure
this
out.
All I h
ad to
do
was sl
ide m
y fing
er o
ver t
o th
e
full a
moun
t and
conf
irm to
tran
sfer t
he fu
nds
over
. Tha
t’s si
mpl
e eno
ugh.
I hav
e no
idea h
ow to
dele
te m
y acc
ount.
I’ll g
o whe
re I
alway
s go.
Luck
y I al
read
y tra
nsfe
r the
fund
s ove
r.
I love
whe
n I d
o th
ings r
ight t
he fi
rst t
ime.
I can
not b
eliev
e Joe w
ill be
in hi
gh sc
hool.
I’m cu
rious
on h
ow th
e high
scho
ol sub
sidize
s
the m
eal p
lans.
I’m go
ing to
miss
you b
uddy
.
I’m go
ing to
try a
nd co
nvinc
e the
high
scho
ol to
use L
unch
Mone
y Bud
dy.
Sign Up
Specific Date
Sync 3rd Party App
Monthly View
Lunch Menu
Favorite Meals
Calendar
Add Money
Subtract Money
Add Buddy
Edit Name & Grade
Add Image
Search School Code
Account Balances
Buddies
Help & Support
Log Out
Subsidy Status
Edit Profile
Alert Options
Settings
Change Password
Close Account
Profile ManagementAccounts
Edit Accounts
New Account
Primary Account
Auto-Replenish On/Off
Delete Account
Change Accountt
Lunch Money Buddy: SitemapMain Screen/Section
Content Available Within Main Screen/Section
More Details Contained On Specific Screen
The Problem
Lunch Money Buddy is seeking to corner the market as the one-stop app for any-thing a parent or guardian could possibly need to manage their children’s school lunches.
After conducting LMB’s market and potential user research, the client provided me with a detail application specification report of what features should be included in the app, and included in that report were two personas to help guide my design process and ensure the project stays focused on the target au-dience and their needs.
From this point further, my objectives are to sketch and build a hi-fi prototype of Lunch Money Buddy, and thoroughly test the app for any issues and/or problems so the client can get the app out to the market and into the hands of parents all over the world.
The first approach to developing Lunch Money Buddy is to utilize each persona’s unique characteristics and desires to create specific user journey maps that would include some basic workflows of the app.
My goals for each user journey map were to include an easy-to-follow linear timeline with as much information needed for the persona to complete the task and to capture their pain points and admirations along the way.
The second approach for developing Lunch Money Buddy was to establish flow and navigation within the app. By taking the workflows and the personas’ actions presented in the user jour-ney maps, I was able to determine the hierarchy and layout of each individual screen and its information.
In order to construct a site map that I would be happy about, I used the technique of card sorting. This kept similar information together and categorized sections of the app to simplify the site map as a whole. The picture to the right is the initial card sorting using Post-It notes, and below is the final sitemap that I used as the blueprint for the rest of the development of LMB.
MEET THE PERSONAS
USER JOURNEY MAPS
SITE MAPS
https://davidcoffield.proto.io/share/?id=638baff4-2759-4657-91f0-3d08596cec89&v=5
THE LESSONS I LEARNED
The Actions
The Results
Once the foundation had been established, it was now time to begin sketching out the wireframes. I started with quick sketches to free up my creativity and to really nail down the overall functionality, navigation and basic aesthetics of Lunch Money Buddy.
Working through some of the nuances, I laid out both a portrait and landscape version of the app using Marvel. Marvel allowed me to upload and link individu-ally drawn screens together and set up simple early usability tests with fellow de-velopers. This allowed for better clarification of some of the key features and helped with any navigational issues that would have taken more time in the later development stages of the app.
User Journey Map: Signing Up & Adding a Child
SAMANTHA, 37HR Manager, Employee RelationsDevices: Smartphone, tablet, and desktop computer at work.
THE STORY.
Jorge, 34Marketing Communications RepresentativeDevices: Smartphone, personal laptop computer and desktop at work.
Children: Hailee, 12 and Brenden, 8
After a long, draining day at the office, Samantha picked her children, Hailee and Brenden, up from school. They opened the van door and instantly complain that they are starving. Samantha doesn’t understand why her children are starving when she packed their lunches in the morning.
Hailee informs her that Dad (Jorge) had been rushing them to get out of the house so he wouldn’t be late that they forgot their lunches on the counter. Hailee tells her mom that a friend bought some food in the cafeteria using an app called Lunch Money Buddy. She continues to explains what she knows about the app and mentions that most of the kids in her class use it on their smartphones instead of carrying around money all day.
After a scornful dinner, Samantha and Jorge search for Lunch Money Buddy in the app store.
This w
ill be
per
fect f
or
our b
usy s
ched
ules.
I can
not w
ait to
see w
hat t
he
scho
ol has
plan
ned f
or my k
ids.
I hope
this
app’s
easy
to le
arn.
I migh
t wan
t to
write t
he lo
gin an
d
pass
word d
own.
Anoth
er ap
p to
figur
e out
...
Oh n
o, we g
ot to
get t
he sc
hool c
ode.
Thank
God t
hey a
dded
the f
ind b
utto
n.
This is
too
easy
.
Bette
r use
my e
- it’
s eas
y to
rem
embe
r.
This is
a sim
ple si
gn up
.
I’m no
t rea
lly su
re w
hat t
o do
.
Wha
t is a
scho
ol code
? How
am I
supp
ose
to fi
nd it
?!?
Now, t
hat b
oth ki
ds ar
e ent
ered
in, le
t’s
see w
hat e
lse w
e can
do.
I’m no
t sur
e how
I fee
l abo
ut tr
ustin
g this
app w
ith m
y mone
y.
Is it
secu
re?
At lea
st th
ere a
re fa
mila
r ico
ns.
Thoughts& Feelings
SatisfiedHappy
DisappointedSad
Stages of the Journey
Activities
DISCOVERY SIGNING UP ADDING A CHILD COMPLETION
Jorge’s Emotions
Samantha’s Emotions
Samantha downloads Lunch Money Buddy on her smartphone.
They sign up using Jorge’s email address and select a password.
They are greeted with the home screen. They notice an Add Child Button. Once selected, the app prompts them for information regarding the child:
NameGrade
School Code
After entering in Hailee and her grade, they are unsure of the school code. So instinctly, they use the Find School Code button and search for her elementary school by zip code or state and then searching through the list of schools.
They confirm the correct school, and are taken back to the home screen with Hailee’s information now available. From here, the repeat the process to add Brenden.
Both children’s informa-tion are available on the home screen. They notice they can add an image for each child and upload their favorite image from the phone’s photo gallery. Now, they are ready to begin adding funds for school lunches.
This is
pre
tty si
mple
. I ca
n see
why
the p
aren
ts
are u
sing t
his ap
p.
Both ki
ds ar
e ent
ered
in!
Anxio
us
Confus
ed
Excite
men
t
https://marvelapp.com/333144e
https://marvelapp.com/32h9d6j
Portrait
Landscape
The Final Result
I learned four valuable lessons while working on Lunch Money Buddy.
The secrets for building a successful product are understanding your audience and the product, building a solid foundation and lastly, never lose sight of what it is you’re trying to accomplish.
Don’t try to reinvent the wheel! Build and learn from what is out there already. If you don’t feel it works right, try to make it better.
Keep it simple. Design simple at first and then branch off, if necessary, but don’t overcompensate design for functionality.
There has never been a prefect product on the first go-around, and most issues and concerns can be caught and fixed with adequate design, testing of those designs and just enough time to get it right. But, that’s easier said than done!
