e-space
Pearson ERPI
Project overview
e-space is a platform that allows teachers and students to access the books available online, as well as a range of interactive exercises. The platform is built on third-party technology and uses a general template that faces some accessibilities and usabilities issues. I was called to find a solution for these obstacles while redesigning the interactive exercices.
The problem
The problem with the current template applied to Pearson products is that it has a number of inconsistencies in terms of usability and accessibility. Some gaps in the application of accessibility standards established by W3C and web usability conventions in general prevent users from fully accessing the interactive exercises. Problems such as feedback based solely on colours, lack of focus with keyboard usage, and lack of affordance in the behaviour of components are some of the problems faced by teachers and students.
The goal
The goal of this project was to improve the accessibility and usability of the interactive exercises available on the ERPI Space.
My role
My role in this project was to act as a Visual and Interaction Designer. I was focused on increasing accessibility for people interact with the exercises and my job encompassed answering the following questions: Can people see the feedback of the self-evaluating exercises if they are color-blind? Or, Can they understand the different behaviours of buttons?
User research
A first talk with Internal Stakeholders allowed me to understand the challenges of the project. The main pain points identified were:
Pain point
Component Behaviour and Feedback based exclusively on colour
Pain point
Same icon used for the pressed and correct answer behaviour
Pain point
Lack of detailed feedback for all questions
Pain point
Not following standard visual representations for checkboxes and radios buttons
Pain point
Lack of States for Component Behaviours (Focused, Activated, Disabled)
Pain point
Drag and drop behaviour not evident
User Personas
Ben
Age: 25
Hometown: Montreal
Occupation: Designer
Ben is a student who cannot access the feedback from the interactive exercises because he is colour blind and the feedback is based on colours only.
"I can’t tell the right answer from the wrong one, because I can’t see the difference between the colours red and green."
Lisa
Age: 41
Hometown: Toronto
Occupation: Product Owner
Lisa is a manager who wants to include feedback for many exercises, but this feature is not available today.
"Unfortunately some exercises do not have the option of detailed feedback, so students cannot learn from their mistakes…"
The style guide
My first action for this project was to create a style guide with the visual and behaviours of components.
​
Since some buttons didn’t have all behaviour stages, I added hover, disabled and focused buttons. I also redesigned the buttons to be sure all behaviours worked without colours for colour-blind people (see Achromatopsia simulation).
As the exercise answer in the old template was only colour-based, colour-blind people couldn’t see the difference between correct and wrong answers. To solve this issue, I include an "x" icon for wrong answers and a "check" icon for correct answers. Also, the feedback component was included as an optional resource for the majority of exercices.
Next step was to apply the same principles to other components.
As I realized that pressed checkboxes had the same check icon when pressed and corrected, I decided to change the pressed icon for a little square. Also, I included a different style for radio buttons.
To make sure people understand some exercises had a drag and drop behaviour, I included an eight points icon on the left of the drag and drop components.
What's next?
After the style guide was created, the next step was to apply it to many interactive exercises to see if it worked. Fortunately, I was able to apply most of the accessibility standards and solve big issues of the old template.