3. www.SkyeSant.com
‣Includes all the info needed to understand and use the
term in context
‣Accommodates workflow
‣Easy to use
KPI Dictionary
Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the
company’s terms & definitions.
‣DISCOVER
‣ SME interviews +
content audit
‣DESIGN
‣ Visual + Interaction
Design
‣ Mockups
‣ In Production
‣EVALUATE
‣ Validate
‣ Extend + Iterate
+ COMMUNICATION &
CHANGE MANAGEMENT
PROCESS
Purpose
GOALS
OVERVIEW
Charlene shows us how much she likes working via spreadsheets
Spreadsheet - kept manually updated.
4. www.SkyeSant.com
Sole Individual Contributor (IC)
Collaborating IC
Contribution by Others
Full autonomy & responsibility
Shared work & responsibility
Information or work provided by others
[Role] Leader
Leader
‣Informal Influencer
Formal management responsibilities
Shared vision/strategy & guidance
Support, persuasion & Influence
Contribution:
Leadership:
‣ Visual/Interaction Design
‣ User Testing
‣ User Research
‣ Vision + Strategy
‣ Communication + Presentation
‣ Business BA: Research
‣ PM + SMEs: Research, validation
‣ PO + devs: User Stories + Technical Discussions
‣ PM: project manage
Me, UX; Business System Owner; Project Manager (product);
PO/Business Analyst
OVERVIEW
KPI Dictionary
5. www.SkyeSant.com
SME Interviews + Content Audit
KPI Dictionary
‣Personas + workflow
‣Mental models
‣All the info needed for
‘context’
‣Relative importance of
functionalities +
components (priorities)
FINDINGS
Legacy KPI Dictionary
Interviews + content audits->
Not pictured:
Personas
User Journey maps
Vision/ strategy decks
Executive check-ins
User stories
DISCOVER
Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.
Workflow via sketches
Workflow via flow doc
Goal: Include all the info needed to understand and use the term in context
6. www.SkyeSant.com
KPI Dictionary
‣Repeatable UX/UI patterns
‣Default use: iPad (tablet)
‣Different views for the
Metric Owners vs company
users
‣Grid system
‣Adaptive design
‣No workflow on mobile
DECISIONS
Technical opportunities + ‘Wizard of Oz’ tests ->
Not pictured:
Grid system + breakpoints for
adaptive design
Plan for user testing
DESIGN
Everything filled out
Edit mode (blank)
Metric Page (actual)
Some fields filled out
Goal: complete yet succinct = all fields included on creation, only active
fields shown when viewed
1 2 3
Visual + Interaction Design (1/3)
7. www.SkyeSant.com
KPI Dictionary DESIGN
In-context help: definitions
on everything, all the time
Ability to add
more entries
(more than
one related
metric)
Edit mode
View mode
In-context help: definitions
on everything, all the time
Edit mode View mode
1 2 3
Visual + Interaction Design (2/3)
In-Context Help Text:
“The Business Question answers ‘What is being solved by this metric?’
For example, Net Operating Income is one of the key metrics to
determine the overall financial health of the business.”
8. www.SkyeSant.com
KPI Dictionary DESIGN
View mode In-place definitions on
everything, all the time
Only the filled-out fields are visible,
creating less cognitive load (=succinct)
Actual in production
1 2 3
Visual + Interaction Design (3/3)
9. www.SkyeSant.com
Mockups -> Actuals (1/5)
KPI Dictionary
Goal: easy to use = clear IA + layout that fits with their mental model
1. Sketch
DESIGN
2. Draft (mockup)
3. Interactive Prototype 4. Final - in production
2 3 4 5
1
10. www.SkyeSant.com
Mockups -> Actuals (2/5)
KPI Dictionary
1. Sketch
DESIGN
2 3 4
Usability
change
User
Request
Technical
constraint
KEY: CHANGE RATIONALE
5
1
Horizontal
Tab menu
Filter Bar -
every criteria
visible helps
the user
know what
can be done
here
Collapsable
main nav
Goal: easy to use = clear IA + layout that fits with their mental model
11. www.SkyeSant.com
Mockups -> Actuals (3/5)
KPI Dictionary DESIGN
2 3 4
Usability
change
User
Request
Technical
constraint
KEY: CHANGE RATIONALE
5
1
Vertical side
menu - more
room for
content (less
scrolling)
Filter - default
criteria set up
(“The business
knows what’s
needed”)
Tabbed main
nav, so nav is
always visible
2. Draft (mockup)
Goal: easy to use = clear IA + layout that fits with their mental model
12. www.SkyeSant.com
Mockups -> Actuals (4/5)
KPI Dictionary DESIGN
2 3 4
Usability
change
User
Request
Technical
constraint
KEY: CHANGE RATIONALE
5
1
Vertical side
menu split to
match the
user’s mental
model
Filter - default
criteria set up
(“The business
knows what’s
needed”)
Tabbed main
nav, so nav is
always visible
3. Interactive Prototype
Goal: easy to use = clear IA + layout that fits with their mental model
13. www.SkyeSant.com
Mockups -> Actuals (5/5)
KPI Dictionary DESIGN
2 3 4
Usability
change
User
Request
Technical
constraint
KEY: CHANGE RATIONALE
5
1
Vertical side
menu split to
match the
user’s mental
model
Tabbed main
nav, so nav is
always visible Filter Bar -
every criteria
visible helps
the user
know what
can be done
here
4. Actual - in production
Goal: easy to use = clear IA + layout that fits with their mental model
14. www.SkyeSant.com
Actuals In Production
KPI Dictionary DESIGN
Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.
Metric Owner: Inbox, status tab Metric Owner: Metric detail page
Internal User: Metric List page Internal User: Metric detail page
Goal: complete yet succinct
16. www.SkyeSant.com
Quantitative + qualitative measurements:
Qualitative:
Includes all the info needed
to understand and use the
term in context
Qualitative: Most SMEs +
beta users said yes*
Yes 92%
Quantitative:
Accommodates workflow +
coherent with existing UI
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)
Validate
KPI Dictionary EVALUATE
Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.
17. www.SkyeSant.com
Validate
KPI Dictionary
Goals:
OUTCOMES
User feedback ->
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)
EVALUATE
Includes all the info
needed to understand
and use the term in
context
Accommodates
workflow
Easy to use
Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.
Goal: accommodates workflow + easy to use = replace the manual spreadsheet flow they’re accustom to
Metric Owners validating the workflow
18. www.SkyeSant.com
Extend + Iterate
KPI Dictionary
Template Library
Training/ rollout
Extend functionality:
‣Responsive design
(mobile)
‣Notification Page
‣Notification settings
‣Administration Settings
‣Link Management
‣Activity Log
‣Deprecate bulk import
EXTEND
Expand functionality ->
EVALUATE
Expand the KPI Dictionary into a succinct yet complete ‘single source of truth’ for the company’s terms & definitions.
“Where else could we do this?”
Adobe XD Template Library
19. www.SkyeSant.com
Thank you
Work with people
doing their best work,
striving toward the
user-centered goal of
creating meaningful
and useful products
for customers and
colleagues
THE DREAM:
23. www.SkyeSant.com
Creating Digital Tools
Discover
Design & Build
Evaluate
+ Extend & Iterate
Communication
Change Management
+
‣ROLE: A trusted user-centered design lead who evangelizes and applies UX best
practices to the 3 core aspects of product design (system design, process design,
and interface design) in order to make usable, enjoyable digital products
25. www.SkyeSant.com
UX Sprint Schedule
START 2 wk dev sprint
UX processes for each sprint
n+2 ahead (2-6 weeks
ahead)
Initial comps due to the PO/
PM for sprint n+2 ahead (4
weeks ahead)
Grooming +
Story Time
Planning 2 WEEK SPRINT Demo + Retro
Assist PM/ business with
research activities n+4 sprints
ahead (6+ weeks ahead)