Project Overview
As an education sector, we need to create the best user experience for reading and studying. Assessment becomes an essential experience that it's in dire need of improvement and creates recommendations.
We have commonly used question banks that get access across all learning platforms that reach out to many students. These questions were locked into a very rigid format, the visual is out of touch and behavior. In order to optimize the access and learning experience for learners. I was brought in to bring question types up-to-date and define a mobile strategy.
Instead of showing all the design types, I will demonstrate designing Accounting table.
Accounting table
The accounting table along with the assessment inside becomes a challenging case: It only shows partial rows or columns as the user answers each answer. I had to decide which orientation is the best. After research how common apps like MS excel, Google sheet behaves in mobile, I proposed allowing content author to set the table cell dimension. This design allow the user to view the information within the table clearly and not avoid the gesture conflict (scrolling vertical / horizontal VS pinch to zoom in and out.)
I will have to create a pattern that validates the user's answer while still showing the correct answer. I decided to use the toggle to switch views between correct answers and students' answers.
Simple table: keep the cell dimension allows user to focus on scrolling and avoid gesture confusion.
Fixing the table cell dimension without zoom will avoid confusing geture when there can be multiple table stacked.
Checking answer design
After determine the table cell behavior, the next challenge is showing results. The original design is showing the results in a new table below the existing table. Running a usability test; user expressed frustration on the time it takes to scroll up and down to check on answer and their own input. So it becomes apparent that user prefers to see the answer in-line. So the questions becomes; "How might we show user input and show the correct answer?" After some iteration and usability test, I decided to combine the view
• Button switch: With a button switch user can toggle between user input and correct answer.
• Indicator: testing various iconography, the blue triangle are less visually invasive and intuitive signify user to click to see more explanation.
Results
The newly designed question types were widely adopted by authors when they create interactive content. 40% of authors immediately adopted these questions type in the following 3 months.
Upon my transfer to other teams, we managed to complete approximately 70% of the question types.
The mobile strategy and the design process continued to serve as the key principle process in question type redesign.