App Design Tricks: Make Your Apps Beautiful and Increase ... · PDF fileApp Design Tricks: Make Your Apps Beautiful and Increase User Adoption Jenny Loudis, Manager Mobile Solutions

#mstrworld

App Design Tricks: Make Your Apps Beautiful and Increase User Adoption

Jenny Loudis, Manager Mobile Solutions

#mstrworld 2

The Mobile Service Line A commitment to Mobile excellence

Worldwide perspective on Customer Successes (and failures)

Bi-directional relationship with MicroStrategy Engineering

Over 100 years of combined Mobile Application experience

Committed to helping our customers succeed in every stage of their Mobile Strategy

User-Centered Design

4

“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.”

EMPATHIZE

DEFINE

DEATE

PROTOTYPE

TEST

EMPATHIZE

DEFINE

DEATE

PROTOTYPE

TEST

EMPATHIZE

DEFINE

DEATE

PROTOTYPE

TEST

Who gets a seat at the table?

Product Owner

Project Manager

Technical Developer

Designer

Business Analyst

User

EMPATHIZE

DEFINE

DEATE

PROTOTYPE

TEST

EMPATHIZE

DEFINE

DEATE

PROTOTYPE

TEST

Why are you making an app?

Use one sentence.

EMPATHIZE

Who are your primary users?

Define the personas.

EMPATHIZE

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

them all equally”

Amanda Cox, NY Times

Pixel Media

23

24

As a <user> I want <goal/desire> So that <benefit>

Marketing Manager Check on the status of a campaign

I can see if there are any operational issues

Marketing Manager Open a support ticket I can get any issues resolved quickly

Marketing Associate See the KPIs of a campaign over time

I can understand how a campaign is performing

25

As a <user> I want <goal/desire>

So that <benefit>

Existing Report/Data

Marketing Manager

Check on the status of a campaign

I can see if there are any operational issues

Campaign Status

Marketing Manager

Open a support ticket

I can get any issues resolved quickly

N/A

Marketing Associate

See the KPIs of a campaign over time

I can understand how a campaign is performing

Need to break down by day

EMPATHIZE

DEFINE

Phone or tablet?

Define a device.

Localytics

31

EMPATHIZE

DEFNE

IDEATE

33

EMPATHIZE

DEFNE

IDEATE

#mstrworld

How will the user navigate the app?

Make it obvious and consistent.

www.lukew.com

www.lukew.com

How will you organize content and display the details?

Follow the user scenario, and reveal information as the user expresses interest / as it becomes

relevant.

#mstrworld

Choose the right visualizations for your data

EMPATHIZE

DEFNE

IDEATE

User Testing

Iterate

63

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

Grouping How do you use shapes to convey a hierarchy?

67

Contrast

Direct the attention of the user

Dark contrast, more emphasis

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

Less contrast for less emphasis

Smaller font for less emphasis

Color

Stick to a well-defined palette.

Typography

Stick with 1-2 readable fonts.

Sans-serif

Helvetica Neue Arial Futura Avenir

Serif

Georgia Times New Roman

Garamond

Comic sans

Iconography Use universal imagery that will be

easily recognized

#mstrworld 84

85

86

87

Other Formatting Tips in MSTR

Explore your options – it’s worth it.

100

101

102

103

104

105

106

107

Examples

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

#mstrworld 124

#mstrworld 125

#mstrworld 126

127

128

129

130

131

“Perfection is achieved, not when there is nothing more to add, but when there is nothing

left to take away.”

Antoine de Saint-Exuper

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 •  50 User Experience Best Practices •  Hack Design

#mstrworld

Inspiration for better design

•  Dribble •  24 beautifully designed web dashboards that data geeks will love •  Designing to iOS7 •  Icons Inspired by iOS7 •  20 Excellent Wireframing Tools for Mobile •  The Mobile Single-Purpose App Strategy •  A Guide to Creating Dashboards that People Love to Use