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