Streamlining the process of building and launching a usability test with UserZoom GO and Adobe XD.
Continuously gathering user feedback throughout the development cycle is critical in delivering products that solve customer needs. With that in mind, we set about exploring ways in which we could streamline the process of building and launching a usability test with UserZoom GO and Adobe XD.
The Double Diamond design process, as used by the UserZoom GO product team
The first step in the process was gaining an understanding of the problem space. We did this by interviewing customers that used Adobe XD for their design and prototyping needs.
We found that the 'jobs' users wanted to be done from within the plugin were: to create and launch an unmoderated ‘think-out-loud’ usability study.
We also discovered that a templated-study wasn’t enough, that users required flexibility and the option to add their own tasks.
Finally, our research found that specifying a success screen for their tasks was important, customers mentioned that knowing if participants reached the right screen or not on their prototype (and why) was useful.
The most important finding was that creating and launching a study was a job that should be done without having to switch between Adobe XD and UserZoom GO.
We then mapped out the user flows, breaking down Adobe XD and UserZoom GO into features, jobs-to-be-done and user stories. Seeing this helped us evaluate what was possible in XD using their APIs and allowed us to define how we’d approach designing the MVP’s user experience.
Keeping the plugin’s design as native to Adobe XD as possible meant that the user switch from prototyping to creating a UserZoom GO study with the plugin would be as seamless as possible.
This presented some interesting constraints and was a great opportunity to design a deeply-integrated plugin that felt like it really belonged in the Adobe XD ecosystem.
Building the UI components that suited our needs whilst maintaining a look and feel not too dissimilar to Adobe XD’s was an interesting challenge.
Here is some of the work done by the team...
Once we had a clear understanding of the problem space and had mapped the user experience, the next step was to begin prototyping and testing. An early problem encountered was how we’d display the main interactions in Adobe XD: in a side-panel, or in a modal?
We tested prototypes of both versions with some customers, and asked them to interact with the mockups.
Here are the results...
Pros: More space to write tasks and questions. Puts the user into the mental mode of writing and limits distractions.
Cons: Cannot reference the prototype while writing.
Pros: Can reference prototype while writing tasks and questions. Fewer clicks & better overview.
Cons: Less space for writing. Cluttered panel, especially if the user has multiple tasks and questions.
Here are the key takeaways from the first round of research:
We then tested the navigation between the main sections of the plugin (e.g. details, prototype selection, tasks & questions, launch).
Here's the feedback from the expanded panel view vs. the accordion view...
Pros: Users can get a better overview of the study.
Cons: Too many elements may be overwhelming.
Pros: Fewer distractions - users can concentrate on the task at hand. Breaks up the study into steps and guides the user through the process.
Cons: Out of sight - out of mind. Users may forget to complete some tasks because they're 'hidden'. Harder to get an overview.
Here are some insights from the second round of research:
We applied what we learned, and released a first iteration of the plugin. It was an interesting process designing something that would ultimately be used by designers.
Looking ahead, we’re keen to continue to refine it so would LOVE your feedback. Get in touch via the website or leave a comment on our Product Hunt page.
Here are some links to get started and learn more: