Improving an Experience
Technology. It has never been growing as fast as it is now. But do we use it to our benefit? Sometimes I believe that we use technology in the wrong or misused ways that make life harder for us. These thoughts have been on my mind recently and as constantly learning student I seek for opportunities to improve experiences when I can.
I volunteer as an ambassador for the Utah STEM Action Center. Their mission is to provide tools and opportunities for K-12 schools to incorporate STEM-based curriculum into their classrooms. Being able to give back to the community and help get kids excited about STEM subjects has been very rewarding. Many of my experiences involve attending conferences and conventions. I help to explain what the organization does and what they offer. These events are usually filled with hundreds of other booths and vendors, and I often find myself answering the same few questions again and again. Though I can say that I’m very good at responding to these questions, I thought this would be a great opportunity to create something that betters that experience. I wanted to help the STEM Action Center stand out from the rest of the crowd and give the visitors something more than just memorized answers. I wanted something tangible and visual so that the information being shared would be more meaningful. So I ran to Mag+ with a head full of ideas.
Through this article, I will explain my journey to improve this experience by creating a digital publication that can be used by the representatives to give their audience a more visual response to their quesitons. It will include my designs, my hurdles to overcome and my final thoughts. So come enjoy the journey with me!
Where to Start?
I didn’t just want to just put all the information I possibly could into this publication, so I thought in detail about what information would best be utilized in this situation. It needed to be a snapshot of what the organization provided instead of an exhaustive collection of information. My inspiration became those questions that I answered hundreds of times over:
- 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?
I asked myself the question: “How can I make the answer to these questions more memorable and valuable to the audience?” The answers to these questions would become the pages in the publication. They would be simple but yet engaging. Now that I had the information that was most useful to the purpose, I had to think about my audience.
Audience
As my ideas started flowing I realized that I actually had two audiences. First were the people that we would interact with and answer questions for. That was obvious. But the second was the representatives that would be using this tool to answer their questions. The end goal was going to make sure that the visitors left with their questions answered as well as inspiration to utilize their services. That meant that my information had to be clear and give maybe more than just could be memorized and spoken by the representatives. A more challenging audience would be the people that would be handling and using this publication: representatives or volunteers like me. This left me with the challenge of how to structure the publication to be used by a wide range of people. It could be used by direct employees who were very familiar with technology like Mag+ or it could be used by another ambassador who has never seen Mag+ before. This left me with the second challenge to structure the layout and ideas in a clear format. It had to be useful and inuitive.
I found three main parts to design for: a cover page, a contents page, and a basic layout template that would be for each main topic as inspired by those questions mentioned previously. The cover page would be simple and straightforward. This was the most simple design to create. The next would be a place to state what was inside the publication and also to describe how to use the publicaiton. Using gesture icons to describe how to use the publication would help those who aren’t as familiar with the way Mag+ works. The last would be to showcase some of the main subject of the organization and be visually pleasing and memorable.
Style
The style was pretty simple. I was able to receive access to the style guide that the organization uses. This made it much easier for this publication to feel related to all the other products or materials that already existed. Using their colors, fonts, and style I was able to see how this publication was coming together. I created icons that would represent the letters in “STEM”. I also created icons that would make up the overlay menu. Two versions of each menu icon were created. One for the “off” status and one for “on”.
Problems
With any Mag+ publication, there are going to be struggles. It is a powerful tool and difficult to master. I was able to find some strategies to help me overcome some of the biggest problems.
First, this popup menu provided plenty of challenges. It consisted of a list that when tapped, would bring up popups. Those popups would include a pan box of information. I first had a problem with the pan boxes until I learned that pan boxes loose their interactivity when placed within a popup grouped with other things. This meant triggers. I had a first layer of popups that would then trigger another layer of popups. Each title of the grant would link to a popup that consisted of the darker purple box. This popup would have an in-view trigger that would bring up the pan box popup. Having the pan box popup separate, it maintained its interactive ability. Another challenge was to make sure the popups wouldn’t toggle off. A simple addition to the popup code fixed that problem. Adding “/open” to the end of the URL would take out the default toggle setting. So if they tapped on the title multiple times, they wouldn’t be able to close the popup. It would just remain open. Lastly was adding popup groups. This would allow for only one popup to remain open at a time. Both the initial set of popups were in a popup group as well as the pan boxes in another group.
Another challenge was the menu overlay system. The idea was to have the icons on the overlay menu jump to the associated pages. Then once selected, they would change the icon to a white version so it would give the user feedback to what they just selected and where they were in the publication. I also wanted this overlay to always be visible when in the main topics pages so that the various users would always have quick access to the different areas. Nothing should be hidden.
There were two main layers to making this: the jump links to the pages and the in-view triggers for the toggled icons. The jump links were relatively easy. Hotspots on the different icons simply needed the ID of the vertical to jump to. The triggers on the other hand were different. The triggers were set to in-view so when they were taken to another page, the trigger would then reference the associated icon on the overlay menu to turn on. And when off the page, the triggers would turn off those icons. This jump link was composed of several different parts.
URL: /vertical ID/object ID/command
In my case the URLs went like this URL: /STEM_01_overlay/HomeIcon/open. The ending command of “open” would prevent the case of the user toggling off the trigger. One last challenge was seen when viewing the publication for the first time upon loading. When I would get to the first main topic page that included the overlay menu system, the associated icon on the menu would not show. For some reason the in-view trigger wouldn’t work. But any other time I can back to that page, it would be seen. I found that this error was resulting from the way Mag+ loads the pages. It first loads the individual verticals, and then the overlay. Since my trigger was on the vertical, it meant that the trigger was performed before the system had even loaded the overlay, so the path would be broken. But any other time it would work because after that the overlay would be loaded and ready. By setting that first icon on the overlay as “initially visible”, it fixed the loading problem. It would already be showing upon loading so it wouldn’t have to wait for that trigger to happen the first time around.
Learning how to overcome these challenges was great because it gave me an opportunity to really understand what was going on behind the scenes of my publication. It wasn’t enough to make it look pretty but I had to understand on a deeper level what the core experience and interactions were. This is where interaction design shines. It’s not on the surface, but underneath where our designs come to life. Anything can look pretty, but the real question is how it functions underneath.
Finishing touches
Having fun with this publication I decided to add another couple things that would really make it stand out. First was a virtual reality tour. The STEM Action Center had the opporunity to renovate a school bus to become a mobile classroom. This is a crowd favorite when taken to events but it is also expensive to take everywhere. So I created a virtual tour so that more people could see what the bus is like without it having to be there at every event.
The last addition was an animated cover page. This was done by simply making an animation that would loop until they decided to enter the publication. It was subtle but elegant. From the very beginning it brings a higher quality to the experience.
This journey was so much fun. My knowledge and confidence in Mag+ grew and my own design skills challenged. I look forward for more experiences for me to improve.
All images and informational content inside the publication is courtesy of the Utah STEM Action Center.
