FEEDING TRACKER MFA FINAL THESIS BOOK | MOBILE APPLICATION | 2015 FALL
TIANZI YUAN (03769733) WEB DESIGN & NEW MEDIA | ACADEMY OF ART UNIVERSITY
CONTE N T S
1
4
OVERVIEW
6
UX PROCESS
TECHNICAL PROCESS
Autobiography
02
Experience Map
30
Data Diagram
64
Statement of Interest
05
Content Map
32
Technology Used
66
Résumé
Elevator of Pitch
06 08
Thesis Abstract
2
03
Target Audiences
UX Testing Timeline Card Sorting
Low-fidelity Wireframes 1 Low-fidelity Wireframes 2
PROOF OF CONCEPT
Low-fidelity Wireframes 3
Concept Video
10
Information Architecture
12
Prototype Task 1
11 13 17
Task 2
19
Task 3
3
User Research
Competitive Analysis Matrix
26
Inspiration Products
23 27
43 45
UI Design Process Design Guideline Style Guide Assets
7
CONCLUSION
Thesis Process Conclusion
72
Bibliography
77
GDS Journal Highlights
50
Color Palette & Typography 22
41
Visual Inspiration 1
Logo/Identity
65
38
48
Moodboard 1
Open Source Specification
37
App Ideation
Visual Inspiration 2
Unique Position
33
UI PROCESS
Moodboard 2
S T R AT E G I C PROCESS
Competitive Analysis
5
31
49 51 52 53 54 55 59 60 61 62
73
AUTOBIOGRAPHY
My name is Tianzi, and my English name is Lena. I was born and raised in Canton, China. I am a graduate student at the Academy of Art University’s Web Design & New Media program. Prior to attending the Academy of Art University, I have 6 years of experience in Landscape Architecture. However, ever since I started studying UI/UX design as well as programming, I realized that I love this field much more than Landscape Architecture.
OVERVIEW
I have a passion for learning, designing and creating innovative products. Good design catches my eye and gives me inspiration. Meanwhile coding turns my designs into reality and thus the possibilities are endless.
1
2
RÉSUMÉ
EX P ER I EN CE
SK I L L S
TI BCO S o ft ware I nc.
L anguage s
U I D e signe r / / 6 . 2 0 1 5 – Pre se nt
HTML5 / / CSS3 / / JavaScript / / jQuery / / Web
and developers to create user-friendly mobile
/ / Cantonese
visual comps for multiple apps. Manage and create
S o ft ware
off to the development team.
InDesign / / After Effects / / Dreamweaver / / Muse / /
Collaborate with project stakeholders, UX designers and web applications. Design graphics, icons, and
LE NA YUAN (415) 601-9649
len ay u an 888@gmail.com www.lenay uan.com
production specifications and deliverables for hand
Sketch / / InVision / / Photoshop / / Illustrator / /
Sublime Text / / Microsoft Word / / Microsoft Excel
To o rid e L LC . Co -f o und e r & U I / U X D e signe r / / 11.2013–6/2015
Co-founded a tech start-up that seeks to disrupt
the tourism and sharing economy. Responsibilities include product design, research and conducting
user tests. The app has been launched in the App Store in April 2015.
ED U CAT I O N Acad e m y o f Art U niv e rsit y M ast e r o f Fine Art s in We b D e sign & N e w M e d ia / / 1 . 2 0 1 3 -Pre se nt Guangz ho u U niv e rsit y
C he e t ah M o b ile U I / U X I nt e rn / / 6 . 2 0 1 3 -6 . 2 0 1 4
Designed UI/UX for Cheetah Mobile’s Clean Master app as well as edited and polished UI components and created production style guides.
L E N AY U A N . C O M
3 3
Development / / Web Hosting / / English / / Mandarin
4
Bache lo r o f E ngine e ring in L and scap e Archit e ct ure / / 6 . 2 0 0 6 -7 . 2 0 1 0
S TAT E M E N T O F INTEREST
E L E VATO R OF PITCH
“
Technolo g y is s uppo s ed to m ake o ur liv es
It is recommend that mothers follow a regular feeding schedule for their baby and take notes during their baby’s feeding. However, the traditional pen and paper method of note taking is cumbersome, especially if you are caring your baby while feeding.
ea sier, allo w ing us to d o th ing s m o re quickly and effic iently.
”
The solution is Feeding Tracker, a web application optimized for iOS devices that can track a baby’s feeding schedule and amount. The app helps the user by easily taking notes, collecting feeding histories, and summarizing data. Thus, Feeding Tracker is a faster way to track and an easier way to analyze data on a baby’s feeding history.
James Surowiecki
Food is an important part of a baby’s development. However, babies cannot tell their mothers that they are hungry and how would a new mother know if her baby had enough to eat? For my thesis, I would like to explore and address this problem through Feeding Tracker, an app that will help mothers keep track of their baby’s feeding schedule as well as provide in depth information a baby’s feeding history.
5
6
THESIS ABSTRACT
P RO BLE MS
2. Bottle feeding (pumping & formula) Some mothers choose not to breast feed or they feel uncomfortable breast feeding in public. So they will feed their baby formula or pump their breast milk.
When raising a new born and infant, Doctors recommend parents to keep a feeding schedule and record the amount and type of food that their baby eats. However, keeping track of these notes via pen and paper can be inefficient. In addition, analyzing the data can be cumbersome as well.
1-3 month: 6-8 times/day (2-3 ounces) 3-4 month: 5-6 times/day (4+ ounces) 5-6 month: 4-5 times/day (6-8 ounces) 6+ month: 2½ ounces x baby weight (pound)/day
S O LU T IO NS The latest technology can help moms Today, a mother can use an app within her smartphone to record the feeding time, amount, and type. In addition, using the latest in data analysis technology, the app can provide summary to the mother on the daily, weekly, and monthly feeding situation for their baby.
3. Solid food When a baby reaches 4-6 months old, they are introduced to solid food. It is recommended to feed them one type of solid food for 3-5 day. And then change to another type of solid food. This way, a mother can find out if her baby has particular food allergies.
Feeding types 1. Breast feeding Depending on the baby’s age, a mother should feed her child at different times and for different lengths.
W H Y F EED I N G T R ACK ER ? Besides recording the feeding time, and amount. Feeding Tracker can analyse the feeding based on a baby’s age. At the same time, the app provides daily, weekly and monthly analysis of the baby’s feeding history. Thus, Feeding Tracker saves a mother’s time by helping her manage and organize her baby’s feeding.
1-3 month: 8-12 times/day (30-60 minutes) 3-4 month: 6-10 times/day (30-60 minutes) 5-6 month: 5-8 times/day (10+ minutes) 6+ month: 4-6 times/day (10+ minutes)
7
8
CONCEPT VIDEO
PROOF OF CONCEPT
9
VIDEO PLACE-HOLDER
10
I N F O R M AT I O N ARCHITECTURE
PROTOTYPE
EN T RY Login
Sign up
Create Profile
Home
Add Feeding
Analysis
Breast Milk
Bottle
Solid Food
Breast Milk
Bottle
Solid Food
Feeding Recorder
Feeding Recorder
Feeding Recorder
Day/Week/Month View
Day/Week/Month View
Day/Week/Month View
L E N AYUA N . CO M/ THE SIS Desktop and Laptop Please open the prototype in Chrome and follow the steps to view the prototype properly. Chrome -> Open the link -> Inspect element (right click) -> Click the phone button (top left) -> Device: Apple iPhone 6 ->Refresh the web link iPhone Open the prototype with a browser and add it to the home screen.
11
12
TA S K 1 STA RT U SIN G THE A P P & R E CO R D A FE E DING
OR
I tap sign up
type in email
tap on
tap done &
& password,
birthday
choose baby
tap sign up
Log i n
Login with Facebook or
enter your email and password to login
Si g n up
Don’t have an account?
Sign up here via Facebook or email
13
gender
Set u p Baby Profile 1
Enter the baby’s name and birthday.
Next choose their gender and upload a picture
Set u p Baby Profile 2
Enter the baby’s birthday via iOS’s date picker
The m e Co lo r Fo r Girl
The system auto sets up pink for a baby girl Add another baby if the mom has more
14
The m e Co lo r Fo r Bo y
The system auto sets up pink for a baby boy Add another baby if the mom has more
Hom e
tap the add
tap breast
button
milk button
The home screen shows data on 3 ways to feed: breast milk, bottle and solid food.
Record a Feedi ng
Record feeding by tapping the add button. Choose one of the feeding methods.
tap R button
tap SAVE button
Breast Milk Recorder A recorder pops up.
To record a Breast Feeding
Feed the baby with one of the user’s nipples and tap
the left/right button to record the feeding at the same
Re co rd S ho ws On Ho m e
The record will show up on the home screen
time. When done with the feeding, tap the pause button and save the record
15
16
TA S K 2 C H ECK T HE FE E DIN G HISTO RY & R ECO R D A N OTHE R FE E DING
I
Hom e
tap the add
tap the bottle
type-in the
tap and drag
tap the baby
button
button
amount
to move the
pic to edit/
cards
add profile
The home screen shows data on the last feeding session for the 3 feeding types.
Record a Feedi ng
Record a feeding by tapping the add button. Choose one of the feeding methods
17
Bott le Feedin g Recorder
This page shows the last feeding information.
Record the bottle feeding by typing in the amount.
Record Added O n H ome
The home screen is now updated with the recorded data.
M o v e t he card s
Reorganize the order of the cards by tapping and dragging a card.
18
S wit ch a Bab y / Ad d Ano t he r Bab y
Switch/add a baby by tapping the baby picture on the top left portion of the home screen
TA S K 3 CHE CK THE A N A LY SI S
I
A n alys i s - B rea st M i l k
tap the bottle
tap the solid
tap the W
tap the add
type in the
button
food button
button
button
food
The analysis screen shows the date and chart of each feeding method
A na l ys i s - B ottl e
Check the bottle feeding analysis
19
An aly sis - Solid Food
Check the solid food feeding analysis
Solid Food - Week ly View
Tap on the filter on the top right to switch
between daily, weekly and monthly views. Tap on a food type to mark as allergic
Re co rd a Fe e d ing
Feed the baby again after checking the feeding history
20
S o lid Fo o d Re co rd e r
This page shows how many days you have fed the
baby apples. And record the food name by simply typing it in
UNIQUE POSITION
S T R AT E G I C PROCESS
21
Feeding Tracker is productivity app that helps a mother record her baby’s feeding situations as well as perform an analysis on it. It provides a user-friendly and well-educated feeding assistant for the moms to track babies’ feeding methods, amount and types. It records every feeding and summarizes the daily feeding schedule. In the mean time, it helps moms to analyse their feeding daily, weekly and monthly. It’s very easy to check the record and get to know the average feeding amount. It saves a lot of time for the moms with writing down the feeding every single time and doing the analysis by themselves.
22
COMPETITIVE A N A LY S I S
B A B Y N U R SIN G
BABY T RAC KE R
BabyNursing is a baby nursing app for iOS and Android devices. Features within the app include feeding, diaper, sleeping, solid eating, bath, doctor visit, medication and vaccination recorder and tracker.
Baby Tracker is a baby tracking app for iOS devices. Features include feeding, diaper and sleep recorder and tracker. Also the app provides notifications for feeding, diaper and sleep. Pros • Clean recording sections • Has alarm settings • Easy to start a the recording • Separate the history by tabs
Pros • Has everything for the baby • Shows the information with charts • Can export the record • Can Sync the record
Cons • Crowded UI design • Hard to read the history
Cons • Really confusing UX/UI design on the main screen • The recorder is not very good • Charts are landscape but the main app is portrait
23
24
BABY N U R SI N G
BABY T R ACK ER
P L AT FO RM FE AT U RE S Set up baby’s profile
B A B Y FE E DIN G
Breast feeding recorder Bottle feeding recorder
Baby Feeding is a baby feeding app for iOS devices. Features include a feeding recorder and tracker. The app also has diaper and sleeping time recorder.
Solid food feeding recorder Feeding history
Pros • Big recording buttons • Simple and clean UI design
Feeding analysis Diaper recorder Sleeping recorder
Cons • Messy UX design • Doesn’t have calendar for the history • Adding a diaper and sleep function is confusing
V IS UAL D E S IG N Card view Recording time counter Calendar Charts Clean UI design 25
26
BABY F EED I N G
F EED I N G T R ACK ER
I N S P I R AT I O N PRODUCTS
GO O GLE N O W
体 重 管 理 ( W E IG H T O R G A N I Z ER )
Google Now is an intelligent personal assistant developed by Google that is available within Google Search. Google Now uses a natural language user interface to answer questions, make recommendations, and perform actions by delegating requests to a set of web services. User information is automatically organized into simple cards that appear just when they’re needed. It shows the right information at just the right time.
体重管理 (Weight Organizer) is an personal tool app that track people’s weight as well as set up target weight milestones for the user. Features include weight recording, tracking and analysis. Inspiration Features • Simple recorder • Clean & readable chart • Simple analysis
Inspiration Features • Beautiful use of typography • Clean UI design • Organized information
27
28
EXPERIENCE MAP
EXCITED
FINE
STRESSED
USER
UX PROCESS
BABY BO R N
L EA R N I N G F EED I N G
G ET T I N G FA M I L I A R
Get a newborn baby
Start to learn how to feed the baby • Get suggestions from the doctor and take classes
Get familiar with feeding baby • Start to do things better and faster
“Oh my baby is so cute! I will take really good care of her. I will give her a healthy body and good education.“
“Oh there’s so many details. I have to take notes of every single feeding and do an analysis once in a while. Not matter what, I’ll do my best.“
“It isn’t as hard as it was the beginning. But it is still troublesome to write down notes every time.“
•
DO ING
T H INKING
•
•
FE E L ING
29
Really happy with the newborn baby • Want to give her everything
•
Spend all my time on feeding and taking care of my baby • It’s really hard and stressful
30
EXHAUSTED
EX P ER I EN CED
Taking care of the baby becomes an everyday job
•
•
•
• I’m doing things faster I’m feeling less tired from taking care of my baby
“I hope I can have a vacation. I need a rest.“
•
Want to rest and not think only about my feeding duties
USER RESEARCH
When How Many Times How Long Left Or Right
CONTENT MAP Breast Feeding
Last Feeding Info
Profile Photo Name
Baby’s Profile
Bottle Feeding
Solid Food Feeding
Food Name How Many Days Allergy Mark
Solid Food Feeding Recorder
Last Feeding Info Input Food Name
Birthday Feeding is the most important thing for a newborn baby. For a new mother, how to feed a baby as well as how much to feed is difficult to figure out. After a feeding, the mother needs to take notes with the feeding details. Since she is feeding the baby multiple times a day, and she needs need to calculate the total feeding amount, it is inconvenient to write things down and do the math. In addition, she needs to provide summarized monthly feeding analysis for her baby’s doctor to review.
BREAST M I LK
BOT T LE
S O L ID FO O D
1 DAY SCHEDULE
1 DAY SCHEDULE
FOOD TYPES
1-3 months 8-12 times 30-60 minutes
1-3 months 6-8 times 2-3 ounces
Introduce solid food Only one type of food for 3-5 days
3-4 months 6-10 times 30-60 minutes
3-4 months 5-6 times 4+ ounces
5-6 months 5-8 times 10+ minutes
5-6 months 4-5 times 6-8 ounces
6+ months 4-6 times 10+ minutes
2½ ounces x baby weight
Write down food allergies if any were discovered
Gender
Add Feeding Record
Profile Photo Name Birthday Gender
Breast Feeding Analysis
6+ months
Bottle Feeding
Solid Food Feeding
(pound)
31
Bottle Feeding Recorder
Breast Feeding Recorder
Add Baby
32
When Amount Daily Total Amount
Last Feeding Info Input Amount Last Feeding Info Time Counter Left Or Right Chart Average Calendar Daily/Weekly/Month View Chart Total Calendar Daily/Weekly/Month View Food Name Allergy Mark Daily/Weekly/Month View
TA R G E T AU D I E N C E
Our target audiences are females between 20 to 35 years old who have baby(ies) under 1 year old. These women are smart phone users and are familiar with smart apps. As mothers, they care about their babies’ health and will listen to and follow their pediatrician’s instructions.
KAT H ER I N E Age 32 Baby’s Age Less than 1 month Location San Francisco, CA Occupation Full-time mom Feeding Method Breast feeding
“ I j us t k no w feed ing a baby h a s s o m a n y ins tr uc tio ns to fo llo w. I need t o re c o rd th e feed ing ev er y s ing le time !”
Needs • Track baby’s daily feeding times and length • Record feeding sides • Analyze feeding average time
Katherine used to be a full-time employee. She loves her life, and she likes using technology products. After she gave birth to her child, she became very excited and happy. However, motherhood can be challenging and she doesn’t enjoy manually recording the feeding and doing an analysis. She wants to get a baby feeding app that is easy to use and will help her on tracking and analyzing her baby’s feeding history. She thinks the app will make her life as a new mother easier and be more organized.
TAS K FLO W H O ME
33
AD D FE E D I N G
B R EA ST M I L K R ECO R D ER
R ECO R D & SAV E
34
F EED I N G R ECO R D ED
NI COLE
CL A R A
Age 29 Baby’s Age 3 months Location Palo Alto, CA Occupation Part-time employee Feeding Method Breast feeding + Bottle feeding
“Fee d in g a b a b y i s not eas y, e s pecia lly w h e n t h e b a b y i s ve ry l i ttl e . I ha v e to
o rg a n ize my s che d u l e arou n d m y ba by a s w e ll a s w o r k p art-ti m e .”
Needs • Track baby’s daily feeding times and length • Track baby’s bottle feeding amount • Analyze feeding average time and amount
Nicole gave birth to her baby 3 months ago. She learned how to feed her baby and to schedule her life around her baby. Even though she is acclimated to her current lifestyle, she thinks there should be a better way than writing down the baby’s feeding history every time via pen and paper. Every month before seeing a doctor, Nicole performs a feeding analysis and needs to keep the track of all the notes she has written down. Nicole is use to using a calendar app, so she hopes there is an app to track and record a baby’s feeding.
TA S K FLO W H OME
Age 28 Baby’s Age 8 months Location Fremont, CA Occupation Full-time employee Feeding Method Bottle feeding + solid food feeding
“ Tak ing c are o f a baby is like a n o t h e r
full-tim e j o b. I h o pe th ere is s o m e t h i n g
th at c an h elp m e o rg aniz e thi n g s w i t h m y
Needs • Track baby’s daily feeding amount • Record feeding info • Mark baby’s allergy food
Clara is a full-time employee. She only can take care of her baby after work. She views taking care of her baby is like another full-time job. She is looking for something to help her organize her feeding notes. Also she wants a smart apps that can do the analysis for her.
s ec o nd ‘full-tim e j o b‘.”
TAS K FLO W CHE CK FE E DIN G HISTO RY
ADD F EEDI NG
BOT T LE F EEDI NG RECORDER
35
RE CO RD & S AV E
FE E DING RE CO RD E D
H O ME
ANALYS I S
GO TO SOLID FOOD FEEDING
CH ECK W EEKLY A N A LY SI S
36
A N A LY SI S CH ECK ED
UX TESTING TIMELINE
CARD SORTING
PH A S E
TIME
PART I C I PANT S
T E ST ING TYP E
Narrow Down the Market
Sep 2014
7 (GDS: UX CLass)
Brain Storming
1 ST R O U N D K EY WO R D S BABIE S
C H O RE S
WO R K
T R A SH
Interview with mothers
Oct 2014
6 (all mothers)
Interview
I narrowed down the market for stay at home moms. The app helped them in scheduling all the chores in their busy lives.
Card Sorting
Oct 2014
4 (mothers or people did baby sitter)
Workshop
2 N D R O U N D K EY WO R D S
Low-Fidelity Prototype (1st round)
Nov 2014
3 (mothers has babies under 4 years old)
InVision Prototype
Low-Fidelity Prototype (2nd round)
Mar 2015
3 (mothers has babies under 4 years old)
InVision Prototype
High-Fidelity Prototype (1st round)
May 2015
2 (mothers has newborn babies)
InVision Prototype
High-Fidelity Prototype (2nd round)
Sep 2015
2 (mothers has newborn babies)
InVision Prototype
37
FE E D ING
ST RE TC H I N G
SU N B AT H
POOP CO LO R S
BAT H
H ISTO RY
PACK I N G L I ST P R ESET S
MORE THAN ONE BABY
BRE AST MILK FE E D ING
BOT T LE FE E DIN G
I narrowed down the market again for the new moms who just gave birth to babies. They don’t have any experience in taking care of a baby. The app could guide them to create daily schedules that they can follow.
3 R D R O U N D K EY WO R D S
SO L I D F O O D F EED I N G
A N A LY SI S
38
In the 3rd round, I narrowed down the app’s function which now only focuses on baby feeding and analysis.
39
40
LOW-FIDELITY WIREFRAMES 1 It’s hard to follow the schedule to feed the baby properly. A lot of moms feed the babies based on when they cry. So they cannot feed at the exactly time. But the poop tracker is good. Moms will know babies healthy by the poop color and shape.
TE STIN G R E SU LT
Home
A daily schedule for that day
Sta rt Th e Sch edul e
A uto Created Schedule
Tap on “feed baby“ and finish the first
A detail daily schedule has been
pop-up recorder
created by the first feeding time
41
Track Poop Color
Tap on the poop button to track poop color and time
The history is useful, but it would be better if it analyze the data.
H ist or y
Go to history from the side menu
Packing lists are helpful. A lot of moms need that.
Hist o ry D e t ail
Choose a date to view the history detail
42
Pack ing L ist Pre se t s
Go to packing lists from the side menu
Pack ing L ist D e t ail
Go to the list detail by choosing a list. Select the choices has been packed
LOW-FIDELITY WIREFRAMES 2 It is good to let users to record whenever they want. But the feeding pop-up only applies to mom who are feeding breast milk. Also, the UI design is much simpler than the timeline, and it is easy to use and understand.
TE STIN G R E SU LT
Home
Changed the navigation to a tap bar.
Separated timeline as a list. Users can
A dd a Record
Feedi ng Recorder
Tap on the add button to add a record
A feeding recorder pops up
record info whenever they want
43
H ome (Aft er Recordin g)
The home screen shows the last feeding history on each section
There are 2 types of history. It is a bit confusing. And the line chart is easier to view. If the line chart also does analysis, that could be much more helpful.
H ome (More Det ail)
Tap on the feeding section to view more detail
Packing list and settings are fine. Aside fro that, there wasn’t too many comments on the design.
Hist o ry
Go to history page. It shows a line chart
44
Pack ing L ist s
Go to packing lists and choose a list
S e tt ings
Go to settings to setup preferences
LOW-FIDELITY WIREFRAMES 3 Only focus on feeding is nicer, because that’s the priority task for the moms. And the app looks more professional and focused. But pumping and formula is the same thing. Moms only calculate the feeding amount with bottle feeding.
TE STIN G R E SU LT
Home
Narrow down the market to feeding
features only. Add different types of
A dd a Record
B rea s t Feedi ng Recorder
Tap on the add button to add a record
A recorder pops up
feeding: breast milk, pumping and
To Record a Feeding
Feed with left/right side nipple and tap the left/right button to record at the same time.
formula
45
The feeding recorder shows the last time feeding info is great. It gives moms the idea of feeding amount for this time.
For mu la Feeding Recorder
Type in the feeding amount and save
Analysis is good for moms. Otherwise they need to do it themselves. But it might be a little bit messy at here. The easier to read, the better.
Ho m e (Aft e r re co rd )
Analy sis
Shows the last feeding info and total
Analyzes the whole day feeding info,
amount
and shows the average amount
46
Analy sis - Filt e r
Tap on the filter button to show the daily/weekly/monthly choices
A P P I D E AT I O N
UI PROCESS
47
NU RS ING & P RO FE S S IO NAL
O R G A N I Z ED
CH A RT S
Needs to show it’s a professional feeding app. Let mothers have the trustful feeling.
Needs to give user the feeling it’s well organized. It can manage their feeding better.
Needs to summarize the data and display well. Make the charts easy to read and understandable.
48
MOODBOARD 1
“
SOF T
COM F ORTABLE
H E L P FU L
”
VISUAL I N S P I R AT I O N 1
Ave n ir Nex t A BCDEF G H I J K L M N OPQ R STU V W X YZ abcde fg h i j k l m n o p q rs t u v w x y z 1234567890 Adobe Gar amo nd Pro ABC DE FGHIJ KL M N O P Q R ST U V W X YZ abcdefg h i j k lm n o p qrs t u v w x y z 1 2 3 4 5 6 7 8 9 0
49
50
MOODBOARD 2
“
GUI DE
PROF ESSIO NAL
O RG ANIZ E D
”
VISUAL I N S P I R AT I O N 2
O pen Sans ABCD EFGHIJKLMNOPQRSTUVWX YZ a b c d efghijklmnopqrstuvwxyz 12345 6 7 8 9 0 B od o in A B C D EFGHI JKLMNOPQRSTUVWXYZ abcdefg hijklmno pqr stuv wx y z 1234567890
51
52
C O LO R PA L E T T E & TYPOGRAPHY
LOGO/IDENTITY DESI GN PROC ESS
NE U T RAL T H E ME
Login | Sign Up | Set Up Profile
P I N K T H EM E
Fo r Bab y Girl
Fo r Bab y Bo y
#67C0AE RGB 103,192,174 CMYK 60,0,39,0
#FFA1BD RGB 255,161,189 CMYK 0,50,7,0
#85D7E8 RGB 133,215,232 CMYK 49,0,11,0
#3AA38E RGB 58,163,142 CMYK 74,12,52,1
#3AA38E RGB 58,163,142 CMYK 74,12,52,1
#51B8CD RGB 81,184,205 CMYK 65,5,19,0
#E1527E RGB 255,82,126 CMYK 5,80,25,1
#33C0DC RGB 51,192,220 CMYK 67,0,14,0
#625C5E RGB 98,92,94 CMYK 56,50,45,37
#546063 RGB 84,96,99 CMYK 65,46,45,34
F I NAL DESI GN
53
B LU E T H EM E
Gotham - Medium
Gotham - Book
“T he q uick b rown fox j um ps over the la zy d og .”
“The qui ck brown fox j umps over the l azy do g.”
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
54
UI DESIGN PROCESS H O ME S C RE E N
1 s t Rou n d
2nd Round
3rd Round
55
Fin al Ver sion
P O P- U P
1st Roun d
2 nd Ro und
3 rd Ro und
56
Final Ve rsio n
UI DESIGN PROCESS NAV IG AT IO N BAR
1 s t Rou n d
2nd Round
3rd Round
57
Fin al Ver sion
H I STO RY
1st Roun d
2 nd Ro und
3 rd Ro und
58
Final Ve rsio n
DESIGN GUIDELINE H E ADE R H ead e r 1
Gotham - Medium 20pt
H ead e r 2
G o t h a m - M e d ium 1 4 pt
N um be r 1
tra ck in g : 25pt
Go th am B ook 72pt
N um be r 2
G o t h a m - B ook 24 p t
N um be r 3
G ot h a m - B o o k 18 p t
Text 1
G o t h a m - M e di u m 36 p t
Text 2
Gotham - Medium 24pt
Text 3
G o t h a m - M e d ium 1 4 pt
Text 4
Gotham - B oo k 12pt
59
B U T TO N S
TAB BAR Regu lar
O pen
I N P U T F I EL D
60
STYLE GUIDE
ASSETS
breast feeding 80x80
bottle feeding 80x80
solid food 80x80
add button 58x58
camera 70x70
play 70x70
pause 70x70
close button 58x58
allergy 30x30
back 24x24
feeding tab 38x38
61
feeding tab 38x38
62
close 24x24
edit 24x24
DATA D I A G R A M
V I SUA L D EV ELO P M EN T Adobe Photoshop Adobe Illustrator Sketch
TECHNICAL PROCESS
63
FRAME WO RK
PROGRAMMING
D EV I CES
Bootstrap jQuery UI
HTML5 CSS3 JavaScript jQuery Chart.js
Desktop / Laptop Smart phones
64
OPEN SOURCE S P E C I F I C AT I O N
T E C H N O LO GY U S E D
D R AG G A B L E & SO RTA B L E PA N EL
Boots trap
http://getbootstrap.com/ jQuery
https://jquery.com/ jQuery UI
http://jqueryui.com/ jQuery UI To u c h Pun c h
http://touchpunch.furf.com/ jQuery C las s y Co u n t d ow n http://www.jqueryscript.net Chart.js
http://www.chartjs.org/
65
66
OPEN M ENU & ANI M AT I ON E FFE CT S
67
CO U N T U P T I M ER
68
ACT I VE LI NE C HART
69
TA B S & F I LT ER S
70
THESIS PROCESS CONCLUSION
Babies start talking at 18 months. Before they talk, parents are not able to know their feeling. Therefore, feeding a baby is among the top concerns new parents have. The doctors will teach mothers the feeding instruction and ask them to take notes with the feeding details every single time by following the instruction. This is the best way to feed babies well and make sure they are getting enough nutrition.
CONCLUSION
Feeding Tracker is a personal assistant smart phone app for the mothers who have babies under 1 year old. It records, analyzes and summarizes the baby feeding. The mother don’t need to record the feeding with a piece of paper and pen and do the daily calculation and monthly summary any more by using Feeding Tracker. That saves theirs time and make their lives a lot more easier. In my mid-point review, my thesis was a intelligent butler to organize people’s schedule, shopping lists and take care of them. After taking GSD: User Experience class, I narrowed down the user market to help out the mothers and housewives only, because they have a lot of chores every day and they need something to help them organize the small things. After joining workshops and doing user researches, I shrank the
71
user market again. I only focused on the moms have babies under 1 year old. I designed the features to help them take care of babies and record the activities. The third time I cut away other features besides of the core feature was when I talked to two new moms who has newborn babies and a product manager. I kept the feeding feature and have different kinds of baby feeding. They all calculate, record, and analyze differently. Finally, the app has become more specific and professional for baby feeding. I’m enjoying the process of bring ideas to a POC product event though it is painful. I have learned a lot like how to do research and user testing, how to think the way from user’s side not mine, and how to set up the core feature and make it more specific. In the design process, the main challenge appeared on when I decided to make an app for moms and housewives. I don’t have any experience on being a mom or housewife. It’s a big challenge for me to work on the wireframes. I talked to a lot users and get experience quick to think the way they needed. Compare to my midpoint proposal, my final result is much more specific and helpful. I hope when I have baby, I can use this app to help me with feeding.
72
GDS JOURNAL HIGHLIGHTS G D S: U SE R E XPE R IE N C E
G D S : V IS UAL D ESI G N
73
J o urnal L ink : http s:/ / le nayuand e si gn. w ord p re ss. c om /
74
GD S: R E SPO N SIVE WEB G D S : CO N TE N T MA N AGE ME NT
J ourna l L i nk: http s : / / wn m80111. wik is p a ces . com/ Yu a n %2C+Tianz i http s : / / 2 0 1 5 f a -wn m8 0 1 -2 5 -cms . wik is p a ces . com /Lena+% 28Tianz i% 29+Yuan
75
G DS : V IS UAL D E S I G N 2
76
BIBLIOGRAPHY
M ARKET RESEARC H Th e b a b y ow ner ’s m a nua l B y Lou is B org en iche, M . D. & Joe B org en icht, D.A .D A G ui de for Fi rs t-Ti m e Pa rents http : / / k ids hea l th. org / p a ren t/ p reg n a n cy_cen ter /preparing_parent h ood /guid e_ p a ren ts . html N ew b orn Sl eep a nd Feedi ng Sch edul e http : / / www. ba bys l eep s ite. com/ s chedu l es / n ewborn-sleep-feed ing-sch ed ule/ A g e-b y-a g e g ui de to feedi ng your b a b y http : / / www. ba bycen ter. com/ 0_a g e-by-a g e-g u ide-t o-feed ing-your-b ab y_1400680.b c Your Step-b y-Step G ui de to B ottl efeedi ng http : / / www. p a ren ts . com/ ba by/ f eedin g / bottl ef eed ing/st ep-b y-st ep-guid e/ Feedi ng G ui de for th e Fi rs t Yea r http : / / m. hop k in s medicin e. org / hea l thl ibra ry/ cond it ions/ped iat rics/feed ing_guid e_ f or_the_f irs t_yea r_9 0 , P 0 2 2 0 9 /
77
78