UX Process

Throughout my years as a UX Designer, I've worn many hats; Information Architect, UX Designer, UX Architect, and UI Designer. The easiest way to explain all of the things that I've done is to lay out the full end to end design process.

Kickoff Phase

If one were to reference the concept of the Five Ws, this is the "What" and "Why" phase. What are we building and why? Whether I'm a single consultant, part of a team of consultants, or working full time in a corporation, the process is always the same. What are "we" building? How will "we" be successful? I say "we" versus "I" because the moment I start on a project, I'm a part of a team that consists of designers, developers, content creators, stakeholders, and many others, and I want the project and the company to succeed.

Scope

  • What are the goals of the project?
  • What is the MVP (minimum viable product)? This is the core functionality that must be built for launch.
  • What additional functionality can be added? These are the "nice to haves" that can be backlogged and prioritized so if time permits, they can be worked on. Or they can be scheduled in a phased design/rollout after product launch.
  • What does the current product do well?
  • What doesn't it do well?
  • What is the definition of a successful project? This could be quantifiable goals such as "to increase customer sales by 20%" or abstract as "to make the user happy about our brand."

Schedule

  • Map out milestones and goals throughout the project life cycle.
  • Note any conflicts or mini deadlines, such as getting a phase completed for a trade show reveal.

Risks and Blockers

  • Identify any potential issues that may arise during the project. An example could be implementing a new technology stack or a data center hardware migration.

Discovery & Research Phase

"Who"...who are we designing for? This is the most insightful and rewarding aspects of a project because it requires talking to everyone, both the internal business teams as well as the customers and sometimes potential customers.

Site Architecture

  • Map out the existing site/application.

This gives me an understanding of what the current product is and how it's structured. I'm a fresh set of eyes looking at the product so it's an opportunity to get an unbiased look at what's going on.

I'll note anything that's confusing, such as navigation that's not consistent, internal jargon (acronyms, corporate slang) that slips through the cracks and bubbles up onto the site or application and identify any internal structure or silos (the user doesn't know how your business is structured or run, they see you as one entity).

Stakeholder Interviews

  • What are the goals of the project?
  • What does the current product do well?
  • What doesn't it do well?
  • What's the definition of a successful project?

While these are the same questions asked in the kickoff, on larger projects there can be multiple stakeholders, each with their own agenda or opinion. Asking them individually identifies anything that was missed during the initial meeting. This ensures that each person involved in the decision making process will be happy with the outcome and could also surface any potential conflicts in project direction that could arise in the future.

User Research

In a more formalized UX team, there is usually a UX Researcher or team of UX Researchers involved. When there weren't any available or allocated to a project, I've stepped into that role as needed. This is the critical part of the project, talking to the customer. Everyone thinks they know their customer but until one actually talks to them, they won't know for certain. It can be done with as little as three participants, but five to ten is usually optimal, with more being needed for extremely large projects. Of course time constraints and budgets will dictate the scope of research, but this is one area to not skimp on as this data will inform the design, and drive the future of the project's implementation and success.

  • Customer Research (usually phone interviews, sometimes in person.)

Usability Testing

Testing can take many forms, from casual observation without interaction to group or one on one task completion.

When interacting with participants, it's important to reiterate that "We're testing the product not the person." They are doing nothing wrong, and should give their honest opinion of both good and bad aspects of the product.

  • Casual observation of customers from a distance (such as watching how they interact with marketing call-outs in a store.)
  • Utilize cameras to remotely observe in real-time or later. In one project, this was used to monitor foot traffic in a museum to see why people weren't visiting certain areas of the exhibit.
  • In person (in a quiet meeting space, or preferably a UX Lab) or through remote screen sharing and a phone call. Have participants complete a series of tasks on the current product and gain insight into what is working well, doesn't work well, and what their love or frustration is. Being empathetic to the person's issue is critical to note, as they should not be annoyed or upset to have to use your product. This will drive the design of the product in the next phase.

Employee Research

Customers are not the only ones who interact with a product. There's a whole team of employees on the the inside who have to support the product as well. Sometimes using the same application, other times using a completely different set of tools to update and maintain it. If you never had a chance to speak to a customer, spending some time talking with a customer support team will gives you a minimum of 2-3 pages of notes on what isn't working or needs fixing. That's quick list of design tasks for the project.

  • Call Center/Support research. These are the real stars for obtaining feedback, they're on the front-lines handling questions and issues from the customers.
  • Want to make them happy? Take the top three issues they deal with on a daily basis and fix those.

Personas

  • Who are the various types of customers?
  • Should be based on existing customer base, but could also be use to identify a new market segment that wasn't previously addressed.
  • Helps the designers understand the customer and "wear the hat" of a particular persona to ensure the designs meet those customer's needs.
  • These can be simple or extremely detailed, that will depend on the scope of the project.
  • Surfaces customer needs that may have been overlooked, such as accessibility issues (screen readers, large fonts, higher contract, or captioning on images and video.)
  • What their tech knowledge and comfort level is. Do they own a computer? Do they like to shop on their phone while commuting home on the train?

Journey Maps

This is the "When" and "Where" portion of the project.

  • Plot out the touch points of the potential customer and customer, throughout a multi year product life-cycle (like owning a smartphone that will be replaced every 2-3 years) or the person's life (such as healthcare, insurance, or education.)
  • It's important to show a part of the person's journey before they become a customer, this will aid marketing efforts to see how to engage with the person.
  • An often overlooked or ignored portion of a journey map is to develop an end or "graceful exit." This could be the end of a product's life cycle, how does the customer dispose of the old smartphone and replace it? Or how does a dissatisfied customer, or a customer who simply doesn't want to use a service anymore cancel the service and have their data removed from the system? Or in the unfortunate case of the death of a customer, how can family members access or remove the data from the system?

Design Phase

Besides the Five Ws, there's a 6th question..."How." How are we going to design this? The Design Phase will iterate multiple times through the various steps (Wire framing, Visual Design, Prototyping, Usability Testing, A/B Testing) as the product is refined.

Design Workshops

Getting internal staff together is a great way to explore ideas and get stakeholder buy-in on new concepts.

  • Can range from half day, full day or multi day events.
  • Have a mix of multidisciplinary staff involved, to gain insights and feedback from the different groups within the organization.
  • When seating everyone at tables, mix up the groups, don't let them sit in their usual business hierarchy. Having an executive (such as a Director or Vice President) sit with an intern and work on a collaborative exercise is both humbling and insightful. Everyone has ideas and all should be treated with the same level of admiration.
  • A great way to break free of the "group think" or corporate "this is how we've always done it" mentality. Add in some lateral thinking, try new and wild ideas. We're just sketching and having fun.

Card Sorting

Writing down key concepts, ideas, issues, terminology, website navigation labels, or whatever else needs to be reworked, on individual sticky notes and place on a wall. Have teams regroup/reorganize the cards as they see fit.

  • Can be integrated into a Design Workshop or set as a stand alone task.
  • Will gain insights into how content can be reorganized and grouped for a clearer understanding.

Information Architecture

  • Build out new site/application flow. (This works well with team reviews, especially getting input from the development team into what can or can't be integrated or developed.)
  • Try to focus on a "mobile first" responsive design methodology if possible. If it can work on mobile, it will work on desktop. Keep in mind that layout will vary between devices and not all information needs to be displayed on all screen sizes.
  • Identify hierarchy of information. This is key to determining what should be displayed on various screen sizes.

Wire Framing

  • Black and white or grey scale designs. Color is left out so the focus is on the overall layout elements. Imagery is usually left out until higher fidelity, starting with a box with an X in it representing and image, to a later quick storyboard style sketch of what an image could look like.
  • Multiple iterations of the design will be ongoing for a while with various levels of fidelity from low to high.
    • Low - boxes with bullet points.
    • Medium - screens with sections labeled.
    • High - Actual user interface screens with either dummy content or real content being used.
  • Accessibility is always considered at this step. It's easier to integrate while designing than try to retrofit accommodations into an existing live product for screen reading, high contrast, font size, etc.

Visual Design

While not a UX designer's primary role, working in a collaborative design thinking process in tandem with the visual designer is integral to the project's success.

  • Review mood boards to ensure the style is aligning to the product message.
  • Review style tiles. Do the color palettes, font styles and sizes meet accessibility compliance?
  • Ensure wire frame designs are being adhered to.
  • Allow some artistic license in the design, provided it won't interfere with the overall message, functionality, or accessibility. Let the artist add some of their style to the design.

Prototyping

Prototyping is a fast way to test a design, by doing a "walk through" of the flow or task. There are multiple layers of functionality, each building off of the previous.

  • Simple functionality - paper prototypes or white board sketches. These can later be photographed or redrawn in design software to then link hot spots between screens. (Adobe XD, Sketch/InVision)
  • Light functionality - some capabilities such as drop downs and radio buttons. (Adobe XD, Sketch/InVision)
  • Complex functionality - dynamic templates, table sorting, searching, database retrieval. This level of prototyping is the most time consuming and the end result is testable but "throwaway" code. (Axure RP, HTML programming)

Usability Testing

  • Put any level fidelity prototype in front of participants to gain insights on what is or isn't working.
  • Use those insights to inform design changes.
    • Can be formalized design changes, going through multiple sprints.
    • Or more "on the fly" adjustments that are quick, and then able to be re-tested with the next group of participants.

A/B Testing

If time allows, A/B testing can gain more metrics on performance of multiple designs by showing one or the other to a participant or customer.

  • Allows for refinement in the marketing communication or calls to action to improve conversion.
  • Can reduce user error and improve task completion by readjusting content to make it clearer and more concise.
  • Can be testing in prototypes or implemented in a launched product.
  • Analytics are required to validate the performance of the changes.

Assets and Documentation

Throughout the design process, many assets and documents will be created. It's important to keep this content well labeled, organized and documented to aid others in referencing the overall thought and design strategy into the future. Especially when new features need to later be implemented, these documents are a roadmap on how to do it to keep within brand and style guidelines.

  • Site/Application Flows
  • Wire frames
  • Design Guides - color palettes, font choices and sizes, hierarchy of information
  • Interaction Guides - especially integral in website and application development. Explains how various modules and sub elements should function.

Presentation

At various milestones, the whole team will need to present to upper management to convey how the project is going. Screens and prototypes may be shown with a quick walk-through to show how the overall concept is progressing.

Development Phase

While a UX designer is not directly involved in development, there's a need to stay involved in the process. In an Agile process, the design team would be a few sprints ahead of the development team, but would need to join in on daily stand ups or weekly status meetings to see how the designs are being implemented and to field any questions or issues about the design interactions and integration.

Trello and Jira are especially important tools to utilize in wrangling all of the tasks, issues and bugs. This would be a cyclical flow as design adjustments are sometimes needed when issues arise. Quick changes can easily be solved while others may require a function to be pushed out a few sprints while a new solution was developed.

Quality Assurance (QA) Testing

Throughout the development process, different functions will be tested by the QA's. Some of the tests will be focused on the design (layout on different device sizes, font compatibility, and accessibility.)

Other tests will focus on the functionality of the application and referencing application flows, personas and journey maps will aid the QA's when inputting information into forms or building out automated test scripts.

Designers will work with QA's at times to help them understand what the expected outcome is, or if there's an error, how that should be handled.

Product Launch Phase

After the product launches, the entire team goes into support mode to correct any issues that may occur. Depending on the project, I may be involved in ensuring the designs are followed or adding design corrections to mitigate an unforeseen issue. Other times my task is complete and others will take over, referencing the design assets and documents as needs arise.