Designing a Sustainable Enterprise UX Process

BUILDING A SUSTAINABLE ENTERPRISE UX PROCESS

Mark Figueiredo Sr. User Experience DesignerT. Rowe PriceNovember 16, 2016

22

T Rowe Price: History

In 1937, Thomas Rowe Price Jr. started an asset management firm focused on delivering global investment management excellence with one purpose:

“To help our clients invest confidently to create secure financial futures”

33

T Rowe Price: History

The company offers related services for individuals, advisors, institutions, financial intermediaries, and retirement plan sponsors.

v

The values of our founder guide our success and shape our culture.

T. ROWE PRICEIN-HOUSE UX TEAM

▪ History

▪ Team Members

▪ Pros and Cons

55

UX Team Members

2012 2016

Sr. UX Designers

UX/UI designers

Front End/UI Unicorn

Content Strategist

Lead Managers

Created organically out of a need to starting thinking about the Who, What, and Why on projects.

10+x2

66

UX Team Business Partners

Individual Investors

Financial Advisors

Financial Intermediaries

Global Investment

Services

Retirement Plan Services

77

UX Team Vision

To drive the design and experience for the company’s web and digital properties▪ Small incremental change over the years

▪ We are a shared service inside a business for financial services

88

Pros and Cons of an Internal UX Team

PROS▪ You know your product best

▪ You know your business and how it works

▪ You have direct access to users and user proxies

▪ Direct access to Voice of Customer data and feedback

▪ Rapport with the business partners and stakeholders

▪ Continuity with platforms

99


CONSNot all Enterprise UX teams are structured as a cost center within the business.

▪ Seen as “free”

▪ Mentality that a paid agency has perceived value because it equates to money

▪ We paid for it, therefore it’s automatically good

1010


Two things that you can do as an internal group that can help make a difference:

1. Be experts within your process

2. Share metrics based off of your work

– You may need to pull in help from other groups

▪ Analytics team

▪ Account Management

BUILDING A SUSTAINABLE UX PROCESS

▪ Defining UX

▪ Finding the “perfect” process

▪ Building your own house

DEFINING UX TO YOUR BUSINESS PARTNERS

13

User Experience Design is the practice of integrating user-centered design methods, collecting, interpreting and applying meticulous user research, process management for testing elements of a system independently in gradually increasing levels of fidelity, and integrating multiple symbolic systems (languages) to affect and influence users of an interactive system in a predictable and measured way, according to the user’s own criteria for success and happiness.

- uxdesign.com/ux-defined

1414

Defining UX

“The analogy I use is that I’m like an architect for houses. I design the structure of the house, the three rooms, and where the kitchen is so that it’s livable.” – Patrick Neeman, Six Things Misunderstood About User Experience Designers

FINDING THE “PERFECT” PROCESS

1616

Finding the “Perfect” Process

Always works perfectly, all of the time,in every situation.

Everyone accepts and respects the process

1717

Finding the “Perfect” Process

THERE IS NO SUCH THING AS A PERFECT UX PROCESS

3 things needed for a solid foundation

1. It needs to be flexible

2. Meets the specific requirements of the team

3. The whole team needs to agree on

BUILDING OUR HOUSE

▪ Planning

▪ The Basics

▪ Deep Dive

1919

Building Our House: Planning

Easy to understand &

repeatable

Identify key items to use

Educate business partners

WHAT ARE YOUR GOALS AS A TEAM?

2020


UNDERSTAND YOUR ENVIRONMENT

Where do we live?

LargeEnterprise

A lot of silos

MBAFocused

2121


1. Conduct stakeholder interviews to learn about the business’ goals, vision, and direction

2. Share your joint group knowledge about the business units

– Past experiences

– Current relationships

– Familiarity with user experience design

These 1-on-1 conversations show your interest and dedication in providing the best outcome for their business

THE BASICS FOR ANY UX PROCESS

2323

A Sustainable UX Process

▪ Discovery and scoping

▪ Information architecture

▪ Design and content creation

▪ Prototyping

▪ Usability testing

▪ Hand-off and development

THE BASICS

2424

2525

It’s a helpful reminder to the seasoned team members

Having this process will help onboard new team members


The Basics




▪ Prototyping



2626

Developers

– What technology is being used

– What modules or integration already exists

Stakeholders

– Business insights

Legal

– Are there any new compliance or fiduciary rules we need to be aware of?


The Basics




▪ Prototyping



INCLUSION OF OTHER GROUPS

DISCOVERYAND SCOPING

2828

▪ Competitor Analysis

▪ Stakeholder Interviews

▪ Personas

▪ User Stories

▪ Journey Maps

▪ DoGo Mapping

▪ Content Audit

▪ Content Analysis

Discovery and Scoping

These tools are some that can be used in a discovery phase

29


USER JOURNEY

▪ Users Objectives

▪ What are they doing?

▪ What are they thinking?

▪ What are they feeling?

▪ Identify Opportunity

30

DoGo MAPPING

Lightweight tool that provides a high-level understanding of the information architecture of a site

Provides perspective on the overall system combined with the functionality of each page

It blends the overall view of a site map with the detail of a flowchart in order to visualize how a system fits together


http://uxpamagazine.org/creating-a-dogo-map/

31


3232


Members Time

Competitor Analysis UX Designers 1 day

Stakeholder Interviews Team 2-3 days

User / Proxy Interviews Team 2-3 days

Personas UX Designers 1-2 days

User Stories Team 2-3 days

Journey Maps Team 3-4 days

DoGo Mapping Team 2-3 Days

33

Planning for the creation, aggregation, delivery, and useful governance of useful, usable, and appropriate content in an experience.

- Margot Bloomstein, Appropriate Inc

Content Strategy

3434

Content Strategy

Content Strategist

Copywriter

UX Designer UI Designer

3535

▪ Competitor Analysis

▪ Stakeholder Interviews

▪ Personas

▪ User Stories

▪ Journey Maps

▪ DoGo Mapping

▪ Content Audit

▪ Content Analysis


These tool box items are some that can be used in a discovery phase.

3636

Content Audit

▪ A full accounting of existing content. Requires reviewing every page/screen and noting all content elements in a spreadsheet. This artifact is referred to as content inventory.

▪ Can be approached in both quantitative and qualitative ways.

▪ Timing depends on the number of pages or screens that need to be audited.

– Up to 50 pages/screens: 20 hours

– 50-100 pages/screens 40 hours

– 100+ pages/screens: 40+ hours


Content Analysis

▪ Once a content audit is complete and the content inventory created, an analysis of all existing content elements can occur.

▪ Content is analyzed for accuracy, usefulness to the user, and relevancy to current business goals.

▪ Timing depends on the amount of content that needs to be analyzed.

– Up to 50 pages/screens: 5 hours

– 50-100 pages/screens: 10 hours

– 100+ pages/screens: 10+ hours

3737


WHAT IS THE BARE MINIMUM?

CompetitorAnalysis

Personas Content Audit /Inventory

What’s happening in the market

What work has already been done

Who is your user?

What do they need from you?

What content exists for you to leverage?

What content does your user need to best

understand what you are telling them?

INFORMATION ARCHITECTURE

3939

▪ Card sorting

▪ Site Maps

▪ SEO

▪ Wireframes

▪ Content Page Tables

Information Architecture

These tools are some that can be used in a IA phase.

40


CARD SORTING

Topics and navigation organization

Mostly done with UX designers and content strategist

We have also used stakeholders to help validate our findings or recommendations

41


CARD SORTING

Enterprise Creative recently facilitated seven card sorting sessions with participants from 6 different groups within the organization

The open card sort involved participants categorizing and sorting a variety of provided topics.

42


CARD SORTING

40 topics were included

Each topic represented content featured on multiple levels of an existing website

Prep time1 week

Testing Time 90-minutes sessions4 days

Post Testing3 days analyze data

43


SITEMAP

Transaction flows

Microsites

4444

PAGE TABLES

Outlines content requirements for a specific page, screen or content module.

Includes objective, source content, content recommendations, hierarchy and SEO recommendations.

Provides direction for content creation and delivery.

Used to develop wireframes.

1 page table: 1 hour


4545

WIREFRAMES

Most wireframes start as sketches, usually from white boarding sessions

Data from discovery is taken broken down and ideas are generated

Team Members

UX DesignerContent StrategyUI Designer


4646

WIREFRAMES

Taking our sketches into UXPin

Using in-app and team libraries to build wireframes quickly

In-app collaboration point with writers

▪ Headlines

▪ Labels

▪ Content Callout


https://www.uxpin.com/



4747

WIREFRAMES

Always present wireframes back to stakeholders

Validates that you have all the information and gives the team the chance to describe the vision and explain why certain decisions were made


4848

PROTOTYPING INTERACTIVE WIREFRAMES

To uncover requirements previously defined during the kickoff

Stakeholder gets a feel for the overall experience

Transactional flows are tested and reviewed by the team and stakeholders

Uncovers any unmet requirements or issues in the experience

Gives the opportunity to catch any mistakes before it moves into development


DESIGN AND COPY

50

Design and Copy

1. Designers designed blindly without context

2. Writers developed copy without knowing the environment

OUR PAST PROCESS

51

Design and Copy

1 2

▪ Designer creates wireframe in design application from sketches

▪ Writer creates content in a word document

▪ Writer emails copy doc to the designer

▪ Designer copy and pastes copy into design and updates design depending on length

▪ Designer makes a PDF and emails back to writer

▪ Writer makes edits and comments in PDF doc

▪ Emails back to design

▪ Copy and pastes edits into design

▪ Creates PDF for final approvals

PAST DESIGN & COPY PROCESS

52

Design and Copy

1

▪ Designer creates wireframe in UXPin with content blocks

▪ Writer creates content in a word document

▪ Writer flows content to UXPin in the design

▪ Designer and writer make updates as needed collaboratively in UXPin using team comments

CURRENT DESIGN & COPY PROCESS




53

Created so each designer, writer, project manager, and stakeholder understands how we will work together

Gives a step-by-step explanation on hand-off and the approval process

Design and Copy

5454

Design and Copy

Face-to-face presentation

Email PDF’s for multiple stakeholders

Multiple feedback PDF’s

PM consolidates feedback

Writer updates copy, sends to the designer

Designer updates design as well as copy

Re-packages documents and resends

PAST REVIEW & APPROVAL PROCESS

5555

Design and Copy

Face-to-face presentation

▪ Quick UXPin Comment demo

PM sends UXPin share link to stakeholders

Stakeholders make collaborative comments in UXPin

PM reviews and assigns comments to team members

Each member makes the updates and resolve the comments

Resubmission is sent or represented if design is drastically altered

NEW REVIEW & APPROVAL PROCESS







5656

Design and Copy

Importance of Face-to-face presentations

– Help build rapport

– Discuss design decisions and testing results

– Answer questions

– Educate stakeholders on the review process

REVIEW AND APPROVAL PROCESS

PROTOTYPING

58

Prototyping

Tangibleexamples

ShowFunctionality

Recreate theenvironment

5959

BUTTON STYLES

Prototyping

▪ Tangible examples

▪ Shows functionality

▪ Recreate the environment

6060

FUNCTIONALITY AND BEHAVIOR

Prototyping




6161

RECREATE THE ENVIRONMENT

Prototyping




http://www.uxpin.com

TESTING

63

Testing

▪ Saves time on the back end by testing and validating any hypothesis and assumptions you may have

▪ Aside from early discovery elements, testing is one of the first things dropped or removed from a key date schedule

64

Steve Krug“Rocket Surgery Made Easy”

Testing

I will now saw my [lovely] assistant in halfWhat a do-it-yourself test looks like

Recruit loosely and grade on a curveWho to test with and how to find them

6565

Testing

Moderated Testing

▪ 10-15 users

TYPES OF TESTING

Unmoderated Testing

▪ 30+ users

30% 70%

6666

Testing

Hallway testing

– Project Stakeholders

– Team members

– Random person

Hire an outside company

– They find your exact user

– They perform the testing

– They provide the documentation and results

RECRUITING USERS

6767

Testing

▪ Identify what you want to test

▪ Write out your tasks

▪ Test your own tasks

▪ Selecting demographics

▪ If your testing client allows for pre-screening, create them to best match the personas you build

▪ Review the results

▪ Write a summary document

BUILDING A TEST

68

▪ Very important artifact from testing

▪ Stakeholders are not always interested in the whole test, so you need to break it down for them

▪ Briefly explain the tasks and report the findings

▪ Include quotes from users emphasize your points

▪ Write a long form document

Testing: Summary Doc

FINAL DESIGNAND HAND OFF

7070

The Hand Off

Common term referring to the preparation of final design and copy files and “handing off” to the development team

3 ways this can go down

1. The Perfect Road

▪ Talking multiple times a day, open to all feedback

2. Horrible Hand off

▪ Throwing things over the fence with no communication

3. Reality

▪ Open communication

▪ You may need to initiate the conversation

71

The Hand Off

1 2 3

DESIGNER▪ Redlines + specs

– UXPin Spec Mode

▪ Design assets

– PSD’s– Images

COPY▪ Final copy doc

▪ SEO

DEV▪ Verify developer

resources

▪ Verify the correct communication channels

7272

UXPIN SPEC MODE

The Hand Off

▪ Keeps the designers on point and allows us to double check our work before sending it off for development

▪ Some real opportunity to improve our communication with the developers

Try it for free



DEV BUILD

74

QA and Internal Review– If a prototype has been created, this

is a great time for comparison and conversation

User Acceptance Testing– Identify team roles

▪ Designer – Layout, Branding

▪ UX – Experience

▪ Writers – Content

▪ PM/AM - Requirements

Launch

Post Launch Analysis– Quick Fixes

– Validation

– Day 2 updates

Dev Build

7575

Dev Build

POST MORTEM MEETING

1. Full team meets to discuss end to end process

▪ What worked well, what didn’t

2. How did each stage go?

▪ How can we be more efficient?

3. How was the process?

▪ What needs to be changed or altered?

WHAT WE HAVE LEARNED

7777

What We Have Learned

This current process has evolved twice since the start of 2016

– Jan 2016 – The introduction of UXPin to our flow and process

– July 2016 – Stakeholder approval process

Solicit feedback from business partners and stakeholders

TRY, TRY, TRY, AND THEN TRY AGAIN


7878


Assign 1 lead person to be in charge of the process document

– Too many cooks in the kitchen is a recipe for failure

Team members can bring topics up to assign lead

It’s the owners responsibility to bring up new concerns and feedback to the whole group

Lead is responsible for communicating the process to other team members and business partners

HAVE THE RIGHT PEOPLE INVOLVED

7979


▪ Identify test projects

▪ Introduce and explain the process to the entire team

▪ As a team, meet often to discuss how things are going

▪ Play it out and take notes along the way

– Be flexible even during testing

LIKE ANY PRODUCT, YOU NEED TO TEST

80

TEST PROJECTPlan Advisor National Conference

▪ Project with a short timeline

▪ All members were informed about the new process

▪ I walked the Project Managers through the process up front

▪ During the kick-off, I introduced the process to the stakeholders


81

PROJECT FIRSTS

▪ All comments were made in UXPin

▪ Writers input all copy in UXPin themselves and make all updates

▪ Post Mortem identified areas for improvement

– Communication with each other, including PM

– Creating a process for iterations

– We introduced an iteration naming convention





8282


Continue to monitor the process

Quarterly check-in with the team

1st Qtr: Need for more education to business partners

2nd Qtr: Need a UXPin Process

3rd Qtr: Need to focus on developing our Agile UX Process

THINGS WILL START TO FORM A HOLDING PATTERN

8383

About UXPin

Collaborative Design Platform

● Wireframe, prototype, user test, & more.

● Get feedback & co-design in real time.

● Import and scale your design system.

● Generate visual specs for developer handoff.



8484

THANK YOU

OPEN UP FOR YOUR QUESTIONS

8585

Want more advice? Get free ebooks.

https://www.uxpin.com/studio/ebooks/agile-ux-best-practices-ebook-bundle/