UX

Note: some of the details of this project are removed to protect the company’s confidential and proprietary information.

Research & Analysis

Feedback from users of our testing products revealed that there was a pressing need for a new Ordering question type for high-stakes nursing assessments. While the UX for creating an ordering question within the administrative portal was already scoped and released, no user requirements and scope were defined for how the Ordering question would appear to test takers in their client application (Examplify). The current designs for Ordering proposed for development were not supported by user research and customer data.

Defining Requirements

To define requirements, I needed to take a sample test within the test taker application in order to take screenshots of what the drag & drop question type which was in beta form, as drag & drop and ordering are similar concepts. Once the screenshots were gathered the following key issues were identified:

• No visual indicators were present to make clear to the user that items could be dragged
• No visual indicators appeared to show the user locations where items could be dragged to

To address these issues, I then outlined the new requirements which made clear that visual indicators and question reset were necessary for an optimal user experience for ordering. Additionally, these requirements needed to apply to both Desktop and Mobile versions of Examplify.

Prototyping

New project requirements and the key issues that needed to be addressed were presented to product managers on a weekly basis to ensure alignment on the next steps. After our first synchronous meeting, it became clear a fully working prototype would be necessary to showcase this new concept during our next synchronous meeting to get full buy-in from stakeholders and get this new question type developed. The early drafts of the prototype in Figma showcased the tools limitations. Wanting to create it faster for a quicker hand off, I decided it would be best to start over and code it with HTML, CSS, and jQuery.

Demo round 1

Demo round 2 with the additional feature of a color change hover and drag events

Impact

The creation of the HTML/CSS/jQuery prototype resulted in a seamless handoff to development, as most of the developers were already familiar with jQuery and could easily adapt it to fit into the client app. The prototype was exactly all that was needed, with the only change to move the drag icon to the right of the pills to address the concern of the touch target being too close to the label. I also received help from a product writer who was gracious enough to host the prototype on an internal company server so the link could be shared with rest of the UX team for further feedback. You can now view the documentation of the Ordering question here.