Nancy Boshuijs
UX Reseacher

How can I add UX into a process that has already started?

Summary

Problem

NPath wanted to build a user-focused SaaS application for self-teaching students, but they were building on biased assumptions and didn't know how to implement UX into the process.

Research

I conducted a survey and interviewed potential users to create a validated persona, which we used in a workshop to collaborate on the new product vision.

Solution

I turned the renewed vision into a flow map, which the team used to create the MVP prototype. By concept testing, usability testing, and five-second testing with users, I gained enough insights to give design recommendations for the MVP and its touchpoints.

Lessons learned

💡Bringing UX into an already started process isn't as difficult as it seems.

💡Take developers along in the process from the start.

💡 During facilitation, you ask questions and guide the team.

How can I add UX into a process that has already started?

About NPath

NPath is a startup developing a SaaS application that provides educational guidance to lifelong learners by creating interactive roadmaps.

I had met one of the developers on a Discord group, where we had a conversation about design thinking. He told me that he took a crash course to learn user-focused design, but that he didn't know how to integrate it into the company's work process. That is where I came in.

But there was one big problem: The team was already in the middle of development. So how was I going to add UX into a process that had already started?

Research
How can I add UX into a process that has already started?

Stakeholder Interviews

To understand the full scope of the project and explore the UI designer and developers' vision on the product, I scheduled individual interviews, in which I asked:

  • What are the goals of this application?

  • What problem are we trying to solve?

  • Has any prior user research been done?

  • Did you experience any difficulty during development?

Insights gained:

  1. The vision for the app was to make free online learning resources more accessible for self-teaching students.

  2. By visually collecting these resources into one roadmap, students would not have to search the web on where to start learning but instead could take one look at the map and begin studying.

  3. Team members had very different views on which features users would want, so they tried to combine them all into a single app.

  4. They had created a biased proto-persona and prototype based on their assumptions.

After the interviews, I explained that the persona needed to be validated and that I would start this process right away by creating a survey to find out what problems self-teaching students experience.

How can I add UX into a process that has already started?

Survey

The goal of this survey was to find out what students did during their self-teaching journey.

I asked open-ended questions so that they would recall past behavior, rather than predict what they would do in the future or give a socially desirable answer. The open-ended questions:

  • What is your learning goal?

  • Did you plan your learning path?

  • What kind of research did you do before starting your learning process?

  • What kind of resources and tools did you use?

  • Which steps did you already take to achieve your goals?

  • How did you keep track of their progress over time?

  • Did you experience any struggles along the way?

And two closed-ended questions to collect quantitative data:

  • Did you keep track of your learning process?

  • Do you know any other students that practice self-teaching?

Lastly, I asked: 'If you could give any study advice to your past self, what would it be?'. By asking this, I hoped that the participant would reflect on the problems they experienced and reveal workarounds they used to solve these issues.

Once it reached 60 respondents, I processed the results into an affinity map and started analyzing.

How can I add UX into a process that has already started?

Affinity Mapping

The chunking, categorizing, and labeling of the survey answers made analyzing and discovering patterns in the participant's behavior easier, which revealed that students:

  • Either look for free resources on google or pay for a structured online course with a build-in learning path.

  • Take notes of what they learned.

  • Know what they want to learn, but not where to start.

  • Struggle to find good content and connect it logically.

  • Feel insecure if what they are learning is right and miss guidance.

  • Trust the expertise of others regarding what to study.

  • Find it hard to create a study plan, which makes them lose motivation.

  • Would give their past selfs the advice to: ''Find someone who can guide you and can validate that you are on the right path.''

  • Use different tools for planning and keeping track of what they learn.

While I learned all this insightful knowledge about the students, l still felt that there was a gap in my knowledge.

How can I add UX into a process that has already started?

Interviews

I wanted to dive deeper to find out why and how students used the tools mentionedso I collected the participants' email addresses and invited them for an interview.

I asked them in which learning phase they used the tools, which tool they used for what, and lastly, I asked them to demonstrate how they had used it the last time.

By asking this, I learned the following:

  • Students used different tools for different tasks.

  • A variety of tools were used during different phases of the self-teaching process by individual students.

  • Students couldn't think of one application that allowed them to do all tasks in one place.

Seeing that the students didn't have a one-shop-stop tool for all their self-teaching tasks, I recognized that this could be a market opportunity for NPath to fill in.

Before sharing this with the team, I wanted to be sure that there wasn't such a tool already around, so I did a competitive analysis to validate my statement.

How can I add UX into a process that has already started?

Competitive analysis

I created a competitive table to analyze and compare different tools to find out if there already was one that fulfilled all students' needs.

By trying out the tools and looking at their websites, I gathered information about:

  1. The tool's purpose.

  2. Which possibilities it offered (features).

  3. How they made their data visible (screenshot).

Then I compared the tools and put them into two categories:

  • Direct competitors (2+ student-tasks possible)

  • Indirect competitors (1 student-tasks possible)

While Trello came closest, I didn't find one tool that did everything. This proved that NPath's value proposition could set us apart in the market.

Define
How can I add UX into a process that has already started?

Personas

I decided to make a persona to share the research results and create to create a representative for NPath's target group.

In this persona, I combined the behavioral user insights gained from the survey and interviews. I made sure to lay the focus on the user's goals, frustrations, and pain points as validation for NPath's new value proposition.

The persona proved to the team was heading in the right direction with their product idea, but that combining all feature ideas wouldn't solve the real user's problem.

Mike young's gave the development team a face to refer to during the design process, but also made the reason for a new product vision clear.

How can I add UX into a process that has already started?

Who Are We (workshop)

After I introduced Mike Young, I wanted to make sure that the team forgot all the old ideas and focused on the new problems to solve for the MVP. To do this, I facilitated a workshop.

In this workshop, the team collaborated to process the research data and new value proposition into a new MVP vision.

How we did it:

  1. I asked the team to individually answer the question: 'What makes MPath different from other courses and tools?'

  2. Each team member had five minutes to write down three good ideas and two crazy ideas (space for thinking out of the box) on a sticky note.

  3. Everyone picked two of their best answers and presented them to the group.

  4. Each member voted on their favorite idea by placing their voting dots on the sticky.

  5. We took the most voted for ideas, merged them into the new vision.

With this newly defined vision in mind, we went on to the ideation phase to collect ideas for the MVP's experience.

Ideate

User Journey Map (workshop)

The goal of the user journey map workshop was to put ourselves in the persona's shoes and brainstorm what Mike Young would do, what questions he might have, and what would make him happy while interacting with our application.

Doing this allowed us to look into the details of possible steps in the user journey, find where the features needed by self-teaching students would fit, and discover opportunities for our product to stand out.

During the workshop, we discovered that happy moments would exist when a user could easily find an answer to their questions along the journey.

I advised the team to keep this in mind when designing the screens, to assure that these questions would be answered on the corresponding pages.

To see which screens would be needed to make this user journey possible and how they would connect, I made a flow map.

How can I add UX into a process that has already started?
How can I add UX into a process that has already started?

Flow map

I made a flow map to give the developers a direction on which screens they should make, how they are connected, and how the user would interact with them.

The map represented the pages that users would need in the MVP to go from discovering what NPath is about on the homepage to selecting and starting a course.

After handing over the flow map to the team, I added editing options to the flow map with which I could take a step ahead in the process.

Prototype
How can I add UX into a process that has already started?

Sketches

While the team was working on developing the MVP demo, I decided to start experimental sketching for the next step of the application: editing the map.

We had already decided to go with a bootstrap text editor that we assumed was known to users, but we didn't think about how the map itself would look during editing.

After presenting the different ideas, all team members agreed to go with the test out the third option.

How can I add UX into a process that has already started?

Mid-Fidelity Prototype

I used Figma to turn the sketch into a mid-fidelity prototype, which we could test during usability testing.

While the text editor* was only a not-clickable visual interpretation of the real bootstrap, I included it in the prototype on purpose to validate our assumption that it 'was known to users.'

Test
How can I add UX into a process that has already started?

Concept Testing

The team had made a prototype for the MVP. I wasn't sure if new users would understand how it would work. To validate the design, I made a concept test using Usability Hub, where I asked participants:

  1. To describe what they saw on the prototype.

  2. Explain what they think its purpose is.

  3. Where they would click to add a new circle to the map.

Insights gained:

  • The design of the map itself was logical, but the participants had no idea what the numbers in the nudges meant.

  • They had different expectations of 'how to add a new nudge' than we expected.

The team used these insights to change the information displayed on the nudges to a different topic, while I edited my prototype to show a plus button when hoovering a nudge as a new way to add a nudge.

How can I add UX into a process that has already started?

Usability Testing

To validate the MVP's design solutions and usability of the map and editing prototype, I ran a remote moderated usability test with a female representative who had the same age and education level as the target group.

During the test, I asked her to think out loud while exploring the roadmap and completing a series of tasks.

Insights gained:

  • The clickability of the circles was intuitive and aligned with the users' mental model.

  • The user was confused that the text went outside the nudge and tried to refresh the page.

  • The relation of the nudge to the menu on the left wasn't clear as she said: ''I didn't even see the sidebar had changed when I clicked on one of the circles.''

  • The user expected the map to zoom in when she clicked on a nudge, but that didn't happen.

  • The user thought that the map only could be edited in the left menu but later discovered that the right side was also interactable.

presented the insight notes and gave design recommendations to the team, which they used to edit the MVP's interface and interaction.

How can I add UX into a process that has already started?

Five-second testing

While the team was working on making iterations to the MVP, I decided to test out NPaths first point of interaction: The homepage.

I wanted to see if new users could find out what NPath does and decide if they might want to try it out by looking at the homepage, so I created a five-second test in which I asked fifteen participants:

  • What do you remember seeing on the homepage?

  • What do you think NPath is?

I was quite shocked to find out that most participants couldn't precisely figure out what NPath was about after looking at our website's mission statement. 

I decided that this had to change quickly, so I started iteration.

Iterate
How can I add UX into a process that has already started?

Homepage

looked back upon the Who Are We workshop and taught about how I could inform users about the new product vision in one sentence.

After experimenting with some different ones, I decided to include the number one feature of our first MVP.

The team wanted to make it shorter and more mysterious until the MVP's launch so that people would explore the website more.

While I advised not to do this, since new users might make up their minds in 5 seconds and not even look at the rest of the website, we decided to compromise and change the title to 'Get direction with roadmaps.'

Visit NPath.io to see the live product.

Lessons Learned

💡 Bringing UX into an already started process isn't as difficult as it seems.

At first, I wasn't sure how doing research would help the team move forward. But once I did user research to validate the team's assumptions, we found that it helped to adjust the vision of the product and overcome the feature struggles they had experienced before. 

💡 Take developers along in the process from the start.

By sharing the research results and explaining what I did and why I did it, developers gained a common understanding of the users and their pain points. Doing this not only helped me to get buy-in but also made them create the application with the user in mind.

💡 During facilitation, you ask questions and guide the team.

During the first workshop, I was anxious if the team would be willing to participate, and I thought that I had to be the one to come up with the ideas. But once I had clearly explained the goals and the steps, the team just took off, and I only had to guide them in the right direction by asking the right questions at the right time.