Overview
This project involved developing a prototype to demonstrate the workflow for creating an assignment, with a focus on enabling users to group (pool) questions for randomization during student assessments. The prototype incorporated complex interactions like drag-and-drop, reordering, and grouping, providing an intuitive interface for users to manage questions efficiently.
Key notes
- Custom Interactive Features: Built a tailored drag-and-drop solution to meet the specific needs of grouping and reordering questions.
- Design System Integration: Re-styled the prototype to seamlessly adopt a new design system, ensuring a cohesive user experience.
- User-Centric Development: Iteratively tested and improved the prototype based on real user feedback.
My Role
As a UX Engineer / Creative Technologist, I was responsible for collaborating with design, building, and refining the prototype. I ensured the interface met user needs while maintaining alignment with the new design system.
Process.
- Understanding the Workflow
- Analyzed the assignment creation process to identify key steps, with a focus on the final step: grouping questions for randomization.
- Worked closely with stakeholders and team members to define the functional and user experience requirements.
- Building the Prototype
- Developed an interactive prototype using React and the React Drag-and-Drop.
- Customized the drag-and-drop interactions to support:
- Grouping questions into pools.
- Reordering questions within and across groups.
- Visual feedback for drag-and-drop actions.
- User Testing and Iteration
- Participated in user testing with the initial prototype to evaluate usability and gather feedback.
- Refined the interactions and layout based on user input to enhance intuitiveness and reduce friction in the workflow.
- Incorporating a New Design System
- Updated the prototype’s styling to align with a newly adopted design system.
- Added features such as:
- Enhanced visual hierarchy for question grouping.
- Improved accessibility for keyboard and screen reader users.
- Ensured consistent branding and usability across all components.
- Final Testing and Feedback
- Conducted additional user testing to validate the re-styled prototype.
- Reviewed feedback to assess the usability of the enhanced workflow.
Outcome
The prototype successfully demonstrated the assignment creation workflow, showcasing complex interactions like drag-and-drop and question pooling. It served as a valuable tool for user testing, feedback gathering, and refining the final product design.
