Mobile for Nonprofits

Mobile

Brand and

User ExperienceJasmine Sante, Sante Strategies

@mjsante

Alignmentthe proper positioning

or state of adjustment

of parts in relation to

each other

@mjsante

Alignment of:[INTERNAL]

Business Goals Technology

[USER RELATIONSHIP]

Your Goals User Objectives

[CAPACITY]

Budget/Staff/Etc User Expectations

@mjsante

Expectation is the root of all

heartache.- Shakespeare

@mjsante

@mjsante

@mjsante

@mjsante

@mjsante

User Experiencethe overall experience of a

person using a product such as

a website or application,

especially in terms of how easy

or pleasing it is to use.- Google

@mjsante

Mobile vs Desktop

•Screen Size

•Portable

•Always On

•Interrupted Engagement

•Single Window

•Refresh Pages

•Download speeds & variable connectivity

@mjsante

@mjsante

Easy Updates to Enhance UX:

Homepage & Navigation

Prioritize content based on user needs

Evaluate against user needs & adjust

Highlight functional elements (give, help, search)

Include important elements in the footer *

Test navigation menus **

@mjsante

Easy Updates to Enhance UX:

Content & Links

Use lists, bullets, bolding and links to make pages scannable

Make links easily clickable (48px says Google, 55px is better)

Make buttons large with clear text

Leave spacing between links

Fonts should be 16px for standard text

Use whitespace to guide the eye

@mjsante

Easy Updates to Enhance UX:

Forms & Graphics

Forms: Simplify & shorten your forms

Forms : Test spacing and form entry

Use text in place of any graphics that communicate information

(i.e. phone numbers)

Speed: Optimize images, CSS, etc

@mjsante

A word on the hamburger menu

@mjsante

@mjsante

Brand:A shorthand for what

people should

KNOW about you,

THINK about you &

FEEL about you.

@mjsante

You too are a brand. Whether you know it or not. Whether you

like it or not.

- Marc Ecko

@mjsante

People use brands as

shortcuts to make

purchasing decisions

- Allen P Adamson, BrandSimple

@mjsante

McDonalds and Starbucks

Mobile Crucial Brand

ElementsLogo

Terminology

Colors

Typography

Images & Icons@mjsante

Overall:- Visual

- Succinct

- Compelling

- Clear

@mjsante

Ecosystem:A complex network or

interconnected system.

@mjsante

@mjsante

@mjsante

Plan for Mobile EVERYWHERE• Website• Newsletters• Calls to Action• Advocacy Information• Facebook• LinkedIn• Twitter• Print materials• Etc

@mjsante

Mobile User Experience

It isn’t just your website.

It’s also your

-emails

-newsletters

-tweets

-posts on Facebook

Anything that might be opened on mobile.

@mjsante

Mobile UX

Anything that might be opened on

mobile and has a link to your website or a digital property.

Whether you sent it or not.

@mjsante

Integrated Brand Tips

Newsletters•High contrast colors (within your brand identity)• Include your tagline or short mission in the header• Include additional brand identity in the footer• Make images clickable• Subject Lines & From addresses are crucial

@mjsantehttps://blog.kissmetrics.com/your-next-email-subject-line/

@mjsante

← iPhone clips

Android Wraps →

https://blog.kissmetrics.com/your-next-email-subject-line/

@mjsante

Integrated Brand Tips

Twitter, Facebook, Etc• Include brand identity when possible

• logo in images & video• URL

• Consistent fonts and colors• Consist language• Consistent link naming & usage

@mjsante

@mjsante

Integrated Brand Tips

TESTTESTTESTTest every link. On as many devices as possible.

Memorable:worth remembering or

easily remembered,

especially because of being

special or unusual

@mjsante

@mjsante

@mjsante

@mjsante

Jasmine Sante

Sante Strategieswww.santestrategies.commjsante@santestrategies.com@mjsante

Web Content Mavenswww.meetup.com/webcontentmavensdcwebmavens@gmail.com@wcmdc