Creating an Interactive Learning Tool

The Team: 4 members; 2 Graphic Designers, & 2 UX Designers

My Role: UX Designer

The Problem

The Exploring Africa Matrix site was created by the African Studies Center (ASC) at MSU in an effort to address the severe shortage of high-quality educational resources about the continent of Africa available to students, particularly at the K-7 level. Exploring Africa understands that for many, this is the only introduction to Africa that they will get at the K-7 level, so it provides curricular resources that help both students and teachers efficiently learn/teach others about Africa. Our task was to take the information on the site and use it to create an interactive experience for classroom use.

Brainstorming

Our initial idea was to find a way to use a map as the navigation so that students could have a visual representation of what they were learning. We also wanted to include a quiz so students could gauge their progress. We created a few wireframes to see what this might look like.

Revision

We presented this wireframe to the UX lead at Matrix and some of our peers for feedback. From this, we realized that we had lost our way in terms of the purpose of the project, our wireframes didn’t add anything of value beyond the original site. From here we decided to look into how the map could play a larger part in the experience.

We decided to transition from a linear user flow to a more open-ended, student-led activity. We also decided to make the map progress persistent across different sessions so the students and educators would have a way to measure progress.

Testing

Our testing capabilities were somewhat limited due to the ongoing COVID-19 pandemic. A few of the members of our team had younger siblings within the age range of our target user, so we were able to see our prototype in use on a limited scale.

The main pain point we discovered through testing was a lack of clarity in our navigation. Our users were not able to easily identify how they should be using our service.

Iteration

In order to solve this, we wanted to clearly define how our experience should work. We settled on a core loop that could be repeated until the activity was complete. The loop is broken into four key parts:

  • Students select different regions to learn about them

  • When students feel confident about their knowledge of a region, they can test it using a quiz

  • After the quiz, students are shown where they succeeded and where they need improvement

  • They return to the learning portion of the activity until they feel confident to test again

Our Solution

Watch our video demo to see the final prototype in action.

 

Looking Back

Our team struggled to find a clear vision of what we were trying to accomplish in the early phases of this project. Different team members from different fields did not have the same approach to interface design. As the person responsible for user experience of our product, I felt it was my responsibility to sit down with the team and talk through why we were making certain design decisions so that we could understand each other moving forward.

Looking back, I wish we had done this earlier. Once we all were on the same page the project moved much more smoothly and we were able to agree on things that used to be sticking points. I think in the future these kinds of conversations should not be avoided until the last minute.