Helping Kids Hack Their Project Ideas During Hack It Day
How RED Academy UX Design students went to City Hall in Toronto and helped a group of students learn about the world of user experience design and developed their project ideas into working prototypes.
UX field trip!
The Toronto branch of RED Academy arranged to partner with event organizers The Toronto Youth Cabinet and Kids In Tech for the Hack It Day event on March 14th, 2017. This was going to be held at Toronto City Hall and be an all day event full of activities for the kids in attendance. As part of the programming there would be a mini hackathon that my UX Design class would participate in. It would span two hours in the morning until the kids took a break for lunch.
Seeing as the mini hackathon would start a bit later than our regularly scheduled class time, the students of my UX Design class that volunteered to participate at the event got to sleep in and play hooky from class.
Rolling up my sleeves
Once everyone was assembled in the Toronto city council chambers we broke off into small groups of kids to work on their projects. I was partnered up with two boys that hailed from a school in the East end of the city.
My kids had signed up late in the process so they didn’t have anything on paper regarding their project like many of the other kids in attendance. It was all just a concept in their heads. They told me their idea was to develop the World Soccer Challenge app.
To begin I asked them to describe who the app would be for in order to establish what their target audience would be. That way I could talk a little bit about personas. To my amusement the one student proclaimed that “It would be for everyone!” I explained while I understood they could see anyone being able to use it that it was a general rule of thumb to have a more narrow focus. After all not everyone would necessarily want to use it. Plus having a sense of their target audience would also have an effect on the design of the app as well.
I asked them to describe to me what their idea was for the app and how it would work. Seeing as they didn’t have a chance earlier to put together any notes I got them to write it out on a piece of lined paper. This would later be used as our feature requirements. Based on the notes they made outlining what the app would do I got them to figure out what different screens they would need for their project.
It would have a Home screen where you could choose to play three different type of soccer challenges (Keep Up/Crossbar/Matches).
There would be a Level Progress screen where you could see how many levels there were and how many experience points it would take to progress to each one.
There would be an Achievements screen that logged how many challenges you have taken part in and showed how many experience points you’ve gained for each.
There would be a My Team screen that featured the name of the team along with a list of each team member. It would show their corresponding stats regarding the number of challenges they have done and how many they have won and lost. It would also include a feature where team members could challenge each other to a friendly match.
There would also be a Friends screen that listed the person’s friends that also used the app with a brief listing of their stats. It would also provide the ability to challenge them to a friendly match. And it would include a way to use Facebook to request more friends to join in on the fun!
Art supplies to the rescue!
As the boys were busy working on writing up the notes on how the app worked one of the event organizers passed out sheets of blank paper and pencils. Eureka! This helped me get the kids sketching out the different screens they would need for the app.
But before they got started drawing I discussed the UX process of creating wireframes ranging from low-fidelity to high-fidelity with the purpose of building clickable prototypes. I explained that the pencil sketches they would be doing would be considered low-fidelity and that mid-fidelity would be considered grey scale rough designs mocked up in a computer graphics program. I took the opportunity to show them the program Sketch along with an example of some mid-fidelity screens I had worked on for one of my school projects. Finally I showed them examples of the completed high-fidelity versions for comparison.
After that I showed both the Marvel app and InVision as examples of tools used for building prototypes using low to high fidelity screen images.
Once the boys finished sketching out the app screens I took photos with my tablet and brought them into the Marvel app. I showed the kids how hotspot buttons could be created within the program to link back and forth between the different screens to illustrate how their app would function. From there I got both of them to create some that linked to their different screens so they each had some experience creating the prototype. Below is the end result!
Once the prototype was completed I explained how it’s purpose would be for usability testing where you have different people interact with it. This way you could see how it works and if folks had any problems while using it. This process would outline areas where there was room for improvements and require going back to their sketches to make changes based on the feedback.
Summary
Over the course of two hours I was able to quickly walk the students through elements of the UX design process and enlighten them on aspects they would need to consider when developing web or mobile app products. When all was said and done I had fun and I hope the kids did too. Now let’s break for a pizza lunch!
