Project RAISE: PathBuilder
Project RAISE has an interesting activity that is used quite frequently throughout the book to teach topics such as careers, food webs, and more. It can also be used to show a series of steps. A path builder is essentially an interactive web creator where you can create labeled nodes with content and connect it to other related nodes. For example, a student can label a saiga antelope as a herbivore. Then create another node called grass and connect them together. He or she can then also create another node called bison who are also herbivores and connected them to grass. The current experience of the path builder lacked customization. So the student would be limited in terms of how creative they can get with their path builder. My challenge was to improve that experience among other things.
Current Experience
Here are a few screens shots that show a brief overview of the current experience of the path builder that I was tasked with redesigning. Here is a link to the demo video if you are interested. I worked along side the project manager and PI to identify key pain points.
Painpoints
- Student has limited options(can only pick between 3 colors). Prevents student from creating a web that has more than 3 distinct categories.
- There is no current way to edit a given node once it is created(Big problem!)
- They can also use only a square shape.
- It many not be necessarily intuitive to have the user select the type of shape first.
Sketching out mental model and wireframes
I brainstormed user flows to get a good understanding of the mental model of a student when they would be using the path builder. Why would the student be using it? What would the be the first step they take? Do they think content first or shape first? What if they needed to make a change or made a mistake? Here are some example flows I made of how the student can use the path builder.
Redesign
After going through multiple iterations, I came to a conclusion. The idea was to have an editing state tool for the user to go back to if they made a mistake. This tool is also used for them to select from a few different shapes and multiple colors to accommodate for multiple categories when first creating a node. The student will also select based on content first instead of selecting a color/shape first.
User Journey
Student A has been tasked with naming as many herbivores, carnivores, and omnivores he or she can name.
- They click the label button because they know they need to make three categories: omnivores, carnivores, and herbivores.
- After clicking the label button a window pops up that indicates to the user to type out a label for the node, pick a color, and shape.
- The student then creates two other nodes for carnivores and herbivores.
- The student forgets to change the shape type for omnivores and taps edit.
- They change omnivores to circle. Now all three have distinct shapes.
- Next they click add media content since the nodes are going to all be images of different animals connected to the parent category nodes.
- The student selects the media content and it takes them to the same familiar modal editing tool. They can add a label if they would like, pick a shape, and a color.
- After the student has added a few nodes they then click the arrow button to connect the different animals to their respective categories.
- The student has their work reviewed and realize they have a mistake and need to correct it.
- The student goes back to figure out their mistake. They labeled cheetah as omnivore when in reality it is just a carnivore.
- The student taps the edit button, taps the arrow that has cheetah connected to omnivore and redirects it to carnivore.
Final Design Mockups
Here are some final UI mockups on the new path builder.
Conclusion
These designs are currently in production, I’ll make a link to a demo once it is available! We will then be testing it with the students to get feedback. Here are some screenshots of the activity in production.
