How Many Breaths?

DESIGN PROCESS 1

TYPOGRAPHY III SARAH ROCCO

HOW MANY BREATHS IN A DAY— the app

2 DESIGN PROCESS

SARAH ROCCO TYPOGRAPHY II

DESIGN PROCESS 3


A REFLECTION OF THE DESIGN PROCESS AND DEVELOPMENT

by, sarah rocco

HOW MANY BREATHS IN A DAY— the app

4 DESIGN PROCESS


DESIGN PROCESS 5


RESERACH

IDEATION

process

solution

afterword

7

11

15

23

27

6 DESIGN PROCESS


DESIGN PROCESS 7


RESEARCH

8 DESIGN PROCESS


DESIGN PROCESS 9


10 DESIGN PROCESS


DESIGN PROCESS 11


ideation

12 DESIGN PROCESS


DESIGN PROCESS 13


14 DESIGN PROCESS


DESIGN PROCESS 15


process

16 DESIGN PROCESS


AM

HOW MANY

HOW MANY

HOW MANY BREATHS?

breaths

breaths

DO YOU TAKE IN A DAY?


HOW MANY BREATHS?

USERNAME OR EMAIL

USERNAME OR EMAIL

PASSWORD

PASSWORD

LOG IN

LOG IN

FOrGOT PASSWOrD? SIGN UP hErE


AM

HOW MANY

HOW MANY

HOW MANY BREATHS?

breaths

breaths



HOW MANY BREATHS?

USERNAME OR EMAIL

USERNAME OR EMAIL

PASSWORD

PASSWORD

LOG IN

LOG IN



AM

HOW MANY

HOW MANY

HOW MANY BREATHS?

breaths

breaths



HOW MANY BREATHS?

USERNAME OR EMAIL

USERNAME OR EMAIL

PASSWORD

PASSWORD

LOG IN

LOG IN



AM

HOW MANY

HOW MANY

HOW MANY BREATHS?

breaths

breaths



HOW MANY BREATHS?

USERNAME OR EMAIL

USERNAME OR EMAIL

PASSWORD

PASSWORD

LOG IN

LOG IN



DESIGN PROCESS 17


AMAM

4,321 breaths

4h 16min

8:00 AM

3

4,321breaths

43 breaths

4h 16min4h 16min

8:00 AM9:00 AM

72010:00 AM

1412

12:00 PM 4,162

HOW MANY BREATHS?HOW MANY BREATHS?


3

AMAM

4,321 breaths

4h 16min

8:00 AM

3

4,321breaths

43 breaths

4h 16min4h 16min

8:00 AM9:00 AM

72010:00 AM

1412

12:00 PM 4,162



3

AMAM

4,321 breaths

4h 16min

8:00 AM

3

4,321breaths

43 breaths

4h 16min4h 16min

8:00 AM9:00 AM

72010:00 AM

1412

12:00 PM 4,162



3

18 DESIGN PROCESS


AM AM

AM

breaths

FO RGOT pa SS W O R D? S IG N U p H E R E

READY TO START?

breathe

turn your phone so the bottom is facing you, breathe into the dock area to calibrate your

resting breathing rate.

calibrating...

DESIGN PROCESS 19


AM AM

AM

breaths


USERNAME OR EMAIL

PASSWORD

LOG INFOrGOT PASSWOrD? SIGN UP hErE

READY TO START?

breathe

Using the bottom of your phone, breathe into the dock area to cali-brate your resting breathing rate.

calibrating...

LOG IN

AM AM

AM

breaths


USERNAME OR EMAIL

PASSWORD

LOG INFOrGOT PASSWOrD? SIGN UP hErE

READY TO START?

breathe

Using the bottom of your phone, breathe into the dock area to cali-brate your resting breathing rate.

calibrating...

LOG IN

AM

TODAY’S BREATH RATE

12 am • 4 am • 8 am • 12 pm • 4 pm • 8 pm •

20 DESIGN PROCESS


AM AM

AM

breaths


READY TO START?

breathe

turn your phone so the bottom is facing you, breathe into the dock area to calibrate your

resting breathing rate.

calibrating...

DESIGN PROCESS 21


AMAM

AMAM

< >augustTOTAL

AVG

today’s breath rate

leader board

TOTaL: 16,354

CURRENTRaNK: 246,014

12 aM • 4 aM • 8 aM • 12 PM • 4 PM • 8 PM •

< >

HIGHEST: 112 LOWEST: 8

LOWEST: 20,124

55

SEPTEMBER 9, 2014

30000

15

30

5000 7000 9000

today’s particle breakdown

PM2.

5(UG

/M3 )

PARTICLE COUNT (100P/FT3)

130

12, 500

25,000

14 15 16 17 18 19

avg

sleep

1. JOCONNOR125 521,324,087

5. MILDMESS37 478,234,387

3. SPYDERMAN 503,348,994

7. HAMMERTIME 461,873,527

2. FRANTAZ.CAROLINE 518,233,874

6. WHERESWALDO 476,864,965

4. SWAGGZ 498,497,388

C02

H

To unlock this scree n, please visit the app store and purchase your breath tube! now only $1.99!

AMAM

AMAM

< >augustTOTAL

AVG


leader board

TOTaL: 16,354


12 aM • 4 aM • 8 aM • 12 PM • 4 PM • 8 PM •

< >


LOWEST: 20,124

55

SEPTEMBER 9, 2014

30000

15

30

5000 7000 9000


PM2.

5(UG

/M3 )


130

12, 500

25,000

14 15 16 17 18 19

avg

sleep

1. JOCONNOR125 521,324,087

5. MILDMESS37 478,234,387

3. SPYDERMAN 503,348,994




4. SWAGGZ 498,497,388

C02

H


AMAM

AMAM

< >augustTOTAL

AVG


leader board

TOTaL: 16,354


12 aM • 4 aM • 8 aM • 12 PM • 4 PM • 8 PM •

< >


LOWEST: 20,124

55

SEPTEMBER 9, 2014

30000

15

30

5000 7000 9000


PM2.

5(UG

/M3 )


130

12, 500

25,000

14 15 16 17 18 19

avg

sleep

1. JOCONNOR125 521,324,087

5. MILDMESS37 478,234,387

3. SPYDERMAN 503,348,994




4. SWAGGZ 498,497,388

C02

H


AMAM

AMAM

< >augustTOTAL

AVG


leader board

TOTaL: 16,354


12 aM • 4 aM • 8 aM • 12 PM • 4 PM • 8 PM •

< >


LOWEST: 20,124

55

SEPTEMBER 9, 2014

30000

15

30

5000 7000 9000


PM2.

5(UG

/M3 )


130

12, 500

25,000

14 15 16 17 18 19

avg

sleep

1. JOCONNOR125 521,324,087

5. MILDMESS37 478,234,387

3. SPYDERMAN 503,348,994




4. SWAGGZ 498,497,388

C02

H


22 DESIGN PROCESS


DESIGN PROCESS 23


solution

24 DESIGN PROCESS


DESIGN PROCESS 25


26 DESIGN PROCESS


DESIGN PROCESS 27


afterword When I was first brainstorming about this project, our discussion about how technology driven our culture is inspired me to turn poke fun at this aspect of our daily lives. With a satirical approach, I chose to design an app that tracks how many breaths one takes during the day.

The audience for the app is anyone who use tracking apps on a daily basis and are looking for another way to document their lives with technology. The tone of the app was kept light hearted as to appeal to those that will take the app seriously, as well as those who will download it for the gimmick quality and use it for a day at most. The app is not meant to revolution-ize anyone’s daily life, but simply to poke fun at the fact that we have apps to track anything and every-thing—no matter how trivial or insignificant.

Originally, I had a blue, cream, purple color scheme, but it made the app feel outdated and flat. I wanted the app to have more upbeat and energy filled feel since it was about tracking your breath (typically associated with increased activity). Also, the colors didn’t really reflect the satirical attitude; they are seri-ous, but the app is more playful than satirical. More-over, the style in which the information (how many breaths you take, the resting/sleeping/average rates) was portrayed was too scientific. The app was sup-posed to be fun, not serious and technical. Therefore, I modified the color scheme to yellow, red/purple, and white. These colors provided better contrast and legibility, and created a more lighthearted aesthetic. Similarly, I changed the type to a hand-lettering type-face to keep the level of sophistication (aka, haughty taught ness) low and relate-ability high. I also chose

to portray the information as a bar graph that would progress throughout the day because a circle was too small to accurately convey information.

I believe the app to be successful in being comical but still functional. The information is clear and straightforward, and is appropriate for type of track-ing it does. The colors are relatively gender neutral, allowing the largest audience and customer base for that lucky soul who wants to develop this app into the real deal. The singled out “breaths” in a script face on the home login screen is a nice accent that offers a hint of sophistication that is meant to be tongue-in-cheek. In other words, the change in typeface causes the viewer to pause, pondering the significance of the word and why it is separated from the rest, and then the realization that there isn’t anything noteworthy about it at all. However, I think the scale of the icons at the bottom could be adjusted, and that they could be refined to the fit hand-lettered quality of the app more. Also, I think more screens/measurements could have been developed.

If I were to start this project over, I would like to try a more serious and more purposeful app; a possible idea I had was a spinoff of the goodreads app or something related with literature. I really liked the apps that utilized the geolocation feature and finding things that are near to where you are in the present moment. Throughout this project, I learned and explored a lot with contrast. Since some screens have multiple data points/lines overlapping, I needed to carefully choose colors that would overlap well and fit in with the color scheme.

INTELLECTUAL PROPERTY REPORT (IPP)

Typefaces used in this project, Amatic and Alex Brush, are public domain typefaces available free for personal and commercial. Programs used to finalize imagery for this project, were Adobe Illustrator and Adobe InDe-sign, are licensed to SUNY Fredonia and available for student use. Imagery and icons were created by me.

TIME SHEET

WEEK 1: 8hr

WEEK 2: 12.5hr

WEEK 3: 10hr

WEEK 4: 13.1hr

WEEK 5: 15hr

28 DESIGN PROCESS


DESIGN PROCESS 29


30 DESIGN PROCESS


This book was typeset in Amatic and Alex Brush, based on a typographic scale of 8pt.

DESIGN PROCESS 31


How Many Breaths?

Documents

Transcript of How Many Breaths?