UMSI Capstone Project: Designing an online portal for teachers

My Role: Project Manager, Ideation, wire-framing, user testing, prototyping, visual/brand design, interaction design


Introduction

Backyard Brains is an Ann Arbor tech startup founded by University of Michigan alumni, Tim Marzullo and Greg Gage. Backyard Brains’ goal is to make learning neuroscience fun, accessible, and affordable for teachers and students of all levels. Their products can best be described as educational neuroscience tools, and these tools mimic real equipment used by neuroscientists in the field.

I had the opportunity to speak to the University of Michigan School of Information media team about this project. Check out the video below for an overview of our project.


Problem and Task

There was previously no support system for BYB users besides a static FAQ page, and a support number to call. Furthermore, BYB has a wealth of digital resources but they were poorly organized, difficult to find, and often too long and in depth for busy teachers to sift through. As such, these teachers often felt out of their depth and isolated in their use of these kits, thereby compromising their student’s learning experience.

Our team’s goal was to create a teacher portal on the existing Backyard Brains website for teachers to facilitate a smoother and more learnable on-boarding process when it comes to learning and using Backyard Brains products.


Methods


To address the task we focused on 3 key areas:

  1. Discoverability: Improve the discoverability and accessibility  of Backyard Brain’s online resources

  2. Interaction: Provide a more interactive, engaging, and dynamic customer support experience.

  3. Community: Facilitate interaction and communication between Backyard Brains users to increase their sense of support and community.

Then, over the course of four months our team broke the project into a Research Phase, Design Phase, and Validation Phase.


The Research Phase

The goal of the research phase was to further explore and understand the needs of our user base, with the eventual goal of defining key requirements upon which to scope the rest of our design process.

The key points in our research process were as follows:

  1. Digital Survey: Conducting a brief digital survey allowed us to quickly gather and synthesize user’s attitudes, behaviors, and characteristics. We were then able to use this data for a quantitative analysis as well

  2. Open Card Sort: The card sort allowed us to gain insight into our user’s expectations surrounding information architecture. An open card sort was the best option as this was a new platform, and not a redesign of an existing page or product.

  3. Interviews: These were in-person interviews to allow for a more qualitative, subjective, and nuanced exploration of our user’s teaching backgrounds and overall experience with BYB.

  4. Persona Development: We then synthesized our main user characteristics into personas for whom we based our design.

  5. Affinity Diagram: All of the findings from our research phase then culminated in the construction of an affinity diagram, our core method of research analysis. Our team collected the most salient notes we had, and grouped them according to similar trends and alignments we had. After forming initial groups, we then moved the observations into a hierarchical structure, summarizing each group with a statement describing the users on the second tier, and then grouping those statements, to form a conclusion on the top tier.


KEY FINDINGS

These top tier conclusions/findings in our affinity diagram were as follows:

  1. Having a background in neuroscience makes a major difference in the user experience regarding Backyard Brain’s online resources and kits

  2. Teachers and students are looking for guidance around the technology and material, as well as troubleshooting

  3. Users greatly value collaboration and community with other like minded teachers

  4. Users are looking for a more organized and informative structure to BYB’s online presence

  5. Video material is a critical part of the BYB digital experience

  6. Users value hands-on learning in the classroom



PROJECT REQUIREMENTS

The final outcome of our research phase was to define key “must-have” requirements for the design phase

These were as follows:

  1. Collaboration with other teachers

  2. Dynamic, customizable user-based product information

  3. Troubleshooting support

  4. Greater emphasis on video/demo content


The Design Phase

Using the data gathered from our lengthy research phase, we were finally able to move into designing the portal. This was an iterative process during which we designed, gathered feedback, and then iterated with an increased level of fidelity, ultimately ending in a near finalized design.

Screen Shot 2020-08-29 at 4.14.52 PM.png

Step 1: User Flow Diagram

Our first step in the design process was to work together to create this user flow diagram. This illustrated all of the key pages and interactions on our platform, as well as the possible user routes to move between them. Having this allowed us a macro level “bird's eye view” of the ultimate design.

Screen Shot 2020-08-29 at 4.17.49 PM.png

Step 2: Low-Fi Sketches

We conducted a team exercise in which everyone completed sketches of their vision of the design individually, and then we came together to analyze common ideas that we all had. The idea here was definitely quantity over quality.

Screen Shot 2020-08-29 at 4.20.34 PM.png

Step 3: Mid-fi wireframes

We designed mid-fidelity wireframes focusing on functionality and interaction design over aesthetics. The main features of this iteration dealt with user interaction as well as ease of navigation. We then conducted user tests with this iteration to inform the next stage.

Screen Shot 2020-08-29 at 4.27.29 PM.png

Step 4: High-Fi design

Taking the findings from the first round of user testing, I further developed the aesthetic quality of the design, implementing the client’s brand guidelines for the UI of the platform. This version was again tested with users.

KEY DESIGN FEATURES

In order to ensure we were addressing our key “must-have” requirements as well as the initially established critical areas (Discoverability, Interaction, Community) there were certain especially important design features that we focused on.

  1. User Profile

A user profile allowed for a more engaging experience that users could personalize and cater to their own needs.

A user profile allowed for a more engaging experience that users could personalize and cater to their own needs.

 

2. Pages for Products and Experiments

Each of the BYB products had a specific page where users could learn more about their use

Each of the BYB products had a specific page where users could learn more about their use

Users could explore each of the products further with video material and troubleshooting guides to aid their use

Users could explore each of the products further with video material and troubleshooting guides to aid their use

 

3. Forum

The BYB community forum was a crucial part of the platform. This is where users could interact with other teachers, share ideas, lesson plans, and foster a dynamic, thriving, and engaging experience with BYB.

The BYB community forum was a crucial part of the platform. This is where users could interact with other teachers, share ideas, lesson plans, and foster a dynamic, thriving, and engaging experience with BYB.


The Validation Phase

After coming to an (almost) finalized design the last step in our process was to design and conduct a validation study with our users. The purpose of this was not to come out with radical changes, but rather to confirm that what we had worked towards was indeed meeting the needs of our users.

*The point in time at which we were ready to validate our design coincided with nationwide lockdowns going into effect due to COVID-19 and as such we struggled with recruiting direct users. As a result, we recruited proxy users that best reflected our user pool, which were men and women age 22+ with an academic background.*

Our validation study was based on the following two research questions:

  1. How intuitive is the platform to use to the average user?

  2. How easily are users able to find information and navigate the platform?

To test this we conducted a single-system unmoderated usability test during which each user was given 4 tasks to complete, followed by a digital questionnaire.

The questionnaire briefly asked each user to then:

  1. Indicate whether they completed the task (y/n)

  2. Rate the difficulty level of each task

  3. Rate how strongly they agreed/disagreed with a statement regarding the system usability

We were able to then aggregate the data from the validation study in the following graphs:

Screen Shot 2020-08-30 at 1.49.44 PM.png

No users failed to complete any tasks.

Screen Shot 2020-08-30 at 1.49.33 PM.png

The majority of users found the tasks not at all difficult

These qualitative questions all focused on the perceived usability of the system. The majority of users fell between agreeing and strongly agreeing when it came to navigating and using the system with ease. Given that most of our users are of averag…

These qualitative questions all focused on the perceived usability of the system. The majority of users fell between agreeing and strongly agreeing when it came to navigating and using the system with ease. Given that most of our users are of average technical literacy, this was extremely important to us.

 

CONCLUSION

Despite the obstacles thrown at us, especially in recruiting, given the results of our validation study we were able to confidently move forward with this design as a viable solution that met our user’s needs by providing an engaging, interactive and most importantly usable platform that appealed to busy teachers.

View an interactive prototype here


Looking to the future

While we were not able to see this design through fully to implementation, there are certain key factors on which the continued success of a solution like this is contingent.

Engagement… Frequent and dynamic updating of content is what will keep users interacting not only with the platform but also with each other. Allowing this to plateau into a static site brings BYB back to square one.

Emphasis….This platform should not be sidelined or hidden as something extra or unnecessary. It should be prioritized just as highly as as any other central BYB resource.

Integration…This should be a seamless part of the holistic, end-to-end BYB experience.

With these factors in mind, our team was confident that the solution presented to Backyard Brains is one that will enhance and elevate their overall user experience and customer satisfaction.