#mstrworld

#mstrworld

Jenny Loudis, Manager Mobile Solutions

Mobile App Design: Learn Brilliant Yet Simple Design Rules

5.5B connected mobile devices from a population of 7B people.

50% of people use an app on their mobile device 10x or more a day.

42% increase of mobile app adoption,

with 30% in mobile BI

ClickFox/Gartner

Why design?

“Design doesn’t need to be delightful for it to work, but that’s like saying

food doesn’t need to be tasty to keep us alive.”

Frank Chimero, The Shape of Design

User-Centered Design

7

“Once a system is in development, correcting a problem costs 10x as much as fixing the same

problem in design. If the system has been released, it costs 100x as much relative to

fixing in design.”

Who gets a seat at the table?

• Product Owner

• Project Manager

• Technical Developer

• Designer

• Business Analyst

• User

Stanford d.School

EMPATHIZE

DEFINE

IDEATE

PROTOTYPE

TEST

EMPATHIZE

Stanford d.School

Pixel Media

14

EMPATHIZE

Stanford d.School

DEFINE

Why are you making an app?

Use one sentence.

Who are your primary users?

Create a User Story

Who are your primary users?

Define a persona.

Phone or tablet?

Define a device.

Adobe Digital Index

Localytics

#mstrworld 28

EMPATHIZE

Stanford d.School

DEFINE

IDEATE

How will the user navigate the app?

Make it obvious and consistent.

• www.lukew.com

www.lukew.com

How will you display the details? Follow the user scenario, and reveal information as the user expresses interest / as it becomes

relevant.

Map > infowindow Grid > infowindow Selectors and filters Swipeable panels

EMPATHIZE

Stanford d.School

DEFINE

IDEATE

PROTOTYPE

#mstrworld

#mstrworld

EMPATHIZE

• Stanford d.School

DEFINE

IDEATE

PROTOTYPE

TEST

Iterate

#mstrworld

EMPATHIZE

• Stanford d.School

DEFINE

IDEATE

PROTOTYPE

TEST

Visual Magic

“Data isn’t like your kids, you don’t have to pretend to love

them all equally”

Amanda Cox, NY Times

Grouping How do you use shapes to convey a hierarchy?

47

Color

Stick to a well-defined palette.

Typography

Stick with 1-2 readable fonts.

Sans-serif

Helvetica Neue Arial Futura

Serif

Georgia Times New Roman

Garamond

Dark contrast, more emphasis

Bold for emphasis (metrics) Light for less emphasis (labels)

Less contrast for less emphasis

Smaller font for less emphasis

Comic sans

Iconography Use universal imagery that will be

easily recognized

#mstrworld 61

Other Formatting Tips in MSTR

Explore your options – it’s worth it.

71

72

Examples

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

Questions?

#mstrworld

Much credit to these sources

•  Frank Chimero, The Shape of Design •  The Noun Project, for icons •  Smashing Magazine •  Adobe Digital Index •  Localytics •  Luke W •  Form Design

#mstrworld

Inspiration for better design

•  Dribble •  24 beautifully designed web dashboards that data geeks will love •  Designing to iOS7 •  Icons Inspired by iOS7