Monday | November 28, 20163:30 pm – 5:00 pm

Nicole Pullin | Bursting Silver

Web Design with the User in Mind

User Experience Consultant Bursting Silver

PROJECT MANAGERQA CONSULTANT

TRAINERFRONT-END DEVELOPERINTERACTION DESIGNER

GRAPHIC DESIGNERBUSINESS ANALYSTUX PRACTICE LEAD

1996 8 roles

17 years

CONSULTING EXPERIENCEFIRST WEBSITE

Passionate about creating positive experiences for people using technology.

3facts

BOOK LOVERDOG OWNER

MOVIE POSTER COLLECTOR

burstingsilver.com

info@burstingsilver.com1-844-294-0040

iMIS Implementation!

Custom Development"

Upgrade Planning & Execution

#

Web Design$

Systems Integration

Professional ProjectManagement

%

On-Going Support?

Mobile Apps

Process Optimization&

ASI Chairman’s Circle WinnerPresident’s Club WinnerAI Consultant of the Year

We are digital creatorspassionate about

building beautiful iMISwebsites and cloud applications

Top-notch iMISconsultants withindustry-specific

experience.

AwardWinning Innovative Experienced

Want your site visitors to fall in love with your organization?Fall in love with your visitors.

UXVISITORS NEEDS

BUSINESS GOALSUX

UX

Usable

Useful

Desirable

AccessibleCredible

Findable

Valuable

https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience

Research

DesignTest

Evolve

Build

Research

WHOAre your visitors?

WHYAre they visiting your website?

WHATAre they trying to achieve?

WHEREAre they accessing your website?

WHENAre they accessing your website?

HOWDoes your product/service fit the context of their life?

DIRECT

INDIRECT

SELF-REPORTED OBSERVED

Colle

ctio

n M

etho

d

Participant Involvement

Observations

Task / Activity analysisFocus groups

Surveys

Search logsWebsite statistics

Customer feedbackHelp deskCall centre

Diaries / Journals

Card sorting

Interviews

Source: Donna Spencer http://maadmob.com.au/

Research Methods

DIRECT

INDIRECT

SELF-REPORTED OBSERVED

Colle

ctio

n M

etho

d

Participant Involvement

Observations

Task / Activity analysisFocus groups

Surveys

Search logsWebsite statistics

Customer feedbackHelp deskCall centre

Diaries / Journals

Card sorting

Interviews

Source: Donna Spencer http://maadmob.com.au/

Research Methods

Types of questionsTasks Can you show me how you would make a pizza?

Participation Can you show me how I should make a pizza?

Demonstration Show us how to make a pizza.

Role-playing You’ll be the customer and I’ll be the chef; show me how they should respond.

Sequence Walk me through a typical day.

Specific example How did you make the Chicago pizza?

Peer Comparison Do other chefs do it that way?

Project ahead What do you think it will be like in 5 years?

Look back How are things different than they were last year?

Quantity How many chefs are like that?

Exhaustive List What are all the things you use when you make a pizza?

Other viewpoint comparison What’s your bosses’ opinion on the same topic?

Source: Deep Dive Interviewing Secrets: Making sure you don’t leave key information behind, Jan 2010

Personas

ü BACKGROUND

ü CHARACTERISTICS

ü ACTIVITIES / MOTIVATIONS

ü ENGAGEMENT

ScenariosWHY• Help us think about the use of

the website in unique contexts • Expose problems and

opportunities• Evaluate the website from

multiple perspectives

BUILD SCENARIOS1. What triggers the

experience?2. What happens during the

experience?a) What activities / tasks

are accomplished?3. What is the outcome?

Research Tools

Google Analyticshttps://www.google.ca/analytics/analytics

Survey Monkeyhttps://www.surveymonkey.com

Xtensio Persona Creatorhttps://xtensio.com/user-persona/

DesignWireframes, navigation, interactions, graphics

Interaction Design

Design is content with intent.Content without intent is noise.Intent without content is decoration.- JOE SPRANO

Brand personality exercise

1. Gather the key stakeholders in a room2. Take 2 minutes and write down the adjectives that describe their

organization3. Align common adjectives with a brand personality

SINCERITY

• Down-to-earth• Family Oriented• Honest• Real• Wholesome• Cheerful• Sentimental• Friendly

ExcitementEXCITEMENT

• Daring• Trendy• Exciting• Spirited• Imaginative• Unique• Up-to-date• Independent• Contemporary

COMPETENECE

• Reliable• Hard-working• Secure• Intelligent• Technical• Corporate• Successful• Leader• Confident

SOPHISTICATION

• Upper-class• Glamorous• Good looking• Charming• Feminine• Smooth

RUGGEDNESS

• Outdoorsy• Masculine• Western• Tough

Dimensions of Brand Personality by Jennifer L. Aakerhttp://www.jstor.org/stable/3151897?seq=1#fndtn-page_thumbnails_tab_contents

Remember your audience

Source: http://www.paznow.com/ucd/

Design

• Generate ideas• Confirm features• Draft navigation• Understand content• Create wireframes• Create visual design

Mobile first

WHERE WE USE OUR PHONES99% at home82% in car or transit69% at work53% waiting in line50% walking

Brand Design

Color Typography

Imagery Copywriting

TRANQUILITYSECURITYINTEGRITYPEACELOYALTYTRUSTINTELLIGENCE---COLDNESSFEAR

SPIRITUALHEALINGPROTECTIONSOPHISTICATED---ENVY

FRESHNESSENVIRONMENTNEWMONEYFERTILITYHEALINGEARTH---ENVYJEALOUSYGUILTY

BRIGHTSUNNYENERGETICWARMHAPPYPERKYJOYINTELLECT---IRRESPONSIBLEUNSTABLE

ROYALTYNOBILITYSPIRITUALITYLUXURYAMBITIONWEALTHCREATIVE---MYSTERYMOODINESS

HEALTHYHAPPYFEMININESWEETCOMPASSIONPLAYFUL---WEAKIMMATURITY

LOVEPASSIONENERGYPOWERSTRENGTHHEATDESIRE---ANGERDANGERWARNING

COURAGECONFIDENCEFRIENDLINESSSUCCESS---IGNORANCESLUGGISHNESS

FRIENDLYEARTHOUTDOORSLONGEVITYCONSERVATIVE---DOGMATIC

DEPENDABLEFLEXIBLECRISPCONSERVATIVE---DULLBORING

WEALTHWISDOMPROSPERITYVALUABLETRADTIONAL---EGOTISTICALSELF-RIGHTEOUS

GLAMOROUSHIGH TECHGRACEFULSLEEKBALANCE---INDECISIVEDULLNON-COMMITTAL

SECURITYRELIABILITYINTELLIGENCESOLID---GLOOMYSADCONSERVATIVE

PROTECTIONELEGANCEDRAMATICCLASSYFORMALITY---DEATHEVILMYSTERY

GOODNESSINNOCENCEPURITYFRESHEASYCLEAN---ISOLATIONEMPTINESS

Source: http://coschedule.com/blog/color-psychology-marketing/

Adobe Color https://color.adobe.com/

TYPOGRAPHYhttps://www.canva.com/font-combinations/http://fontpair.cohttps://www.typewolf.com/http://font-combinator.com/

ImageryADVENTUROUS

EXCITINGBOLD

SCAREDDANGEROUSDEADLY

Use beautiful photography

STOCK PHOTOGRAPHY https://www.pexels.com/https://unsplash.com/https://stocksnap.io/http://www.gratisography.com/https://www.splitshire.com/

Copywriting

Source: http://www.paznow.com/ucd/

Stanford Guidelines for Web Credibility

ü Make it easy to verify the accuracy of the information on your siteü Show that there’s a real organization behind your siteü Highlight the expertise in your organization and in the content and services you provideü Show that honest and trustworthy people stand behind your siteü Make it easy to contact you

ü Design your site so it looks professionalü Update your site’s content often (at least show it’s been reviewed recently)ü Use restraint with any promotional content (e.g. ads, offers)ü Avoid errors of all types, no matter how small they seem

Stanford Guidelines for Web Credibilityhttp://credibility.stanford.edu/guidelines/index.html

BuildCLICK TO ADD TEXT

Austin Responsive

London Responsive

Toronto Responsive

iMIS RWD Toolkit

Classes

Extra Small Devices:Smartphones (less than 768px)

Small Devices:Tablets (greater thanor equal to 768px)

Medium Devices:Laptops (greater than or equal to 992px)

Large Devices:Desktop monitors (greater than or equal to 1200px)

hidden-xs Hidden Visible Visible Visible

hidden-sm Visible Hidden Visible Visible

hidden-md Visible Visible Hidden Visible

hidden-lg Visible Visible Visible Hidden

iMIS Layouts = Bootstrap Grid

Install Google Analytics & Mouseflow

Demo

Test & Gather FeedbackCLICK TO ADD TEXT

Functional TestingCROSS BROWSER• Chrome• Firefox• Safari

DEVICE TESTING• iOS• AndroidTOOLS• Browser Stack• Device lab• Developer toolbars

Gather feedbackUSABILITY TESTING• Existing website• Sketches• Wireframes

TOOLS• Usability labs• Invision app• Morae

Gather feedbackUSABILITY TESTINGRECORDINGS• Multiple devices

• First hand scenarios• Mouseflow

https://mouseflow.com/

Gather feedbackUSABILITY TESTINGRECORDINGSANALYTICS• Error logs• Return Visits, not Bounce

Rate• Device • Calls to action

Case StudiesAward Winning iMIS Websites

EvolveCLICK TO ADD TEXT

UXVISITORS NEEDS

BUSINESS GOALSUX

UX

Usable

Useful

Desirable

AccessibleCredible

Findable

Valuable

https://www.interaction-design.org/literature/article/the-7-factors-that-influence-user-experience

Research

DesignTest

Evolve

Build

ResourcesCLICK TO ADD TEXT

Inspiration

Nielsen Norman Group - https://www.nngroup.com/Smashing Magazine - https://www.smashingmagazine.com/User Interview techniques:http://www.slideshare.net/edanzico/user-interview-techniques

THANK YOU TO OUR SPONSORS

FOUNDING PARTNER

PLATINUM PARTNERS

GOLD PARTNERS

SILVER PARTNERS