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
OVERVIEW
Autobiography
02
Statement of Interest
05
Résumé
Elevator of Pitch
06 08
Thesis Abstract
2
03
PROOF OF CONCEPT
Concept Video
10
Information Architecture
12
Prototype Task 1
13 17
Task 2
19
Task 3
3
11
S T R AT E G I C PROCESS
Unique Position
22
Competitive Analysis Matrix
26
Competitive Analysis Inspiration Products
23 27
4
6
UX PROCESS
TECHNICAL PROCESS
Experience Map
30
Data Diagram
64
Content Map
32
Technology Used
66
User Research
Target Audiences
UX Testing Timeline Card Sorting
Low-fidelity Wireframes 1 Low-fidelity Wireframes 2 Low-fidelity Wireframes 3
5
31 33 38 41 43 45
48
Visual Inspiration 1
50
Visual Inspiration 2 Logo/Identity
Color Palette & Typography UI Design Process Design Guideline Style Guide Assets
7
CONCLUSION
Thesis Process Conclusion
72
Bibliography
77
GDS Journal Highlights
App Ideation
Moodboard 2
65
37
UI PROCESS
Moodboard 1
Open Source Specification
49 51 52 53 54 55 59 60 61 62
73
OVERVIEW
1
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. 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.
2
L E N AY U A N . C O M
3
RÉSUMÉ
EX PERI ENC E
S KILLS
TIB CO Softw a re Inc.
Lan guages
U I D es i g ner / / 6. 2015–Pres en t
HTML5 // CSS3 // JavaScript // jQuery // Web
and developers to create user-friendly mobile
// Cantonese
visual comps for multiple apps. Manage and create
Soft ware
off to the development team.
InDesign // After Effects // Dreamweaver // Muse //
Collaborate with project stakeholders, UX designers and web applications. Design graphics, icons, and
L E N A YUA N (415) 6 0 1 - 9 6 4 9
le nayu an 8 8 8 @gma i l . c om ww w. le n ayu an .c o m
production specifications and deliverables for hand
Development // Web Hosting // English // Mandarin
Sketch // InVision // Photoshop // Illustrator //
Sublime Text // Microsoft Word // Microsoft Excel
Toori de L LC. Co-founder & U I/ U X D es i g ner / / 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.
E DU CAT IO N Academy of Art Un iv er sit y Mast er of Fine Art s in Web Design & New Media // 1.2013-Present Guangzhou Un iv er sit y
Ch eeta h M ob i l e U I/ U X Intern / / 6. 2013-6. 2014
Designed UI/UX for Cheetah Mobile’s Clean Master app as well as edited and polished UI components and created production style guides.
4
Bachelor of Engineer in g in Lan dscape Archit ect u re // 6.2006-7.2010
S TAT E M E N T O F INTEREST
“
Technolo g y is s uppo s ed to m ake o ur liv es ea sier, allo w ing us to d o th ing s m o re quickly and effic iently.
”
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
E L E VATO R OF PITCH
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. 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.
6
7
THESIS ABSTRACT
PRO BL EM S
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 OLU T I ON S 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 days. 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.
WHY F EEDI NG T RAC KE R? 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)
8
PROOF OF CONCEPT
9
CONCEPT VIDEO
10
PROTOTYPE
L E N AYUA N . CO M/ THE SIS/ LO GIN .HT M L 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
I N F O R M AT I O N ARCHITECTURE
ENT 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
12
TA S K 1 STA RT U SIN G THE A P P & R E CO R D A FE E DING
I tap sign up
type in email
tap on
& password,
birthday
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
Set u p Baby Profile 1
Enter the baby’s name and birthday.
Next choose their gender and upload a picture
OR
tap done & choose baby gender
S e t u p B a b y Prof i l e 2
Enter the baby’s birthday via iOS’s date picker
Th em e Col or For G i rl
The system auto sets up pink for a baby girl Add another baby if the mom has more
14
Theme Color For Boy
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.
15
tap R button
Breast Milk Recorder A recorder pops up.
tap SAVE button
To re c o rd a B rea s t Fe e d i n g
Feed the baby with one of the user’s nipples and tap
the left/right button to record the feeding at the same
Record Sh ow s On Hom e
The record will show up on the home screen
time. When done with the feeding, tap the pause button and save the record
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
button
button
amount
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.
Re c o rd Ad d e d O n Hom e
The home screen is now updated with the recorded data.
tap and drag
tap the baby
to move the
pic to edit/
cards
add profile
M ove th e ca rds
Reorganize the order of the cards by tapping and dragging a card.
18
Swit ch a Baby /Add An ot her Baby
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
A n alys i s - B rea st M i l k
tap the bottle
tap the solid
tap the W
button
food button
button
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
I
S o lid Fo od - We e k l y Vi e w
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
tap the add
type in the
button
food
Record a Feedi ng
Feed the baby again after checking the feeding history
20
Solid Food Recorder
This page shows how many days you have fed the
baby apples. And record the food name by simply typing it in
S T R AT E G I C PROCESS
21
UNIQUE POSITION
Feeding Tracker is a 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 records and get to know the average feeding amount. It saves a lot of time for the moms by writing down the feeding every single time and doing the analysis.
22
COMPETITIVE A N A LY S I S
B A B Y N U R SIN G 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. Pros • Has everything for the baby • Shows the information with charts • Can export the record • Can Sync the record 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
BA B Y TR ACKE R 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 Cons • Crowded UI design • Hard to read the history
24
B A B Y FE E DIN G 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. Pros • Big recording buttons • Simple and clean UI design Cons • Messy UX design • Doesn’t have calendar for the history • Adding a diaper and sleep function is confusing
25
BABY NURSI NG
BABY T RAC KER
P L AT FOR M F E AT U R ES Set up baby’s profile Breast feeding recorder Bottle feeding recorder Solid food feeding recorder Feeding history Feeding analysis Diaper recorder Sleeping recorder VIS UA L D ES I GN Card view Recording time counter Calendar Charts Clean UI design 26
BABY FE E D ING
FE E DING T RAC KE R
I N S P I R AT I O N PRODUCTS
GO O GLE N O W 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. Inspiration Features • Beautiful use of typography • Clean UI design • Organized information
27
体 重 管理 ( WE IGHT O R GANI ZER) 体重管理 (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
28
UX PROCESS
29
EXPERIENCE MAP
EXCITED
FINE
STRESSED
U S ER
BABY BORN
LEARNI NG F EEDI NG
GET TING FAMILIAR
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.“
•
D O I NG
T HI NK I NG
•
•
FEEL I NG
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
E XP E RIE NC E D
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
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
Write down food allergies if any were discovered
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
6+ months
(pound)
31
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 Gender
Add Feeding Record
Profile Photo Name Birthday
Bottle Feeding Recorder
Breast Feeding Recorder
Add Baby
Gender
Breast Feeding Analysis
Bottle Feeding
Solid Food Feeding 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.
33
KAT HERI NE Age 32 Baby’s Age Less than 1 month Location San Francisco, CA Occupation Full-time mom Feeding Method Breast feeding
“I ju s t k n o w f e e d i ng a b ab y h as so ma ny i n st r u c t io n s to f ol l ow. I ne e d to record t h e f e e d in g eve ry s i ng l e ti m e ! ”
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 HO ME
A DD FE E DIN G
BREAST M I LK RECORDER
RECORD & SAVE
34
FE E D ING RE CO RDE D
NI COLE 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 HO ME
CHE CK FE E DIN G HISTO RY
BOT T LE F EEDI NG RECORDER
ADD F EEDI NG
35
RE CO RD & S AV E
FE E DING RE CO RD E D
C LARA Age 28 Baby’s Age 8 months Location Fremont, CA Occupation Full-time employee Feeding Method Bottle feeding + solid food feeding
“ Ta k in g c a re o f a b ab y i s l i ke another
full-t im e j o b. I h op e th e re i s s omething
t h at c a n h e l p m e org ani ze th i ngs with my
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 e co n d ‘ f u l l -ti m e j ob ‘.”
TA S K FLO W HO ME
A N A LY SIS
GO TO SOLID FOOD FEEDING
C HEC K WEEKLY ANALYSI S
36
ANALYS IS C H E C KE D
UX TESTING TIMELINE 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
Interview with mothers
Oct 2014
6 (all mothers)
Interview
Card Sorting
Oct 2014
4 (mothers or people did baby sitter)
Workshop
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
CARD SORTING
1 ST RO U ND KE YWO RD S B A B I ES
CHO R E S
WORK
T RASH
F EED I NG
STR E TCHIN G
SUN BAT H
POOP COLORS
B AT H
HISTO RY
PAC KI NG LI ST PRESET S
M ORE T HAN ONE BABY
B REAST MI L K FEED I N G
B OTTLE FE E DIN G
I narrowed down the market for stay at home moms. The app helped them in scheduling all the chores in their busy lives.
2 ND RO U ND KE YWO RD S 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 RD RO U ND KE YWO RD S
SOLI D F OOD F EEDI NG
ANALYSI 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 is to ry
Go to history from the side menu
Packing lists are helpful. A lot of moms need that.
Hi s tory D eta i l
Choose a date to view the history detail
42
Pa cki ng L i s t Preset s
Go to packing lists from the side menu
Pack in g List Det 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 o me ( Mo re D e t a i l )
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.
Hi s tory
Pa cki ng L i s t s
Go to history page. It shows a line chart
Go to packing lists and choose a list
44
Sett in gs
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.
Fo r mu la Fe e din g Re c ord e r
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.
Hom e (A fter record)
A na l ys i s
Shows the last feeding info and total
Analyzes the whole day feeding info,
amount
and shows the average amount
46
Analy sis - Filt er
Tap on the filter button to show the daily/weekly/monthly choices
UI PROCESS
47
A P P I D E AT I O N
NU R SIN G & P R O FE SSIO N A L
ORGANI ZED
C H ART 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
”
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
VISUAL I N S P I R AT I O N 1
50
MOODBOARD 2
“
GUI DE
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
PROF ESSIO NAL
O RG ANIZ E D
”
VISUAL I N S P I R AT I O N 2
52
LOGO/IDENTITY DESI GN PROC ESS
F I NAL DESI GN
53
C O LO R PA L E T T E & TYPOGRAPHY
PIN K T HEM E
For Ba by G ir l
BLUE T HEM E
NE U T RAL T H E ME
For B a b y B oy
Login | Sign Up | Set Up Profile
The neutral color purple comes from blue and pink
#FFA1BD RGB 255,161,189 CMYK 0,50,7,0
#85D7E8 RGB 133,215,232 CMYK 49,0,11,0
#E87C9D RGB 58,163,142 CMYK 74,12,52,1
#51B8CD RGB 81,184,205 CMYK 65,5,19,0
#C698E5 RGB 198,152,229 CMYK 32,46,0,0
#E1527E RGB 255,82,126 CMYK 5,80,25,1
#33C0DC RGB 51,192,220 CMYK 67,0,14,0
#A87BC7 RGB 168,123,199 CMYK 42,58,0,0
#625C5E RGB 98,92,94 CMYK 56,50,45,37
#546063 RGB 84,96,99 CMYK 65,46,45,34
Gotham - Medium
Gotham - Book
“The quic k brow n fox j u mp s over the lazy do g.”
“ The q ui ck brown fox ju mps ove r t he l az y d og.”
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
1 s t Rou n d
2nd Round
3rd Round
56
Fin al Ver sion
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 ISTO RY
1 s t Rou n d
2nd Round
3rd Round
58
Fin al Ver sion
DESIGN GUIDELINE
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
HEADE R
BUT TONS
TA B BA R Re gu la r
Ope n
I NPUT FIE LD
60
STYLE GUIDE
61
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
feeding tab 38x38
62
close 24x24
edit 24x24
TECHNICAL PROCESS
63
DATA D I A G R A M
VI SUAL DEVELOPM ENT Adobe Photoshop Adobe Illustrator Sketch
FR A ME WO R K
PROGRAM M I NG
DE V IC E S
Bootstrap jQuery UI
HTML5 CSS3 JavaScript jQuery Chart.js
Desktops / Laptops Smartphones
64
OPEN SOURCE S P E C I F I C AT I O N
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
T E C H N O LO GY U S E D
DRAGGABLE & SO RTABLE PANE L
66
OPEN M ENU & ANI M AT I ON E FFE CT S
67
COUNT UP T I M ER
68
ACT I VE LI NE C HART
69
TABS & F I LT ERS
70
CONCLUSION
71
THESIS PROCESS CONCLUSION
Babies start talking at 18 months. Before they talk, parents are not able to know their feelings. 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. 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. By using Feeding Tracker the mothers don’t need to record the feeding with a piece of paper and pen and do the daily calculation and monthly summary any more. That saves their time and makes their lives a lot easier. In my mid-point review, my thesis is an intelligent butler to organize people’s schedule and shopping lists and take care of them. After taking GSD: in 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 research, I shrank the user
market again. I only focused on the moms who 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 out other features except for the core feature after I talked to two new moms who have newborn babies and a product manager. I kept the feeding feature and 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 bringing ideas to a POC product even though it is painful. I have learned a lot like how to do research and user testing, how to think from users’ side not mine, and how to set up the core feature and make it more specific. In the design process, the main challenge appeared when I decided to make an app for moms and housewives. I don’t have any experience in being a mom or housewife. It’s a big challenge for me to work on the wireframes. I talked to a lot of users and got experience quickly to think about what they needed. Compared to my midpoint proposal, my final result is much more specific and beneficial. 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
73
GDS: V ISUA L DE SIGN
J ourna l L i nk: http s : / / l en a yu a n des ig n . wordp res s . com/
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 D S: V ISUA L DE SIGN 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 78