Hello everyone, this is TCC Translation Intelligence Bureau, I’m Li Zehui. In today’s product design team, what experience designers need to do has crossed functional boundaries. In order to seek better design solutions, they often have to connect the entire team. The work involved is based on the design process we are familiar with, and at the same time hides a lot of cross-functional thinking and work details. Experience designers need to fully understand the impact of design work on other functions, as well as the limitations of other functional work on design. The author breaks down the four major design processes of problem definition, creative divergence, prototyping & testing, and review and reflection into 12 steps, and describes in detail the functional tasks and thinking involved in each step. Just like embarking on a heroic journey, designers need to fully understand and plan this adventure and follow the rules to better solve problems and meet challenges.

The roles of UX designers and product designers have gone beyond the previous situation of simply designing solutions in a specific function and lacking cross-functional participation. In order to seek better design solutions, designers need to participate in the entire work ecosystem of the project cross-functionally. We are all very familiar with a design process, which is to define the problem, diverge ideas, draw prototypes and test prototypes. This design process can meet its educational purpose and is easily understood by more people, but it does not involve cross-functional content and does not provide enough details to guide us on how to be competent as UX designers.

UX designers need to think about a lot of things at every stage. It is important not to miss any details that may have a negative impact on the implementation of the design, affecting the final product, user experience, and business functions. For example, if you forget to develop a strategy to improve accessibility, your users may not be able to access your product on their preferred devices, engineers will not know which devices need to be supported, and designers will lack design restrictions and considerations.

With all of the above information in mind, I came up with the idea of ​​creating a cross-functional design process while providing enough detail to help UX designers follow the process.

The UX Designer Journey

If you like writing stories, you may have heard of the “Hero’s Journey.” It depicts the 12 steps that most books use to tell stories. I think the journey of a project, from existing products to launching new products to analytics and optimization, can also be divided into 12 steps like the hero’s journey. The hero of this journey is the UX designer.

1. Current Products

Current World

In daily life, user experience designers will understand many important details of the product, product features, functions and user expectations of the product, and even consider the impact of optimization on the product and business status. Everyone in the studio is on their own track every day. For designers, this is an opportunity for you to focus on a task that is difficult to complete within the specified time. At this stage, we can do:

• Formative research to find opportunities and insights
• Evaluative research to find pain points and pleasure points
• Present your research results to your team in the form of PPT or report
• Add tasks to the design backlog and set priorities
• Upgrade the design system (upgrade components, file specifications, etc.)
• Keep everyone in the team informed of design progress
• Assist in product direction determination (strategy or some workshops and discussions)

2. Meeting challenges

Ready for adventure

This step disrupts the comfort of the existing product and presents a challenge or request. Depending on how your team works and how it is managed, challenges come in different forms. The size of the challenge will also vary depending on the team's situation and can be large, small, moderate, very focused, or more open-ended.

• Fetch the next to-do item
• Have a meeting to discuss business goals (improve a KPI, etc.)
• Discuss product ideas through a meeting
• Document assumptions and questions to add to research (this will happen throughout the project journey)

3. Understand and plan

Refuse to take risks

UX designers may be eager to accept challenges and requirements, but there are some questions that need to be answered and considered at this stage to determine the strategy for moving forward. First, determine the design approach to follow:

• Design Sprint (high-risk challenges, rapid validation, business ideas)
• Lean UX (large and medium-sized design goals, business goals)
• Ideate, prototype, test (mini-challenges, backlogged design problems, tweak designs)

Depending on the chosen approach and the scale of the challenge, the following steps may be performed independently or in a different order. To deepen your understanding of the project, start by asking questions or doing some small exercises:

• What are the goals and tasks of the project? If you don’t know, you can simulate the business results.
• Who is the user? If you don’t know, try to build a prototype persona (to be validated later)
• What problem needs to be solved? If you don’t know, try to establish user goals
• What does a successful product look like for businesses and users?
• What tasks are important to the user? Do a quick user journey exercise with the user written on the left, the goal on the right, and text and arrows in the middle.
• Have you tried this challenge before? (Research on existing products and what were the results?)
• What factors can lead to project failure?
• Transform the answer into “How Might We”
• Decide on a list of design criteria (specific enough to guide the project, but also open to allow room for exploration and research)

At this stage, UX designers should start laying the foundation for accessibility and inclusive design, discussing and planning the following:

• Supported devices, software, and hardware
• Versions supported by the above devices
• Consider cultural diversity (if it is a global project) and what cultural factors will affect (such as time of day, color usage, language, etc.)
• Write these into the project’s design specifications (this is easy to forget and underestimate)

4. Reach out to experts and users

Meeting mentor

Expert information helps answer current questions of UX designers, providing them with theoretical foundation and design confidence.

A good product requires the participation of different functions, and user experience designers need to combine these functions. Each function is an expert in a certain field, such as users, technology, market, business, etc. Finally, user experience designers will have a global perspective, not just looking at things from the perspective of the design function.

• No one person knows everything. — Jake Knapp (Design Sprint)

Set up a 15-minute meeting with the functional heads to discuss:

• Project Manager
• Marketing staff
• Salesperson
• Consumer Services
• Engineering Development
• User Research
• other

Use questions to get useful information, such as:

• What factors will drive project success?
• What are our unique advantages and opportunities?
• What are the biggest threats and risks?
• What factors can lead to project failure?
• Show previous plans and exercises and get their advice

To better cope with challenges, you can use research to gain insight into opportunities and discover problems with current products. For example, if your challenge is to “increase user purchasing power”, you need to:

• Find opportunities and new insights, and generate research conclusions
• Discover user pain points and pleasure points through evaluative research
• Present the findings to the entire team

A good UX designer can combine all the above information to find an optimal solution.

5. Creativity and solutions

Crossing the threshold

At this point, UX designers can really start to tackle challenges and find solutions. At this point, whether working in a group or individually, it is best to maintain a relatively balanced relationship. If in a group, it is best to follow the principle of "together, but independent". This means that people with higher positions in the team should not control the thinking of the entire team, but give the team more room for discussion and decision-making. All exercises and activities should be anonymous.

Start by looking for inspiration, and it doesn’t have to come from the product domain. Users love learning interaction patterns from other domains, especially from things they use regularly. Remember to use lightning demos[2] to discuss them in small groups.

([2] Lightning Demo is a structured presentation meeting where participants can present their inspirations and favorite ideas to stimulate discussion among everyone)

Once you find inspiration, review all the information you have collected. At this point, UX designers will have many ideas and can:

• Sketch your ideas
• Use crazy8 or six up methods to explore, extend, and iterate ideas (both methods are tools to diverge ideas and extend concepts)

If you are short of ideas, you can use the SCAMPER method to ask yourself:

• Replacement: Which parts can be replaced without affecting the usage process?
• Merge: Can the two processes be merged into one?
• Adaptation: How can we make usage processes more flexible?
• Modification: Are there any areas or elements that can be strengthened or highlighted to show its value?
• Other uses: Who else might use this product? How would the product perform in different settings or purposes?
• Elimination: What happens if we delete this section?
• Inversion: What would happen if we reversed this process?

Review the process, vote within the group, select the best ideas and:

• Draw a specific solution
• Create navigation and sitemaps
• Production task flow

Finally, to ensure that the entire design plan is not missing, use step 3 to fill in the gaps. For example, a project found that "social media ads and emails have a need for templates", and based on this description, started asking questions and exercises, and drew sketches. Remember, many times, our focus should be entirely on the product and the core process, not anywhere else.

Story Maps

At this time, it is necessary to conduct story map discussions to break down ideas and determine the minimum viable product (MVP), especially in an iterative, agile development environment. As a UX designer, make sure that usability is not seriously affected and allow for a small number of interference factors. Once the idea is verified through the prototype, depending on the team's working mode, you can use story maps to try to build a minimum usable product (MUP: Minimal Usable Product).

6. Feedback and guidance

Test, approve, disapprove

UX designers must face feedback and criticism along the way toward a final solution.

In a collaborative workshop, the best ideas and opportunities are generated through voting. For example, in a design sprint, the solutions proposed by the UX designer need to get feedback from other stakeholders. They can be:

• Project Manager — Decision Maker (get their approval)
• Engineer - Technology Department (to explore whether the technology is feasible, whether the current equipment is compatible, etc.)
• Others (depending on the specific project)
• In design reviews, UX designers need to sell their ideas
• Set a scenario, who is the user, in what scenario, what must be true, how did the user get here?
• Experience the product prototype from the user's perspective
• Don’t leave out minor information and details, such as notifications, loading states, error states, etc.
• Every design decision needs to be justified and reasonable
• Notes should be written in a conspicuous place
• If there is a disagreement, explain it from a professional perspective. If they continue to ask questions, write them down and indicate that you will continue to pay attention. If necessary, use A/B testing.
• All comments are valuable. Don’t completely deny those opposing opinions, and don’t be self-centered.

Sometimes, the design review process may take several iterations to complete, especially for complex technical issues. In the end, the decision maker decides on the final solution. Once the final decision is made, you can start recruiting users to validate the design solution, or use third-party recruitment services and groups.

• Try to find 6-7 participants to find out the problems that are not ignored in the design plan.
• Reserve 1 hour for each test (including review time)
• Allow time for rest and preparation between tests (15-30 minutes)

7. Prototype

The end of design

There is one last step to complete before final design verification.

It is important to distinguish between prototypes and design specifications that can be delivered to software developers. At this stage, we focus on the former. This means creating a high-fidelity minimum viable prototype to obtain validation. First, you need to determine the fidelity and prototype:

• Paper Model (Low Fidelity)
• Wireframe (low fidelity)
• Visual Design (High Fidelity)
• Dummy data (encoding)
• Landing Page Testing (Coding)
• Fake functionality (coding)
• The Wizard of Oz (encoded)[3]
• Real function (coding)

([3]: Wizard of Oz: Before developing a chatbot, you can use "The Wizard of Oz" as a minimum viable product (MVP) test. The name of the "Wizard of Oz" test comes from the movie "The Wizard of Oz". During the test, a real person (the "Wizard") will replace the machine to communicate with the user.)

Next, determine the work required to build the prototype. Sometimes, UX designers take on all the tasks, but ideally, the work needs to be mixed with other functions:

• UI Designer
• Visual Designer
• Copywriter
• Design asset manager
• Developer (if coding is required)

Prototyping Tools:

• Paper, pen, scissors, glue (paper model)
• Balsamiq software (wireframe)
• Sketch, Figma, Studio, Invision and other software (visual design)
• HTML, CSS, JS (coding)
• More

If the prototype requires coding or high-fidelity output, please follow the design guidelines:

• Consistency and componentization
• Hierarchy and contrast
• Some design principles, such as simplicity, proximity, size, etc.
• Responsive design (if you need to test multiple devices, you can choose one first and consider other devices in step 11)
• Provide feedback (let users know the situation and get feedback)
• Define the tab order (if not needed, you can do it in step 11)

8. Test the prototype

Facing the test

Testing the performance of design solutions with customers can gain deeper insights and better promote project implementation.

After building a prototype, you can start validating it. Ideally, we will have a 30-minute conversation with the participants. First, collect all the assumptions, questions, and prototypes of the project, then build a test plan and script, and think about the following aspects:

• Purpose of testing and selected methods
• What information do you need to know (validate a hypothesis, discover a problem, or test the functionality of a prototype)?
• Verify previously unsolved issues in the project (if time permits)
• Who should be the test participants (all affected users, both novice and advanced users, taking into account the diversity and specificity of users)
• How to measure success (task success rate, task completion time, error rate, satisfaction, etc.)
• Filter questions and add some new questions

Then start writing the script, thinking about the following aspects:

• Introduce the project and set expectations
• Obtain consent from participants and provide rewards as a thank you
• Avoid leading questions, closed questions, or questions that introduce bias. Use questions that vary depending on the audience.
• Prioritize issues and tasks (highest priority to lowest priority)
• Avoid bias in task writing and task sequencing
• Set goals and observations for each task
• If questions are missing, more extensive research (questionnaires, observation notes, etc.) may be conducted if time permits.
• Before conducting the test, you can do simulation exercises with your classmates. This will help you find hidden problems in the script and ensure that the timing of the entire process is appropriate.

Once the participants, prototype, and script are ready, it’s time to test it, ensuring the following aspects:

• Warm up the room with a professional and friendly opening (offer drinks, small talk, open atmosphere) to make participants feel at ease
• Observe participants for questions and concerns
• Give participants more time to think and get more details.
• Probe participants’ answers and ask why
• Don’t guide participants through the task test; let them explore on their own and provide as little help as possible.
• When faced with questions from participants, you can use rhetorical answers, such as asking "What do you think?" You can flexibly adjust the test tasks when necessary, but do not be biased.

Allow participants to express additional ideas and end each session by describing next steps. You can also ask participants to fill out a questionnaire to obtain:

• Net Promoter Score (NPS)
• System Usability Scale (SUS)
• Other quantitative data

9. Survey Results

Obtain the Sword

The results of the research will be fed back to the designers in different forms, such as questions, more knowledge and insights, or design verification.

Record your findings during the research process to guide the development of future projects and to review these experiences when you encounter similar problems in the future. It is best to put the research plan and research records in one document. When you review, you don’t need to re-understand what the project is. Everything is available in one place, which can also avoid other viewers jumping multiple times. Record the following:

• Survey overview, survey summary (data visualization, Net Promoter Score (NPS), System Usability Scale (SUS), or other content)
• Which hypotheses and questions are confirmed and explained (providing evidence and updating the knowledge base)
• Statistics of a single task (task success rate, failure rate, task time)
• Which aspects are going well?
• Which links have problems?
• Product vulnerabilities (if coded)
• Other suggestions

When recording these findings, be sure to:

• Write important information, summary and recommendations first
• Write for those who may read this document and think about what they want to know (may include project managers, team leaders, researchers, marketing managers, etc.)
• Contains evidence, videos, manuscripts, etc.
• Be aware of conflicting research findings, including research from other projects (such cases may require further exploration)
• Keep it simple and direct to avoid ambiguity
• Explain what each insight means and what can be done about it
• Protect the personal information of participants (not to be disclosed unless they agree)

If possible, involve the entire team in the research. Let team members become recorders by watching in real time (anonymously) or participating in the recording. This will allow your team to get more first-hand information instead of understanding information through reports, and will further motivate the team and improve work efficiency.

10. Continue the project or iterate

The way back

The journey is not over yet, and the design may still need to be optimized based on its performance. There are a few different directions you can go based on the test results. In the best case, the design works and only needs some minor details to be modified; in the worst case, the design fails.

• Design is allowed to fail — Lean UX

According to the survey results, we can:

• Update the design based on the research results to better serve users, usually just small adjustments (which can be re-validated with quick user testing, saving time)
• If the design is partially validated, go back to step 5 to get new ideas to modify the failed prototypes.
• If the prototype completely fails, use these suggestions to rethink it. Do users really need this? Is there a better solution? Based on the research results, decide whether to go back to step 5 to generate new ideas, redefine the design challenge and design understanding, or transition directly to the next project.

Call a meeting to present the research, test results, and updated prototypes to team members, and make recommendations for the next stage. Going back to the previous step is a difficult decision and difficult to get support. Unfortunately, there is not enough time to support backtracking during the design sprint. Therefore, you need to explain the value of backtracking through research results and convince decision makers from the business and user perspectives.

11. Final design and results

Return of the King

The design plan will have a significant impact on the existing product and development work. After the design plan is determined, some other status needs to be supplemented, such as the information that the development team needs to know from the designer:

• Responsive design (device types, accessibility, screen sizes)
• Navigation logic and page scrolling (accessibility)
• Special pages (404, terms of service privacy page, etc.)
• Blank page, opening page, help page
• Icons and images
• Loading, failure, success feedback, give users time to react
• Hover state, selected state
• For transition animation, don’t deliberately make the animation slow to avoid flickering
• Component size (buttons, links, menu items)
• Final media content (images, text, video, audio), completed in collaboration with copywriters
• Try not to use highly saturated colors, and prefer a calming color palette (if necessary, reduce distractions and anxiety, and allow users to switch color modes)

Now, you can start thinking about how to measure the new design to verify whether the new product is successful or needs improvement. Establish a design quantification plan to ensure that the development team can conduct correct and effective data collection. Consider the following points:

• Business and project goals
• Strategies and tactics to support goals
• KPIs to track
• Interactions that need to be tracked
• Conversion Funnel
• Third-party applications (Hotjar, Google Analytics, etc.)
• Macro and micro goals
• Create a tracking task and have the development team implement it

To facilitate the development team to make work plans, designers need to ensure that prototypes and other design assets are easy to understand and accessible at any time. Maintain communication with the development team, reduce information gaps, and provide support. Sometimes it is still necessary to modify some design details.

Regularly review the development team's progress to ensure that the project is progressing smoothly and in compliance with design specifications. Conduct a final design review of the development deliverables, including:

• Check each page and how it displays on different devices
• Confirm image, video, and audio content
• Check the status of keyboards, screen readers, and braille readers
• Check the hover and selected state of the target area
• Check animations and transitions
• Adjust contrast and font size
• Make sure all notifications are understandable, especially error messages.

Don't rely too much on the QA team to find design and accessibility issues.

12. Publication and Analysis

Valuable experience

What I am going to talk about next is a method to solve the problem, or a way to organize thoughts. Please feel it for yourself.

Once the product passes quality checks and is successfully released, you will enter a new phase. Next, you will start collecting data. Depending on the frequency of use of the product and the size of the user base, this may take weeks or even months. Once the data collection is complete, create a report or presentation that includes:

• Analyze the value brought by the product, time investment, money investment, business value, return on investment, etc.
• Analyze whether business goals and KPIs have been achieved, whether they are close to the goals or far from the goals
• Analyze the macro and micro goals of the project. Which ones are effective and which ones are ineffective?
• Analyze the value conversion funnel. Is there a high bounce rate at a certain step?
• Analyze some basic data, such as customer acquisition rate, bounce rate, etc.
• Multi-data triangulation analysis provides more valuable conclusions, such as data, heat maps, etc.

If the results are bad, the review becomes more valuable - find out where things went wrong and where things can be improved. If the results bring the entire team one step closer to the KPI, or if there are any areas that can be improved, then it is worth spending time to strengthen those parts and help the project go smoothly. Then, you can add these conclusions to the archive or move on to the next design challenge and continue to move towards your business goals.

Listen to you

This is a dynamic process, and the steps mentioned above will change over time. UX designers need to have diverse skills to participate in the entire project journey. No doubt, I must have missed some details. Are the steps I described similar to your project experience? Which steps would you change or add? What did I miss? Welcome to communicate!