May-Jul, 2021
Ripple revitalizes ClassIn X's digital whiteboard by overhauling its menu to boost usability and modernize the interface. This enhancement aims to streamline presentations and interactions, providing a smoother, more intuitive experience for instructors and students alike.
Lead Interaction Designer
Windows-based Touchscreen (110 inches)
Shipped in 2021 with an issued design patent
The initial menu features a two-ring circular design: the inner ring presents a static array of primary functions, while the outer ring serves as a flexible space for secondary features and beyond.
The menu by default displays 18 feature icons, arranged clockwise from the inner to the outer ring without an apparent logic to their placement.
After reviewing and analyzing feedback from both internal and external sources, we identified three main categories of user complaints.
Users have trouble locating features. Meanwhile, the menu behaves inconsistently, concealing options when activating tools with submenus, such as the Pen tool.
Users struggle to recognize and understand certain icons, like the Pointer, and many are unaware that pressing the LOGO collapses the entire menu.
Users find the menu cluttered with too many options without clear grouping, making it difficult to efficiently complete primary tasks.
For redesigning inspirations, we carried out user research with 10 participants using a mixed-method approach, including Heuristic Evaluation, Icon Usability Testing, Card Sorting, and Interviews. We complemented this with an analysis of online metrics to derive more robust and persuasive insights.
Participants were asked to match the icons with text labels.
Participants were asked to choose 10 out of 16 and put them into 2/3 groups by importance.
By synthesizing the research findings, we discovered that user goals fall into three categories, closely mirroring the stages of a traditional lecture process.
Users need to make sure a smooth lecturing experience in accordance to course syllabus.
Users want a lecture to have easy access to rich resources and to offer interaction with students.
Users wish ClassIn can offer an easy way to help organise and distribute course materials and assignments.
To align with users' goals and address issues in the initial ClassIn menu, we explored various restructuring options for the information architecture (IA), ultimately finalizing the version as below.
The menu by default displays 18 feature icons, arranged clockwise from the inner to the outer ring without an apparent logic to their placement.
Ripple retains the circular design of the original menu but introduces more flexibility.
The Toast Bar adopts a grid layout, offering a scalable solution.
The Ripple menu for ClassIn X is made for simplicity and focus. The new design aims to assist users to complete key tasks with no distractions.
The UI has been updated to better highlight the information hierarchy and enhance the discoverability of features.
The menu dynamically expands and contracts around a central circle, contextually displaying and hiding actions as needed.
The result of the menu refresh was remarkable in monitored feedback channels and usability testing with users.
Complaint decreased in all monitored feedback channels
Average task time reduced in usability testing
Task completion rate increased in usability testing
The circular layout, while unique, does not easily accommodate additional features, necessitating customizable options for diverse use cases. Moreover, refining gesture-based interactions with the menu is crucial to enhancing overall efficiency.
