Putting the Design Process to the Test

This testing experience was in relation to a recent project involving the Utah STEM Action Center. As one of their Ambassadors, I have found ways to give back and use my field of User Experience Design to give them a tool that would help them in their efforts to educate various audiences about the Action Center and what they provide.

The STEM Action Center uses all of their efforts to promote STEM-based curriculum in K-12 schools in various ways. They provide grants for teachers and schools, facilitate access to education tools, coordinate STEM activities for students, and much more. All of these efforts are made with the vision of helping to build a stronger workforce for the future.

As an Ambassador for the Utah STEM Action center, I am involved in many of these events and gatherings. It is a great way to network with current educators and administrators as well as help students get excited about STEM subjects. Over the last couple years I have grown in my ability to communicate to various audiences the purpose and efforts of the STEM Action Center. But looking back, it wasn’t always that way.

Discovering the Problem

When I was new to the program, it was a little overwhelming to become a representative of such a big organization. I admit that my ability to answer the various questions I would get was not as good as it is today. And as I got more used to it, I also found that I ended up answering some of the same questions over and over again. With so many events, there were some days where it felt a little monotonous. I started to see some common problems and points of this experience that could be improved.

1. As a new Ambassador it was hard to know all of the answers to everyone’s questions at events. There is just too much information to memorize all at once.
2. It would be difficult to avoid robotic answers to the questions that were repeated so often.
3. With a wide range of audiences (students, parents, teachers, and administrators) it was hard to adjust my communications skills that would best match their needs.
4. Some topics of the STEM Action center didn’t have enough resources to be able to accurately show and describe enough information about. For example, the STEM Bus is a renovated school bus that travels around the state to give students hands-on learning experiences. With such a cool resource, I wanted to be able to really show people its features without having to bring the bus to every event.
5. Some conventions would feel like we were competing for attention when you look around and see 200 other booths. There needed to be something more to help us stand out from the crowd.
6. Having face-to-face conversations was effective but I found that it was hard to know if the information was be retained in the audience’s minds. There needed to be a better way to engage a deeper depth of processing.

Seeing these areas of trouble I wanted to help not only myself, but the other Ambassadors and representatives to help bridge these gaps. My resulting creation of a Mag+ publication would become an interactive tool that would be used in such events.

Defining the Scope

My design started with the question of what information would I put into it? What would the scope be? I couldn’t just throw in all of the information the website has and call it good. It needed to be more of a snapshot that would help answer those most common questions.

• What is STEM? What does it stand for?
• What does the organization do?
• What scholarships do they offer?
• What is the STEM Bus?
• What events can I get involved in?

Including just the answers to the questions was not enough though. Deciding what other content was important to establish because it would be those things that the audience would most likely remember. From my list of pain points I remembered my experience about the STEM Bus. It was such a neat resource but I needed to find a way of showcasing it in the publication. Creating a VR tour of the bus became a great way of letting people peek inside the bus and see its potential. Packaging the information in interactive ways helped to make the information more memorable and to help increase the depth of processing for the audience.

Ideating the Solutions

Knowing what questions I wanted to answer, that gave me the direction as to what type of information would be on each vertical. A simple map of the structure helped me to see the overall picture:

Next came the interaction model. Mag+ gives a wide range of interactive capabilities. But I had to keep my audience in mind. The people that would be using this tool would not all be familiar with Mag+ or know how to use it initially. The interactive model needed to include affordances that would make it clear as to how to engage with the tool.

The inspiration of the styling came from the STEM Actions Center’s current style. Bold colors and strong visuals needed to be present in this publication just as in their current website and products. When seeing this tool, it still needed to feel like it fit in the STEM AC family of engaging and bright materials.

Testing

With the structure and styling in place, putting together the verticals became easier. I finally had a working tool that could be tested. Before I could structure the test itself, I needed to know what I wanted to get out of the testing. The goals of the test included:

Testing Goals

• Assess the purpose of the publication — Does this tool benefit both the STEM representative in expressing information and the audience in understanding the information with a higher depth of processing?
• Asses the usability of the publication — Is the design and layout of information clear in how to navigate and use the tool? How easy is the tool to use and find information?
• Discover any bugs in the publication — Are there cases where the user will find bugs that weren’t initially fixed? Which elements need to be address and changed?
• Validate the information in the publication — Is the information in the publication relevant to the most common types of interactions they have with the audience? Is there information not in the publication that would be beneficial to add?
• Understand the user’s connection with the publication — Does the user feel like this would help them be a better STEM AC representative? What are their thoughts on the publication itself as a tool? What feedback do they have?

Test Design

The way to accomplish these goals in testing would include 3 main parts. First was to give them about 1 minute to explore the publication. This would allow me to observe their interaction with the publication, the gestures they use and look for points of confusion. The second part would include me asking them to find a piece of information within the publication. This would allow me to observe the time and path they choose to find that information. The last part would include me asking them a question as if I were a teacher or parent and then having the test participant answer the question using the publication. This would allow me to observe how the use of the publication can benefit or interfere with how to answer the question.

Exit Questions

I also created a short survey with exit questions that would help me document their thoughts and feelings about the publication. Referring to the survey made it easy to know what I needed to focus on when adjusting the designs.

Survey Questions:

1. In what ways do you feel this tool would benefit you as a STEM Ambassador? Or if you are not an Ambassador, how do you think this would help someone new to the Ambassador program?
2. How would this tool help you in answering questions during events?
3. If this tool was available at events, how often do you think you would utilize it?
4. How easy was it to navigate?
5. Were there any parts that were confusing or didn’t make sense as far as the usability of the tool? (swiping, scrolling, buttons, navigation etc.)
6. What information might you add to this tool that you think would help you as an Ambassador to answer people’s questions?
7. What other feedback do you have?

Test Results

Going through these different tests with people gave me a great insight to things that I could not initially see. My observations throughout the testing and their feedback was crucial in the design process of this publication. Without them, I would have missed opportunities to turn something good into something great.

Through my observations I noticed that everyone moved through the publication relatively easily. Their gestures were purposeful. The affordances in my designs of the interaction model seemed to be effective in communicating what gestures were needed.

With my observations and their feedback, I ran back to fix the problems I found.

These images show my first designs of the main feature pages.

Based on my observations and the feedback of the test participants, I narrowed down what changes needed to be made:

1. Add a graphic that shows how the different elements of STEM relate to each other
2. Adjust the icon style of last menu item to more clearly describe what that item represents
3. Fix a bug in the grants section and add more information on that page
4. Make consistent button styles (between the bus and events page)
5. Adjust the design of the gallery so that it would be more easily noticed

This image shows the feature pages with the changes now implemented. The first page now includes an interactive popup that describes how the elements of STEM relate to each other. The second page fixed some bugs with the popups and pan boxes. The layout of the last page was adjusted, and the gallery was improved by adding arrows so indicate to the user that they could see more images.

To see what this product looks like as a whole, check out the video below.

Conclusion

The feedback of these new changes was well-received and now I look forward to it getting used by ambassadors and representatives. This design challenge gave me insight and taught me the importance of user testing. The changes made because of the testing may seem small on the surface, but they made a huge difference in the overall experience. No matter how well I thought I knew this publication and its features, there was still problems in it. Having new eyes on the publication opened the door for improvements that I couldn’t have made otherwise.

This project also helped me to see the benefits of documenting the all the steps along the way. Having all the ideas in my head is just not enough. They need to be accurately communicated on paper to effectively express what the product will be.

Moving from this project to another, I look forward to what experience can be improved next.

All images and informational content inside the publication is courtesy of the Utah STEM Action Center.