Goal
June 2018 - August 2019
An educational assessment app designed to help educators and students identify strengths and growth areas in STEM-related skills.
Client
June 2018 - August 2019
University of Maryland - Computational advisors
Contribution
User Experience Designer & Researcher
User Research
User Interviews
Wireframe Creation
Interaction & Prototype Interaction
Usability Testing
Outcomes
Clear & concise instructions
Provided clear instructions for each exercise goal and main actions to avoid confusion or information overload.
Consistent, accessible and modern UI design
Redesigned UI and interactions to provide a more modern experience and allow keyboard functionality to adhere to accessible practices.
User authentication and security
Implemented an authentication process to confirm actual student data.
Takeaways
Further User Testing
Conduct more usability testing with a larger student testing pool. Due COVID-19, sessions could not be scheduled as easily.
Mobile security & development
Future iterations will gather sensitive student information so collaboration with University Security personnel will be required.
Mobile security & development
Design and implement a secure mobile experience.
Opportunity Summary
Outdated and inaccessible interface.
This web application collects student aptitude learning data through a series of exercises and survey questions. Through a series of interactive, research-backed exercises, the app measures proficiency across logic, spatial reasoning, pattern recognition, and problem-solving—core competencies that serve as strong predictors of success in science, technology, engineering, and mathematics (STEM).
A few immediate problems were determined:
No Signin: The system had no secure authentication process to determine who took the assessment and if they were university's students. This would risk the data to skew or become fraudulent.
Digitally inaccessible: The original application was built with a old linux architecture system that allowed only one input device - the mouse. This is not only inconvenience but digital inaccessible for people who might use assistive technology.
Overwhelming & unclear feedback: most of the exercise instructions were very verbose, hard to scan on a grey background, and had repetitive content. Student would not be able to determine the key actions to take. This is further exacerbated with time-restricted exercises since there is also no clear timer for students to refer to on screen.
Break it down into chunks!
After a brainstorming workshop, the following 3 goals were established:
Clearer call-to-actions Needed: no visual hierarchy was stated and many buttons blended with the background
Less clutter of information groupings: line spacing was a problem and too many redundant instructions were prevalent.
Improvements on Responsive design capabilities needed: - the use of keyboards, visual accessibility with pointers, and possible mobile device input must come into consideration in next design sprint.
The Solution
Login dashboard
Task Dashboard. Student would need to complete each task in order.
After a task is completed, the next one is unlocked and ready to start.
Instruction pages show student what to expect clearly and transparently.
The Journey
In collaboration with the university's research team, Haystack Solutions, the UX team had access to cyber and tech talent listserv for survey analysis and user feedback.
With the 3 main visual priorities in mind, the team conducted some competitive analysis to understand the best designs used in the educational space - one was from the university partner itself. The team also looked to applications outside of education that have quiz features designed with the latest visual trends.
What did the university already integrate in their own learning systems and how can that be improved with a modern design?
The team collected and studied the features to determine if it solved the major pain points indicated. If it did not fit well with the assessments architecture then it was should be ignored. CareOf and the current University system were a couple of the examples observed in this process.
Initial wireframes and layout design
View closer →
In order to understand the components of the application and what information they give to the user, Site maps were created to prioritize the design flow.
Initial wireframes and layout design
View closer →
Initial Prototype #1
Mid-fidelity mockups that incorporates the competitive analysis, sketches and information architecture to hopefully solve the main pain points.
During usability testing, some design choices and placements of information were not working. Some students were not getting through the whole application because they were clicking in the wrong places and not completely understanding the exercises. The features that were approved were distracting and needed to be revisited. Here were the three problems tackled:
Initial Prototype #2
Second try! Iterations with a cooler color scheme and clear feedback validation during tasks were created. The left-bar navigation was a bit redundant and removed. The grouping of information and clear feedback accent colors helped with the major pain point of clear feedback systems.
Final Design
Updated instruction page for the Preference assessment.
Preference assessment that contains a Likert scale.
Updated instruction page with a visual example for the Paper Folding assessment.
Practice session for the Paper Folding exercise
Practice session for the Word Association exercise
Updated instruction page with a visual example for the Picture Building assessment.
Picture Building assessment after practice session is completed.
Design System
Reflection
The Biggest Challenges Overall!
Clear instructions for different exercises
Crafting clear instructions, goals and constraints for 7 different tests that required different ways of thinking. This challenged the team to figure out how to present instructions that is not verbose or vague.
Consistency in visual design
Aligning the team together on one design system for multiple types of assessments was a challenge. We prioritized a simpler, minimal visual design to make sure the content was easily digestible and accessible to different type of learning.
Future Developments!
More usability testing
Future iterations include more usability testing with a larger student testing pool. Due COVID-19, sessions could not be scheduled as easily.
Development implementation
Establish a financial support for a development, testing and maintenance team.
Mobile security and development
Design and implement a secure mobile experience. Most students are on the go and take assessments through their phone so this responsive design needs to be explored. This application also contains sensitive student information that would require proper University Security Protocols to be followed.