SKYE SANT - Executive UX/Product Case Studies

www.SkyeSant.com

Skye Sant

UX|UI|Product Case Studies UX Portfolio | Executive UX/ Product Designer

Agenda

Iteration| More Engaging Experience

www.SkyeSant.com

KPI Dictionary New Feature | Increased Capabilities

Risk Register New Platform | Digital Transformation

CDP Pipeline

Creating Digital Tools

www.SkyeSant.com

Discover

Design & Build

Evaluate + Extend & Iterate

+

Communication Change Management

www.SkyeSant.com

Skye Sant

Iteration: KPI Dictionary Individual Contributor + Informal Influence

KPI Dictionary

OVERVIEW

Purpose Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

PROCESS

‣ www.SkyeSant.com

‣ ‣

DISCOVER ‣ SME interviews + content audit DESIGN ‣ Visual + Interaction Design ‣ Mockup + Prototypes EVALUATE ‣ Validate ‣ Extend + Iterate

GOALS all the info needed to understand and use the ‣ Includes term in context workflow ‣ Accommodates ‣ Easy to use

Spreadsheet - kept manually updated.

Charlene shows us how much she likes working via spreadsheets

KPI Dictionary Leadership:

Contribution:

[Role] Leader

Sole Individual Contributor (IC)

Formal management responsibilities Shared vision/strategy & guidance

Full autonomy & responsibility ‣ Visual/Interaction Design ‣ User Testing

Informal Influencer Support, persuasion & Influence

Collaborating IC Shared work & responsibility ‣ User Research ‣ Vision + Strategy ‣ Communication + Presentation

Contribution by Others Information or work provided by others ‣ Business BA: Research ‣ PM + SMEs: Research, validation ‣ PO + devs: User Stories + Technical Discussions

Me, UX; Business System Owner; Project Manager (product); PO/Business Analyst

www.SkyeSant.com

Informal Leader

‣

OVERVIEW

KPI Dictionary

DISCOVER

SME Interviews + Content Audit ext Goal: Include all the info needed to understand and use the term in cont Legacy KPI Dictionary Interviews + content audits->

FINDINGS

www.SkyeSant.com

+ workflow ‣ Personas models ‣ Mental the info needed for ‣ All ‘context’ importance of ‣ Relative functionalities + components (priorities)

Not pictured: Personas User Journey maps Vision/ strategy decks Executive check-ins User stories

Workflow via flow doc

Workflow via sketches

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary

DESIGN

Visual + Interaction Design Goal: easy to use = clear IA + layout that fits with their mental model 2. Draft (mockup)

3. Interactive Prototype

4. Final - in production

www.SkyeSant.com

1. Sketch

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary

DESIGN

Mockups

s shown when viewed Goal: complete yet succinct = all fields included on creation, only active field

Technical opportunities + ‘Wizard of Oz’ tests ->

DECISIONS

www.SkyeSant.com

UX/UI patterns ‣ Repeatable use: iPad (tablet) ‣ Default views for the ‣ Different Metric Owners vs company

‣ ‣ ‣

users Grid system Responsive design No workflow on mobile

Not pictured: Grid system for responsive design Plan for user testing

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary Prototypes

ct Goal: complete yet succin

Metric detail page

www.SkyeSant.com

Metric List page

DESIGN

Metric Owner: Inbox, status tab

Metric Owner: Metric detail page

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary

www.SkyeSant.com

MVP in Production

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary

EVALUATE

Validate

Quantitative + qualitative measurements:

www.SkyeSant.com

Qualitative:

Yes

Quantitative:

92%

Includes all the info needed to understand and use the term in context

Accommodates workflow + coherent with existing UI

Qualitative: Most SMEs + beta users said yes*

Quantitative: users can accomplish top 4 tasks in 2 minutes or less**

* 13/13 SMEs + 9/12 Beta users said yes when asked “Do you have all the information here you need to do your job?’ ** 92% Tasks done in <2 minutes (12/13)

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary Validate

EVALUATE

Goal: accommodates workflow + easy to use = replace the manual spreadsh eet flow they’re accustom to

User feedback ->

OUTCOMES Goals:

www.SkyeSant.com

Includes all the info needed to understand and use the term in context Accommodates workflow Metric Owners validating the workflow

Easy to use

First 2 weeks: Accessed by a majority of the company; utilized by all of the Metric Owners to do their job (vs using spreadsheets and uploading)

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

KPI Dictionary

EVALUATE

Extend + Iterate “Where else could we do this?”

Expand functionality ->

EXTEND

Pattern Library Training/ rollout www.SkyeSant.com

Extend functionality: Responsive design (mobile) Notification Page Notification settings Administration Settings Link Management Activity Log Deprecate bulk import

‣ ‣ ‣ ‣ ‣ ‣ ‣

Adobe XD Pattern Library

Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.

www.SkyeSant.com

Q&A

Iteration: KPI Dictionary Individual Contributor + Informal Influence

www.SkyeSant.com

Skye Sant

New Feature: Risk Register Individual Contributor + Informal Leader

Risk Register

OVERVIEW

Purpose

www.SkyeSant.com

Create a Risk module featuring a Risk Register* (paid add-on to current offering) that’s ‘modern & usable’ while being coherent with existing UI

GOALS

PROCESS

least as functional and visually pleasing as ‣ At competitors (+’modern’) workflow ‣ Accommodates ‣ Coherent with existing UI

‣ DISCOVER ‣ SME interviews +

Legacy: Risk spreadsheets

‣ ‣

Competitive Review DESIGN ‣ Visual + Interaction Design ‣ Interactive Prototype EVALUATE ‣ Validate ‣ Extend + Iterate

* Risk Register: a tool for documenting risks (potential issues that can derail intended outcomes) and actions to manage each risk.

Risk Register LEADERSHIP:

CONTRIBUTION:

[Role] Leader

Sole Individual Contributor (IC)

Formal management responsibilities

‣

OVERVIEW

Informal Leader Shared vision/strategy & guidance

Full autonomy & responsibility ‣ User Research ‣ Visual/Interaction Design ‣ User Testing

Informal Influencer www.SkyeSant.com

Support, persuasion & Influence A remote friendly company

Collaborating IC Shared work & responsibility ‣ Vision + Strategy ‣ Communication + Presentation

Contribution by Others Information or work provided by others ‣ PM + SMEs: background info (research) ‣ PO + devs: User Stories + Technical Discussions

I was located in the Denver global headquarters

Risk Register

DISCOVER

SME (subject matter expert) Interviews + Competitive Review Goal: At least as functional as our competitors + modern (=incorporate best practices) SME notes + sketches

Key insight: Risk - Control = Residual Risk

Interviews + content audits->

FINDINGS

www.SkyeSant.com

‣ Workflow + journey maps ‣ Personas content and ‣ Minimum functionality importance of ‣ Relative components (priorities) Risk Register

Not pictured: Personas User Journey maps Vision/ strategy decks Meetings with Execs

Workflow Competitor attempts at visual interest

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

Risk Register

DESIGN

Visual + Interaction Design able Goal: Coherent with existing UI + us Table-dashboard | vertical tabs | horizontal tabs | expand/collapse panels

Research + hallway tests ->

www.SkyeSant.com

DECISIONS

Parallel panels

master-detail pattern: ‣ Use table + sidepanel ‘dashboard’ ‣ Include functionality on the sidepanel

Not pictured: Feedback from research participants via Adobe XD interactive prototype online User stories A table is well suited to list | filter | sort functionality

Existing UI (table + sidepanel)

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

Risk Register

DESIGN

Interactive Prototype

e + movement) ac sp ite wh (= rn de mo + ing as ple y Goal: Visuall

Technical opportunities + ‘Wizard of Oz’ user tests ->

DECISIONS

www.SkyeSant.com

sidepanel ‣ Extendable functionality over ‣ Prioritized ecosystem visibility accessable color ‣ Bonus: palette

Not pictured: Change management efforts with Sales/Marketing, to bring them up to speed Plan for user testing

Sidepanel

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

Risk Register

www.SkyeSant.com

MVP in Production

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

Risk Register

EVALUATE

Validate

Quantitative + qualitative measurements:

www.SkyeSant.com

“Cool!”

88%

Qualitative:

Quantitative:

At least as functional and visually pleasing as competitors

Accommodates workflow + coherent with existing UI

Qualitative: Most SMEs + beta users rate as ‘cool’*

Quantitative: users can accomplish top 3 tasks in 2 minutes or less**

* 5/6 SMEs + 4/6 Beta users said ‘This is cool!’ (or ‘clean’ or ‘neat’ or ‘slick’) when asked “So what do you think of this?’ ** 88% Tasks done in <2 minutes (14/16)

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

Risk Register

EVALUATE

Validate

This is a video of a user clicking through to a risk, changing settings, and adding a control in 30 seconds

Usability testing + survey ->

OUTCOMES Goals:

www.SkyeSant.com

At least as functional and visually pleasing as competitors Accommodates workflow

Coherent with existing UI Designed, developed and in production; new functionality released in 4 months

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

Risk Register

EVALUATE

Extend + Iterate Risk dashboard Existing platform + Risk Register ->

EXTEND

www.SkyeSant.com

‣ Dashboard pages ‣ Settings visibility: pages for ‣ Ecosystem component parts added ‣

(controls, vulnerabilities) Connect Risks etc (clone, relationships)

Not pictured: Updates to Pattern Library UX Standards

Workflow

Risk Settings Page: Score tab

Create a Risk Register that’s ‘modern & usable’ while being coherent with existing UI

www.SkyeSant.com

Q&A

New Feature: Risk Register Individual Contributor + Informal Leader

www.SkyeSant.com

Skye Sant

New Platform: CDP Pipeline Managing IC + Director

CDP Pipeline

OVERVIEW

Overview Make the Capital Deployment* Pipeline (process & data) transparent to the business.

PROCESS

www.SkyeSant.com

‣ DISCOVER ‣ Assessment + Research ‣ ‣

GOALS Make the capital pipeline (process & data) transparent to the business ‣ MISSION: GOAL: Enable strategic decision-making and organizational effectiveness. ‣ BUSINESS ‣ USER GOAL: Make a tool by and for the field (user centered).

‣ Planning + Communication DESIGN ‣ Visual + Interaction Design ‣ Mockups + Prototypes EVALUATE ‣ User Testing ‣ Validate ‣ Extend + Iterate

Rachael, Director of Operational Strategy

Legacy CDP Pipeline spreadsheet

Seth - Director, Global Operations and Capital Deployment

* Capital Deployment: the decisions the company makes about where to spend money – buying, selling, improving or developing assets.

CDP Pipeline

‣

OVERVIEW

Leadership:

Contribution:

Director

Sole Individual Contributor (IC)

Formal management responsibilities

Informal Leader Shared vision/strategy & guidance

Full autonomy & responsibility ‣ User Interviews ‣ User Testing ‣ Visual/IxD Design

Informal Influencer www.SkyeSant.com

Support, persuasion & Influence

Collaborating IC Shared work & responsibility ‣ ‣ ‣ ‣

JR UX; BA(product); Project Manager (product); Business System Owner; Tech Lead

Research UI/ prototypes Vision + Strategy Communication

Contribution by Others Information or work provided by others ‣ BA + SMEs: Research ‣ Tech leads: User Stories + Technical Discussions ‣ Project Manager: Organize + Schedule

Dev Lead; Business Analyst (business); Lead Project Manager (company); Product Owner

CDP Pipeline

DISCOVER

Assessment + Research KPI/success metrics, statements to validate

Communication with the business

Interviews + content audits->

FINDINGS

www.SkyeSant.com

transparency of info to ‣ No executives, esp real time

‣

Legacy workflow: paper

info - everything was paper + individual’s spreadsheets Not user (or employee)centered tools nor processes

Not pictured: Presentations at Exec mtgs Hiring a team

Specs/ Requirements (data, architecture)

Legacy entries: 100s of fields

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline

DISCOVER

Planning + Communication

AGILE TEST Timeline: Discover and Design (5 mo) Build (6 mo, overlapping user testing)

www.SkyeSant.com

â&#x20AC;Ł â&#x20AC;Ł

All UX tasks planned and done on dev timelines (ie 2 week sprints)

Not pictured: Early mornings, late nights

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline

DESIGN

Visual + Interaction Design Goal: Make the capital pipeline transparent & make a tool for the field.

Sketch; wireframe; prototype Research + hallway tests ->

DECISIONS

www.SkyeSant.com

dashboard ‣ Main main page ‣ Aggregated deals pages ‣ Individual ‣ Prioritize ‘quickly ___’ for each ‣ Customized Region + Country

Not pictured: Meetings at all hours (global) Hallway validation sessions User stories

Workflow

Quick wireframes

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline Goal: enable organizational effectiveness.

Working prototype in Salesforce

www.SkyeSant.com

Mockups + Prototypes

DESIGN

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline

www.SkyeSant.com

MVP Interactive Prototype

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline Global Ethnographic User Testing

EVALUATE Goal: Make a tool by and for the field + customized for each region

www.SkyeSant.com

The user interview team in China

InVision: Clickable Prototypes

Lookback: user testing video recordings

CDP Pipeline

EVALUATE

Validate Metrics: Top Task Completion

Success &Speed:

96%

Add new deal < 1 min on ipad and phone too bonus ‘Offline Mode’ in the field!

www.SkyeSant.com

‣ ‣

Increased Employee productivity:

Satisfaction (tool):

4.52

Rated a 4.52 out of 5

73%

Process improvement:

4.93

Rated a 4.93 out of 5

Less time on task, error rate NO training costs

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline

EVALUATE

Validate

VALUE

User Satisfaction (Process) 4.93 out of 5 (98%)

www.SkyeSant.com

company ‣ Increase capability

‣

Test of Agile Project: success

User Satisfaction (Project) 4.52 out of 5 (90%)

Budget

of user-centered ‣ Test design to bring value: success

93.7%

Timeline 2 weeks early

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline

EVALUATE

Validate

Digitally transformed: Business system owners reconciling the CDP pipeline in an airport in Amsterdam

OUTCOMES Goals:

www.SkyeSant.com

MISSION: Make the capital pipeline (process & data) transparent to the business BUSINESS GOAL: Enable strategic decision-making and organizational effectiveness.

(Digital Transformation) USER GOAL: Make a tool by and for the field.

Make the Capital Deployment Pipeline (process & data) transparent to the business.

CDP Pipeline

EVALUATE

Extend + Iterate Retrospective: Lesons Learned

UI Templates (Sketch) Standardize patterns/ practices + apply across company->

EXTEND

Supporting: Help/FAQ/quickstart guides Create standards Document All the Things

www.SkyeSant.com

‣ ‣ ‣

Extending the platform: Dashboard 4 more internal tools

‣ ‣ Dashboard

Style Guide | Pattern Library some other thing

Not pictured: Exec mtgs ‘Training’ + rollout UX Dept wiki

Design System Governance

Make the Capital Deployment Pipeline (process & data) transparent to the business.

www.SkyeSant.com

Q&A

New Platform: CDP Pipeline Managing IC + Director

Thank you

www.SkyeSant.com

GOAL: Work with people doing their best work, striving toward the user-centered goal of creating meaningful and useful products for customers and colleagues

www.SkyeSant.com

Q&A

Website: www.SkyeSant.com LinkedIn: www.linkedin.com/in/skyesant/ Twitter: twitter.com/Skye_sant

www.SkyeSant.com

Appendix

Appendix

User Research: Surprises Design: Mockup -> Actual (4 pages) User Testing: Surveys User Testing: UAT UX Design (processes and questions answered)

www.SkyeSant.com

Table of Contents

User Research: Surprises

CDP PIPELINE

Watch that 4th step - it’s a doozie!

Deal stages

Some of the differences in USA vs China’s real estate market

www.SkyeSant.com

from the field for ‘hidden’ C & D deals in the ‣ Insistence face of strong Exec. displeasure estate process for China (ie land ‘rental’ only) ‣ Real Forecast took 2-4 months to calculate (3 hours in ‣ CDP new tool, incl. meetings) ‣ The wonky IA for global locations (see pic)

Design: Mockup -> Actual

www.SkyeSant.com

Mockup V1: Kanban view

Mockup V2: Table view

Implemented inside salesforce

1

2

3

4

Design: Mockup -> Actual V1 Mockup: Kanban view

Two views correspond to the two major meeting/discussion types: Personal Report & Regional Report

Commands grouped by function type

Toggle deal type

www.SkyeSant.com

Totals for the (visible) board

Menu grouped by function and by Capital Deployment type, not business unit

Totals for the (visible) stage

Ability to tag (by color) to assist recall and attention

Ability to â&#x20AC;&#x2DC;Favoriteâ&#x20AC;&#x2122; to assist recall and attention

Kanban view: see deals moving E -> A

CHANGE REQUEST KEY: Usability change

User Request

Technical constraint

1

2

3

4

Design: Mockup -> Actual V2 Interactive prototype: Table view

Two views correspond to the two major meeting/discussion types: Personal Report & Regional Report

Commands grouped by function type

Toggle deal type

www.SkyeSant.com

Totals for the (visible) board

Menu grouped by function and by Capital Deployment type, not business unit

Totals for the (visible) stage

Ability to tag (by color) to assist recall and attention

Ability to â&#x20AC;&#x2DC;Favoriteâ&#x20AC;&#x2122; to assist recall and attention

CHANGE REQUEST KEY: Usability change

User Request

Technical constraint

Table View: more familiar layout + ability to easily sort

1

2

3

4

Design: Mockup -> Actual Actual in Production in Salesforce

Commands subtly grouped by function type

Two views correspond to the two major meeting/discussion types: Personal Report & Regional Report

Totals for the (visible) board

www.SkyeSant.com

Deal type set via filters

Menu not grouped

Ability to â&#x20AC;&#x2DC;Favoriteâ&#x20AC;&#x2122; to assist recall and attention

No ability to tag

KEY: CHANGE RATIONALE Usability change

User Request

Technical constraint

Table View: more familiar layout + ability to easily sort

1

2

3

4

User Testing: Surveys

www.SkyeSant.com

CDP PIPELINE

Lean Survey Canvas

Survey

Survey Results

User Testing: UAT

www.SkyeSant.com

CDP PIPELINE

User Acceptance Testing script

Research plan

www.SkyeSant.com

UX Design Process

www.SkyeSant.com

Extras

www.SkyeSant.com