My User-Centered Design Process

How I approach designing digital products in an agency setting.

17 min readJan 26, 2017

If you’ve ever had the chance to work with me, you’ve probably heard me reference my process at least once (but probably closer to 1000 times). As someone whose job it’s always been to establish digital practice in agency settings, I believe very strongly in the value of having a predefined process. The benefits of having a formalized process are, quite literally endless, and, honestly, probably a good topic for a future article.

In a single point, I think the strongest case I can make for having a robust predefined process — especially for an agency — is that of business development. Ask any designer who’s ever worked for me what, in my opinion, is the most important skill any designer can foster and they’ll all say the same thing: Communication. The role of a UX Designer in an agency setting is that of a guide. In a world that, frankly, still doesn’t understand UX, having the communication skills to be able to guide a stakeholder — whether internal or external — through the activities and artifacts of the User-Centered Design process are invaluable.

This often sounds intimidating to young designers who might not have the soft skills quite yet to be able to do this. Enter the documented process. If we have a formally predefined (and as I just stated, documented) process, it can do half the lifting for the designer. Which puts clients at ease. Which puts the account department at ease. Which makes all of the resources doing the work a little bit more at peace. People like knowing what they’re jumping into and having that clearly spelled out for them goes a long way towards putting them at ease.

The 4D’s of User-Centered Design.

I’ve had a lot of people asking about my specific process and how I go about implementing it at agencies. Thusly, I’ve decided to write about exactly that. The entirety of my process. In a single post. Implementation is definitely worth speaking to as well, but can be the topic for a whole other post itself (which is the plan!). I will note that this is the process that I have found to be most successful in agency settings. I will not claim it’s perfect, nor will I claim it’s 100% complete. The awesome thing about process is that it evolves with you, and technology. This will change one day, but for now, is what I’ve used for a while now that has lead me to success.

What follows is a brief (relative term) breakdown of my process. I follow the 4D’s of User-Centered Design: Discovery, Definition, Design, Development.

Each ‘D’ is a phase in a semi-linear iterative process that allows us — in an agency setting — to not only guide the client through the life of the project, but also ensure that what we are creating is empirically sound from a UX perspective. Each phase contains its own distinct activities, methodologies, artifacts and deliverables. For the sake of brevity, I will constrain every step to a small summary and definition of who owns said part, and am committing to writing a future individual post for every step in the process with further detail on the whats, whys and hows for each. So, without much further ado — let’s begin!

Discovery

The first part of the project is where we take a deep dive into our clients’ business, long term objectives and customers. The idea here is to learn everything we possibly can and become SME’s in our client’s business in order to ensure that their needs and objectives are not only validated and accounted for, but also weighed evenly against their customers’ needs and objectives.

Discovery Workshop

This is a full day workshop in which we meet the client, go over expectations and the entirety of the process and begin to glean a lot of what follows in the discovery process. Most of what we are establishing in this workshop will serve as either points of accountability (important decisions made as a stakeholder team) or hypotheses that we will then go and validate or disprove throughout the rest of the process.

Situational Analysis

This is an executive summary of the problem that the client is looking for help on. It is the series of factors that have led an organization to our door — it can be one, or many different things. This is usually gleaned from an RFP.

Business Outlook

A quick dive into the clients’ business in order to learn how they function monetarily, in order to ensure that their product meets their business goals. It is composed of three parts:

Business Model
A quick writeup of how the organization currently makes money, or plans to in the future.
Account Management & UX
Business Needs
A quick writeup of the specific needs that an organization requires from its touch points (can be website, app, in-store, event, etc.) in order to continue being profitable and/or solve certain problems the company is facing.
Account Management & UX
Business Objectives
A shorter list of objectives distilled from the business needs that become the pillars for how we will work to solve a problem — we try to limit these to five points for the sake of focus.

Brand Audit

An audit of the current state of an organization’s brand equity in the minds of its customers, as well as outside their target audience. It is a full analysis of their touch points, marketing, brand materials, customer service and experience design in order to identify weaknesses and/or inconsistencies in their ecosystem.

Competitive Analysis

An in-depth analysis of an organization’s position in the marketplace relative to its direct and indirect competitors while working to understand their strategies for the market and identify strengths and opportunities for both competitors and the organization.

1:1 Case Studies

Analogous studies of other brands, in and outside of business category/vertical, that have faced similar business problems to identify methods and actions that can be applied towards creation of a solution for organization’s business problems — ultimately goes to inform our strategy.

Discovery Surveys

Surveys, distributed to customers, employees and internal stakeholders, to help inform and refine understanding of factors (both internal and external) affecting the business to identify quick wins and/or inform strategy to overcome business problems.

Heuristic Analysis

An expert evaluation and review of the effectiveness of a company’s owned properties based on a number of best practices and patterns weighed against business and consumer needs. We often use NNG’s Ten Heuristics of Interface Design as our baseline.

Content Audit

A thorough evaluation, documentation and organization (thematically, informationally and taxonomic) of all content on a company’s owned properties for the purpose of understanding messaging, rethinking information architecture and/or analyzing relational properties for wayfinding and/or navigation, as well as establishing strategy and process for management and governance of all content. This is usually a mammoth spreadsheet.

Analytics Review

A thorough evaluation of current site analytics — this should be more than just a snapshot of spreadsheets, it should be a detailed business intelligence report with actionable insights, gleaned from the data.

Contextual Enquiry

Ideally, this would be an interview, within the given context of our users, in order to understand their thinking and use of the digital product. What if we don’t have access to our users? We use our discovery surveys, heuristic analysis and analytics review to begin to understand how, where, what time, and from what device our users are using our product — all with the understanding that it would still be largely composed of assumptions (ew!). This is not a hard and fast deliverable, but more of a running list of criteria that will come into play when crafting our personas and user journeys.

Tech Assessment

An evaluation and selection of available technologies which support the specified features and functionality in the context of the business and audience requirements. This is also an evaluation of legacy systems that will not be changing in order to understand repercussions on design (constraints).

Personas

A reliable and data-driven representation of a product’s end users that enables the designer to focus on a manageable and memorable cast of characters, instead of focusing on thousands of individuals. They help educate our design decisions through acted out scenarios by looking through the lens of the user at critical points in the interface. We start this process by creating proto-personas with our client in the Discovery Workshop for the sake of having a hypothesis to validate at this point in the process.

User Interviews

Not always a specific deliverable, these interviews are more of a way of hardening and validating the hypotheses that we created during the contextual inquiry (if we didn’t have access to our users) and persona phase. These are crucial for making sure we are not making assumptions when creating the mental models of our users.

User Scenarios & Flows (current state)

At this point in the process, this serves simply as an evaluation — based largely off of the persona and contextual inquiry work that has been done up until this point, of the path the end-users take throughout the property in order to aid us in understanding where the interface needs the most amount of work or where the most crucial points in the flows of the interface lie.

Scope Build

Arguably the most important part of the process, this is where we distill everything we’ve learned and provide estimates (accounting for further unknowns) for the client, in order for all stakeholders to understand level of effort and begin to strategize a release cycle roadmap.

SOW
The Statement of Work.
Account Management (aided by all SMEs)
Cost Estimates
Estimates on pricing — line by line given each resource involved in the project, which should be billed at their own individual rates.
Account Management (aided by all SMEs)
Timing/Plan
Timelines and the projected project plan based off of the current “knowns,” but accounting for future “unknowns”.
Account Management (aided by all SMEs)

Experience Outline

A single deck that tries to paint the high-level picture of what we’ve discovered up until this point. This serves as the ultimate deliverable for the client. Contains all of the artifacts below.

Executive Summary
A quick recap of discovery workshop and all parties involved and a brief look into the most important parts of all of the artifacts listed below.
Business Outlook
All artifacts listed under Business Outlook section above.
Users/Personas
Our fully fleshed out persona artifact.
KPI’s (Key Performance Indicators)
Measurable (quantifiably) metrics for which our company’s performance will be evaluated — these must be in service of the 5 Business Objectives identified in the Business Outlook. These should typically be uncovered in Discovery Workshop.
Analogous/Competitor Analysis
All artifacts from the Competitive Analysis and 1:1 Case Study sections listed above.
Experiences We Like
A quick recap at some experiences identified in discovery workshop brought up by both client and firm that may have analogous/favorable experiences to emulate, and why. Should be covered in the Discovery Workshop.
Important Principles
A list of heuristics and experience design principles that have been identified by the UX Designer that will be important for the project — this should serve as a glossary section.
Features (prioritized)
A prioritized list of high-level features for tech to decompose that has been prioritized by the client in the discovery workshop. Should be covered during the Discovery Workshop.
Team Structure/RACI
A brief intro to the team and a RACI matrix of where each team member will be involved.

Definition

The Definition phase is where we begin to distill all of our findings from the Discovery process and take the actionable steps necessary towards interpreting it into what our product will ultimately be. As well as decomposing all of those in order to gain a more firm understanding of level of effort around anything we suggest.

Business Requirements

Hard and fast needs that the business has identified for the product that will fulfill all business objectives and help move the needle on KPI’s. A level or too deeper in specificity than our Business Needs.

User Surveys

Surveys used to uncover needs/wants/pain points/emotions/motivations from current and potential users from the interface that inform design decisions later on in process. This is the point in the process where we start looking for quantitative data in order to uncover outliers in our user data from the Discovery process.

Experience Mapping

A map of the customer journey from A to Z (A being “I first heard of this company” — Z being “happy and loyal customer”) — largely informed from user surveys and interviews — to identify areas of delight (let’s keep doing this), find areas that cause friction (let’s fix this), and also to understand where the digital product we are creating fits into the sales cycle for the client.

Mental Models

A formal and succinct POV from the end-user/customer’s eyes on how they view the company, the product, and how external factors (i.e. time of day, setting, device, motivations) affect and bias those — mental models help inform our information architecture by understanding how our user would look for and consume information, as well as how they make decisions based on the aforementioned.

Information Architecture

A large-bucket term for a number of methodologies and activities that go into the sorting, bucketing and organizing of information in a product/interface. This ultimately goes on to inform our navigation, wayfinding and overall property map.

Taxonomy & Card Sorting

A methodology/exercise that can be done internally, with stakeholders or with users to try and create relational taxonomies between information, features, content and/or navigation items.

Content Strategy

A number of methodologies, activities and artifacts that come together to form a strategy for content tone, cadence, management, governance, style, and structure for the client — not limited to digital product/interface. Typical artifacts/deliverables include:

Current content inventory & audit
Stakeholder and customer interviews
Marketing personas (these are more demographic related than typical UX personas)
Sales cycle map (list of rules for when to use what content in sales cycle for sales and marketing departments)
Content gap analysis (an evaluation of what the client currently has and what they need to create)
Editorial Calendar (a calendar delineating cadence of new content creation and posting)
Content models (boilerplate templates for what each piece of content should contain)
Style Guide (a rule book that establishes grammar rules, style and tone, and SEO guidelines)
Content Strategist

Sitemap

A map or diagram (from an IA standpoint) of where every page/screen in the digital product lives and how they relate to one another. Every page/screen should be accounted for. This should not necessarily be taken as a representation of navigation structure, although it helps inform it, and can often incorporate it.

User Journeys/Red Routes

A series of hypothetical scenarios of our personas (informed by contextual inquiry) fulfilling a series of tasks and motivations throughout the digital product, and a map to show their routes. They are used for understanding user friction throughout the path, help identify high level functionality (ideal state), help define taxonomy and validate our sitemap and IA.

Screen Maps

A list of all pieces of content that will live on each page within sitemap IA. This should not necessarily be visual in nature, it is just for bucketing information and content within sitemap and helps us understand if all content has been accounted for.

Content Maps

Mapping out our personas, content and sales cycle together on a single grid to help further clarify (after IA work has been completed) where content gaps may still lie within marketing funnel.

Wireframes

A toneless (b/w, no imagery, no real font treatment) visual representation of structure, hierarchy and messaging of each individual page or group of pages (if we are creating templates).

Design Studio

A collaborative design exercise in which the client is brought in to whiteboard/ideate possible solutions — usually used for individual features where complexity is a watchout and is typically used as an effective method to get stakeholder buy-in on our solutions.

User Scenarios & Task Flows (future state)

A number of stories and flows for performing common tasks that the user would normally act out throughout the interface — we can use these in usability testing as scripts for the user testing the interface to complete, at this point in the process.

Lo-Fi Prototype

A non-coded (typically for the sake of budget) prototype that can be executed in a number of different manners meant to illustrate flows for the client or for the sake of usability testing to validate definition process until this point.

Preliminary Usability Testing

Testing the interface with a real-world potential user. This can also be done in a number of ways depending on what specifically is being tested for validation.

Design

This is everyone’s favorite part. Where we make it real. We take everything we learned in the Discovery process and defined in the Definition phase and add all of the finishing touches and flourishes that take our product from effective to delightful.

Art Direction

These are our mood boards. These are three different boards with imagery and words that represent a specific way to express the client’s existing brand standards. If we talk about the ‘Look and Feel,’ this is the feel.

Style Tiles

The hard styles of a website — educated by the decision made on the mood boards in the previous round by the client. These are examples of the hard and fast elements and imagery that will literally be translated into a site. If the Art Direction is the feel, then this would be the look.

Applied Concepts

A comp with the styles of the selected style tile applied to the wireframe of the home page or page containing the largest amount of complexity in order to see if our styles hold up.

Interaction Design

Designing and applying the layer of interactivity into the comps that are created along the way. This usually happens in tandem with the wireframes and is polished during the visual design stages.This is typically described as the way that the interface behaves, feedback, animations, etc. This step should be for the sake of illustrating it for the client or developers.

Visual Design

Creating the fully designed compositions with annotations for how each page (or group of pages) will actually look. These are static and are passed off to the developer as they are finished. Should be completed in a mobile-first fashion unless the project specifically calls for it.

Visual Language Creation

This comes in tandem with visual design and is less of a deliverable and more of a conscious point in the process that we want to ensure isn’t overlooked — this is the development of hard and fast rules for how the development of any elements will be built in the future and how they work together to form a unique expression of the brand.

Copy and/or Image Delivery

Delivery of copy and imagery if we are doing content for the client.

Style Guide Creation

A list of rules for creation of pages and content beyond the scope of the project — to be used by the client, normally. This should not be thought of as purely visual in nature, as it can also include tone, voice, styles and rules for writing content, as well as SEO guidelines.

Pattern Library

A collection of the patterns (I follow atomic design principles in my approach for creation of this) that have been designed and created during the build — it should be reusable snippets of elements and code.

Usability Testing

Same as the last step in the Definition phase, however at this point we will have actual visual and interaction design, and working software to be able to test. This can be done in a number of different ways depending on what we are trying to test for, and will require testing scripts to be created as well.

Develop

The Black Magic

My running joke with my development peers about how it’s all actually built. This needs to be tailored to capabilities of the agency, so it cannot, by very nature, have a predefined process before doing an in-depth analysis of resources and external options.

At this point, it might be tempting to think we are done, but there is actually a 5th, secret D that happens post-Development.

Deployment (Post-Launch)

That’s Deployment and Optimization. I always tell my peers in the agency space that the hardest part about working in an agency setting in the product design space is that of budgets and scoping. UX, by very nature, begs to never truly be done. The idea behind the iterative, Agile approach that most companies would love to be following is that after the product is live, we must be iterating upon it. Using the data we collect about how it’s being used to continue to improve the product and give it a longer life-cycle.

This is not typically the agency way. Most clients come in and have an exact budget and predefined definition of done that they hold quite near and dear to their hearts. If we do our job correctly, the entirety of the Discovery process should be in service of altering this way of thinking. We seek to understand their business as intimately as they do (sometimes more even), in order to garner a level of trust and to be able to get them thinking in Agile ways.

If they understand that we care about their business and have their best interests truly in mind (rather than say, our individual profits), then they allow themselves to start believing in the things we start to suggest along the way, such as roadmaps and release cycles (remember that whole spiel I had about communication at the beginning of this post?), instead of viewing their product as a linear project, with a set end-point.

I won’t go into detail about the types of activities that we can continue to do for our clients, but some of the more typical/standard ones include:

Monitor SEO & Analytics
Monthly Revenue Reporting
Heatmapping
Usability Testing
Content Marketing Strategy
A/B Testing
Lead Generation/PPC
Security Auditing
Case Studies/White Papers
Partner Programs
Go-To-Market Strategies

The Business Know-how

Again, we are able to do all of these types of activities for our clients because we have such an in-depth understanding of their business and, hopefully, have established a rapport with them throughout the process. Not to mention that we have also proved, empirically, that we can provide real, measurable success for the business.

The thing that so few people realize about the UX process is that it doesn’t work in a silo. Everything we do throughout the process is often times more aligned with activities typically understood as business strategy than they are with design. Guiding a client through this is how we begin to help them understand and start pivoting to an operational manner aligned with that line of thinking. Such is the value of UX.

Originally published on my personal site. I’m available for hire right now! If you want to get a hold of me, feel free to contact directly here on medium or drop me a line on my contact page :)