a practical approach to great user adoption in...

ALL RIGHTS RESERVED © 2016

A Practical Approach toGreat User Adoption in SharePointBranding and User Experience Workshops

ALL RIGHTS RESERVED © 2016

Damon SanchezSenior User Experience Engineerdsanchez@concurrency.com Twitter: @darkriderdesignBlog: https://www.concurrency.com/author?user=dsanchez

A Practical Approach toGreat User Adoption in SharePointBranding and User Experience Workshops

ALL RIGHTS RESERVED © 2016

IntroSession Content Downloads | Contact Information

What Is UI & UX?Quick Overview of User Interface Design & User Experience Design

The Gears of User CentricityCore Facets of User Adoption, The Reason for Process

User Definitions & User JourneysWho, What, Where, When, Why & How?

ALL RIGHTS RESERVED © 2016

High Fidelity WireframesFine Tune the Visualization

Branding & EmotionsThe Design Language of Emotion, Connecting to Users

SharePoint Design & DevelopmentWhat is Possible With CSS, JS in SharePoint

Demo SharePoint O365Quick Walk-though of an Actual SharePoint Site

QuestionsThank you

ALL RIGHTS RESERVED © 2016

UI… UX…What exactly are they?

ALL RIGHTS RESERVED © 2016

UI… UX…What exactly are they?

ALL RIGHTS RESERVED © 2016

Interpretation of function

ALL RIGHTS RESERVED © 2016

CAMPSITES

1 - 36150 - 180

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

Cognitive Processing

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

User CentricityProject Areas

Content Survey

CompetitiveAnalysis Audience

Definition

User Scenarios

ProcessFlows

Site Map

UIWireframes

UXDesign

Prototyping

User Testing

Review

Approval

ALL RIGHTS RESERVED © 2016

Core Facets Of User Centricity

ALL RIGHTS RESERVED © 2016

Core Facets Of User Centricity

ALL RIGHTS RESERVED © 2016

Having Parts, Doesn’t Mean The Parts Fit Together

User Testing& Review

User Definition& Requirements

UI Wireframes & UX Designs

ALL RIGHTS RESERVED © 2016

Fitting Essentials Together

User Testing& Review

User Definition& Requirements

UI Wireframes & UX Designs

ALL RIGHTS RESERVED © 2016

• If a user gets confused who will they contact?

• What does a typical user of this application do for a living?

• What other applications does a typical user interact with on a daily basis?

•What is something that would make a user angry or upset if the interface didn’t do it well?

• What is something that this interface needs to do that would make a user happy?

Definition Questions

ALL RIGHTS RESERVED © 2016

User JourneysSally has tried to buy music online, but her credit card has expired. She needs to log into her account and change the credit card information. She is in the car and about to go on vacation and really wants to listen to an album on the long drive.

ALL RIGHTS RESERVED © 2016

A Persona On a Journey• Sally goes to her smart phone

• She types in the url to her favorite Music Ecommerce site

• She logs into the site

• Once she is logged in she notices the account icon in the top right hand corner

• Upon clicking on the icon she is presented with a modal window with tabs that contain all of her account information

• She clicks on the credit card tab, and the credit card information shows up

• She enters her new credit card information and hits save

• She clicks on the Music Marketplace app in the bottom row, and does a search for her favorite band

• The search results come back and she clicks on the band she wants to listen to on her vacation

• She is presented with the check-out cart which asks her if she is ready to pay with her updated credit card

ALL RIGHTS RESERVED © 2016

The Journey Expressed Through UI

ALL RIGHTS RESERVED © 2016

Demo

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016*O365

• What type of visual language do your users respond to?

• What font express your brand?

• What colors does your brand use, and are the colors of your brand working for you online?

ALL RIGHTS RESERVED © 2016*O365

• What type of visual language do your users respond to?

• What font express your brand?

• What colors does your brand use, and are the colors of your brand working for you online?

ALL RIGHTS RESERVED © 2016

The TrifectaFitting Essentials

User Testing& Review

User Definition& Requirements

UI Wireframes & UX Designs

ALL RIGHTS RESERVED © 2016

Demo

ALL RIGHTS RESERVED © 2016

ALL RIGHTS RESERVED © 2016

“At the end of the day it is how the user remembers the experience.”

ALL RIGHTS RESERVED © 2016

Session DownloadsAxure Wireframe Examplehttp://3y5i9c.axshare.com/#g=4&p=home

Slide Deck PDFLINK

User Definition DocumentationCATEGORIESJOURNEYPERSONA TEMPLATE