Mark Lubeck's work samples. A brief overview of Mark's design process and some samples from Mark's 17 years of User Centered Design.

1. Mark Lubeck
17 years of user centered design
Process and Results
Simplify users’ lives

2. Work history
Network security 2 years
Storage networks 6 years
Remote PC repair 2 years
Instructor / consultant 5 years
Internet encryption 2 years
2

3. User centered design process
1. User research
2. User types and personas
3. User stories and storyboards
4. Technology research
5. Task analysis and user flows
6. Wireframes and informal usability testing
7. Prototypes and formal usability testing
8. Specifications and collaboration with engineering & QA.
3
The next pages sample main points in my process

4. Research methods
4
There is nothing like being there
1. Ethnographic Studies
Contextual inquiry
2. Interviews & Observations
Their site
My site
Telephone
Laboratory
3. Usability Testing
Released Apps & Web Sites
Alpha & Beta Testing
Wireframes & Prototypes
Paper
PowerPoint
Visio
Web conference
One-on-one
Small groups
HTML
Axure
Balsamiq
Mouse Infestation
Charlotte, NC - 911
Fallbrook, CA- 911
Newport Beach, CA- 911
Keyboard

5. Annual user advisory board meetings
1. Real users of different types & companies
2. We LISTEN to THEM
3. They share their pain
4. They ask for features & enhancements
5. Engineering estimates development costs
6. Users “spend” their inadequate budgets
7. Valuable insights drive design choices
8. A day of hard work surrounded by food & fun
9. Build relationships
10. Consult with them throughout the year
5

6. User types and personas
6
Cisco
1. Security Admin
2. Security Technician
3. Cisco Installer
4. VAR Sales Staff
5. VAR Service Staff
6. Small Office Staff
McDATA
7. SAN Administrator
8. SAN Technician
9. Storage Admin
10. Storage Tech
Symantec
11. Web/IT Admin
12. SMB Owner
13. SMB Office Admin
SupportSoft
14. Repair Tech
15. Consumer/Employee
16. Retail Associate
17. Tech Team Lead
18. Tech Manager
19. System Admin
20. Customer’s Admin
21. Marketing
22. Executive
Human Factors Intl.
23. 23 other user types
AdminExecutive Marketing
Repair Tech Consumer Retail Staff
System Admin Tech Manager Tech Team Lead

7. Generate user stories and storyboards
Creating user stories and storyboards helps all
stakeholders, inside and outside the design
team, reach a consensus about the real world
conditions they are designing for.
They provide a common and practical
understanding of how users will use the
feature, in the context of their whole job.
They are tools to guide the ongoing design
decision process.
7

8. Technologies studied
1. Network Security
2. Firewalls
3. Encryption
4. Data Networks
5. Storage Management
6. Zoning
7. Fibre Channel
8. iSCSI
9. TCP/IP
10. Network Discovery
8
To best serve users, I study the capabilities of the application platform and the
managed technology. Know how it works & what it can do.
11. SNMP
12. Switching
13. Routing
14. Load Balancing
15. Host Bus Adapters
16. Web platforms
17. HTML, CSS, JavaScript
18. Windows platforms
19. Policy Engines
20. …

9. Task analysis & allocation
9
Current Task Flow
1. Discover
2. Document
3. Analyze
New Task Flow
1. Simplify
2. Assign tasks to the system
3. Confirm with users & stakeholders

10. Wireframes
10
Validate and iterate with users and stakeholders

11. Interactive prototypes
11
Validate and iterate with users and stakeholders

12. Illustrated UI specifications
12
Work with Engineering & QA on implementation & testing.
End of introduction to my UCD process samples

13. Work samples
1. Improve mobile UX
2. Display throughput on the network map
3. Manage various storage brands
4. Plan security management
5. Repair enterprise & consumer PCs remotely
6. Wire a giant switch guided by an audio interface
7. Cross-sell to SSL managers on web applications
13
The next pages show small samples from these projects:

14. Sample project # 1
Heuristic review of streaming mobile app
1. Business Goals
1. Fundraiser for a non-profit foundation
2. Grow adoption of free trial & paid conversion
2. Market Segment
Lovers of Indian classical music and meditators
3. Technologies
Streaming music and lectures for mobile devices
14

15. Avoid shocking the trial user
Problem: I thought I was
signing up for a 14-day FREE
trial. But no mention of that
here at the top of the page.
And they want my credit card!
Recommendation: Consider
doing at the top what we do
below. Make it clear that the
trial is FREE while at the same
time letting the user know
what the eventual cost might
be.

16. If only one item in sub-menu, go direct to content.
Problem: We make the user process unnecessary screens and take
unnecessary actions when there is only one choice on the sub-menu.
Recommendation: Save users a step by not showing a sub-menu with only one
choice: i.e., when users select Rain Melody on the main menu, display the last
screen and play the music.
16

17. Encourage exploration. Keep the music playing.
Problem: Our users want to hear the music or lecture, but we stop the music if
the user starts to browse the Playlist.
Recommendation: Only stop the music when another sound is selected.
17

18. Videos need an audio-only option.
Problem1: The lectures’ contents are
excellent but a small talking head is not very
interesting.
Problem 2: When the video is running all the
controls can get hit inadvertently,
interrupting the talk. Yet, switching off the
video turns off the audio as well.
Recommendation: Do for video what we do
for audio. Let the user turn off the screen
and continue to listen to the sound track.
This makes the content useful and available
in many more user contexts.
18End of mobile app review samples

19. Sample project #2
Display network performance
1. Business Goals
a. Increase the value of the network map
b. Make the map a stronger sales differentiator
2. Market Segment
Enterprise and mid-market data centers
3. Technologies
Fibre channel port performance discovery
Home grown Java map graphics
4. Challenges
Present a lot of data without cluttering the map
19

20. Display throughput on the network map
1. Our network map was
very popular with our
customers.
2. Easy to scan.
3. Mouse over highlighted
device-to-device
connections
4. David Hamilton, Louis
Arquie, and I researched
all the dimensions we
could use to indicate
how busy each
connection is.
20

21. Monitor traffic with animated “Marching Ants”
We determined that an animated display
that varied the following properties
could enable users to quickly see where
the hot and cold spots were:
1. Line Color
2. Segment length
3. Segment speed
4. Separate line for each direction
21
Patent Awarded

22. Port Performance View
1. This animated
performance display
became a top sales
differentiator. It was
the most commonly
purchased module.
2. It enabled users to
graphically explain
their network
functions to
executives and
customers.
3. It aided in network
troubleshooting and
re-design.
22

23. Performance graphs
1. Right-click on a connection
or device to drill-down to
performance data
2. Data on all switch ports
3. Select a historical period
and see the histogram for
the period
4. Drill down to individual
LUN performance.
23
Device Port Performance
Historical & Histogram
Designed in collaboration with David Hamilton
LUN Performance

24. iSCSI for NetApp required a new solution
24
My solution
Port performance arrows
1. The NetApp team loved the
“Marching Ants” display of fibre
channel traffic.
a. We discover and display every device,
port, link and all throughput.
2. However, marching ants would be
misleading in the iSCSI context.
a. We could not discover and display the
traffic on every connection.

25. Display congestion, a performance nightmare
1. When the network goes
bump in the night, how
are you going to know
what happened?
2. Was it network
congestion?
3. My congestion display
design let admins trace
back behavior over time
to troubleshoot the
congestion:
a. Type
b. Cause
c. Historical progress
25End of network performance samples

26. Sample project # 3
Multi-brand storage configuration
1. Business Goal
Build product value by managing many storage brands
2. Market Segment
Enterprise and mid-market data centers
3. Technologies
Storage vendor APIs
4. Challenges
Each brand has its own configuration requirements
26

27. Discovery process & results
Team Lead
I lead the discovery process with our new team of:
1 Product Manager
4 Developers
1 Tester
1 Writer
Findings
1. Our customers all own and configure 2 or 3 brands of storage.
2. Some tasks are universal across brands.
3. Each vendor has some unique requirements.
4. The different user experiences slow users down and lead to mistakes.
5. Verifying host / LUN connectivity is difficult.
27

28. Reuse an existing design pattern
1. Zoning already
implemented an
“accumulator” design for
complex multi-assignment.
2. Fiber channel Zoning is a
crucial & frequent task.
3. Our expert users use our
tool for a few hours a day.
28
Help users & developers with existing design patterns.
Zoning X

29. EMC, HDS, IBM & then NetApp
LUN Management
1. Select a storage device.
2. View storage LUNs & free
space by whole device or
internal array.
3. See hosts, host ports & their
LUN assignments.
4. Create & assign LUNs to
hosts.
Results
1. A very efficient tool.
2. Originally built for EMC, IBM
& HDS devices.
3. Became a “Must Have” for
NetApp.
29
This accumulator pattern fit the storage flow well.

30. Innovative navigation saves steps
Move a LUN to a host port
1. This is a universal task
across vendors.
2. A customized dialog
appears to set vendor-
specific settings.
3. OK button completes the
fully configured LUN
assignment.
Results
We dramatically reduced
the number of steps
required to complete the
task.
30
I added one major modification.

31. Troubleshoot host / LUN connectivity
Task
1. Confirm that a host can
actually see its LUNs.
2. Find LUNs that are seen by
the wrong hosts.
3. Determine the causes.
Solution
1. We already gather data from
hosts, switches & storage
arrays.
2. Display the relevant
configurations in one table.
3. Highlight “Errors”.
Results
I simplified a complex task and
earned a valuable patent.
31
A difficult task requiring storage, switch and host tools
Patent Awarded

32. Customer research revealed a special need
1. Display data paths within an IBM ESS.
2. Display existing LUN assignments for up to 3 hosts.
3. Make additional LUN assignments given internal:
a. Data traffic paths
b. Distribution of LUNs across all drives
32
One big customer had unique requirements

33. $1,000,000+ sale to a very happy customer
Animated Internal View
1. Displays array utilization.
2. Displays up to 3 hosts at a
time, the distribution of their
LUNs across internal arrays,
and their redundant data
paths.
3. Hover over a host to highlight
its arrays & data paths.
4. Create & assign LUNs from
specific arrays.
Results
I completely nailed our
customer’s requirements and
secured our first $Million+ sale.
33End of manage storage samples
Realized their dream of a highly efficient tool.

34. Sample project # 4
Security configuration planning
1. Business Goal
Reduce customer TCO by integrating with or replacing their
spreadsheet based planning and replication processes
2. Market Segment
Enterprise security departments
3. Technologies
Security device CLIs
Security Management applications
Excel spreadsheets
4. Challenges
Part of project requires coordination across BUs
34
Cisco Security Manager
Adaptive Security Device Manager

35. Planning is the real work!
User Research
Major banks’ data & security center admins & techs
1. Observed them using our software
2. One-on-one video recorded interviews
Findings
1. Users plan all their changes in controlled, peer-reviewed spreadsheets or tables
2. Plans must then be blessed by the Senior Admin
3. Only then are changes manually entered into our configuration tool!
4. Many companies place the same importance on planning work done in Excel
Recommendation
Support copy & paste from Excel & HTML tables into our tool!
35

36. New service integration feature
1. User would have to
make 10 entries for
each of 50 to 100
service pairs
2. Plan & configure
500 to 1,000 total
user entries
3. Most users would
generate the entries
in Excel and
manually enter in
our tool or export &
import a file.
36
If I designed a screen to just mirror the CLI (command line interface)

37. Improvement 1: Auto-generate to speed the flow
System auto-generates 11 values
2 Service-classes
2 Named interfaces
1 Service group name
2 Description (Optional)
2 Interface enabled states*
2 Interface numbers*
*Hidden from user: Only needed for back end.
37
User makes 1 required & 1 optional entry
*

38. Improvement 2: Bulk auto-generate
1. Copy & paste a whole set of value pairs from Excel
into our input table.
2. Faster and / or more accurate than manual data
entry or export / import.
Next Steps
1. Work with PM and Engineering to assess
a. Degree of usability improvement
b. Expected adoption rate
c. Competitive advantage
d. Cost of development & testing
2. Decide if the benefits justify the costs
38

39. Image management for bulk configuration
1. The design process for a suite of
new application designs.
2. I collaborated with the Bangalore
engineering team while on site.
3. We worked with all stakeholders to
evolve the design.
4. In this example the user will create,
store, copy, and install bundled
configuration images across
network firewall devices.
39
Planning the roll-out of changes to multiple devices.
Engineering’s 1st design
My more user friendly version
End of plan security samples

40. Project # 5
Remote PC repair via the internet
1. Business Goal
Vast opportunity in direct to consumer and indirect through partners
Build a more efficient infrastructure to reduce cost of sales, diagnostics and repairs
2. Market Segment
Consumers, Retail partners, Online partners
3. Technologies
Direct connection between tech and customer: repair will not depend on central server
SaaS infrastructure for business processes
4. Challenges
Many systems must be redesigned, built and integrated
Repair speed, accuracy and success rates must improve dramatically to meet the price point
40

41. Goal: Service infrastructure for 9 personas
41
Consumer
Web Chat
Support.com Website
Offline Voice
Repair Tools
Self-Service
Retail Associate
Retail Order
Order Tracking
Admin
Vendor Website
Executive Marketing System Admin Tech Manager Tech Team Lead
Executive
Marketing
Order Tracking
Retail Website
Support.com
Vendor
Admin
Executive
Marketing
Retailer
Repair Tech
Tickets

42. User research
Retail
Hotel Chain
Telecom
Call center
Bank
Internet Service Provider
42
On-site visits, observations and 1-on-1 interviews
Support.com

43. Discovering the new flow
43
A

44. Heuristic review of the new flow on legacy tools
Issues
1. Very slow response time.
2. Repair tech must visit up to 14
screens to finish a call.
3. Some views contain only 1
useful control or data item.
4. All contain some useless data
or controls.
5. Many require scrolling to
important data & controls.
6. If the user fails to wait for the
page to fully paint the record
“breaks”, requiring much time
and effort to recover.
44

45. New web tool design
Solution
1. One-page technician workspace
2. Sales, tickets & connections
3. The technician does not have to wait for multiple
screens to load
4. The controls are laid out in task flow order,
saving time and mental work
Results
1. Dramatic rise in productivity
2. Office Depot became our largest single revenue
stream
3. Office Depot success would not have been
possible without this more efficient tool!
Visio prototype that was fully realized in production.
Collaboration of Mark Lubeck & Subroto Bagh.
45

46. Collaborate with Bangalore on next product
46
Daily wireframes exchanged with notes & suggestions Daily notes

47. Next generation tech UI design
Increased integration
1. Sell, ticket, connect,
diagnose & repair
2. Direct input into the
ticketing system
without leaving the
remote screen
3. Highly efficient repair
environment.
4. Up to 8 simultaneous
remote sessions
Mark designed and prototyped in
collaboration with Bangalore & then
Subroto Bagh photoshopped.
47
Ticketing & multi-session, remote diagnostics & repair.

48. Remote screen view
Results
Productivity again
jumps dramatically.
“Absolutely the best
repair tools I have
ever used with any
company I have ever
worked for!”
Experienced Support.com technician
months after these tools were
installed.
Mark designed and prototyped in
collaboration with Bangalore & then
Subroto Bagh photoshopped.
48
Still supports ticket updates, chat and tool access.

49. Service Delivery Management System
Comprehensive work order
fulfillment and tracking
1. Work Order Status page
which surfaces all open work
orders for a particular store
location
2. Work Order Request page
which allows an Associate to
request fulfillment of a
purchased SKU
3. Work Order Details page
which itemizes both work
order and SKU-level details
for each customer
4. With this tool Office Depot
became our biggest customer,
out-performing all of our
Fortune 500 customers.
49

50. SaaS infrastructure designs
Add a New Partner
1. Service Plan
2. Contact Info
3. Credentials
4. URL
5. Branding
6. Languages
7. Toolsets
50

51. Collaboration: UX + Art + Documentation
Iteration issues
1. Passive voice.
2. Distinguish status with
icons?
3. Single line headers?
4. Readability of white on
red background.
Next iteration issues
1. Lost color coding and
order of summary results.
2. Still passive voice!
51End of remote PC repair samples

52. Project # 6
Handheld audio interface
1. Business Goals
Supply the market demand for larger switches at lower cost
Wire many modules together into a single, large director
2. Market Segment
Enterprise data center
3. Technologies
Precision flexible cables
New firmware design
Early mobile devices
4. Challenges
Narrow, noisy, poorly lit machine room aisles and racks
“Too many” cables and cable types
52

53. The big switch challenge
Tasks
1. Wire a “soft backplane”
a. 30 modules of 4 types
b. 280 cables of 8 types
2. Test & troubleshoot
Users
1. Sales & service engineers
2. Factory workers
Environments
1. Data center rack aisle
2. Factory floor
53

54. First engineering UX
1. An un-usable scrolling list with
irrelevant data.
2. Useful for engineering planning
but not for wiring.
3. The data center rack aisle
environment made a scrolling list
on a laptop impractical.
4. The user had to access both the
front and the back of the module
stack.
54
Mockup resembles the actual interface.

55. Hands-free audio UX
1. Reworked the task flow with the
firmware team
2. Simplified the cabling pattern
3. Determined optimal feedback
a. What to tell users
b. When to tell them
4. Handheld device connected to controller
module
5. The graphical user interface was the least
valuable part of the solution & would
mostly be ignored!
55
5. Audio instructions and tones in
headphones
a. One element at a time
b. In context
c. Cable type & length
d. First module and port ID
e. Second module and port ID
f. Blink module port LEDs
g. Success / Failure tones and lights
h. Auto-advance
Based on field research
End of Audio interface samples

56. Project #7
Web cross-sell to SSL managers
1. Business Goals
a. Increase SSL and other product sales
b. Introduce other products to SSL customers
2. Market Segment
Retail / SMB SSL managers
3. Technologies
HTML SSL management tool and retail website
4. Challenges
a. Users fear cross-sell distraction might lead to making technical mistakes
b. Banner blindness
56

57. User testing confirms banner blindness
1. Early user testing in this and other
projects showed that technical users are
focused on their primary task.
2. If anything subconsciously looks like an
ad, users gate it out of their attention.
They just do not see it.
3. Users do not attend to anything that
could be a distraction and lead them into
a technical error. The cost of past
mistakes have been painful.
57
57
2
1

58. Product comparison page
Research Findings
Participants focused on differentiators across the products, not on commonalities
Showing that there is a difference in the feature attracts more attention
Recommendations
Vary cross-sell offers by certificate type
1. Different offers for different certificate types: Vary product offerings or numbers of
licenses
2. A tactical blank space can draw more attention than content: Do not fill all the cells in a
table row.
58

59. Options page
Findings
Incorporating cross-sell information into the
right places in a certificate purchase flow is
more effective in getting attention than
displaying outside of the flow.
The brief inline option was not disruptive to
the customer experience.
Recommendations
1. At the bottom of the Options page,
present the cross-sell offer as another
product option.
2. The user cannot deselect.
3. Clicking Learn more will expand within
the page with a short description and
no external link.
59

60. Close the sale on the download site’s last page
Research Results
Participants were most receptive to the
cross-sell offer after they installed and
checked their certificate and felt they had
met their primary goal.
Recommendations
1. Redesign last page of the certificate
download site.
2. Make it clear they are done with SSL.
3. Add the cross-sell offer.
4. Link takes them into the product offer
flow.
60End of web cross-sell samples

61. Thank You!
Mark Lubeck MRL1756@yahoo.com
408-893-3516
7/19/2015
61