Student Arcade
(tLDR version)
UME Academy runs programs that teach kids to design their own video games through design and computational thinking. At the core of what they're doing, they want to teach students how to be confident problem solvers who use creativity, technology, and collaboration to positively impact the world around them. Their students code most of their games using the Unity platform and display it on UME Academy's website to share to their friends and family.
The goal was to redesign their existing arcade web page into a stand-alone responsive website portal linking to their main website. The challenge was to increase the level of engagement for the students and to find a way to increase connection between the students and other visitors playing.
This project was a great opportunity to discover the elements that made playing video games so attractive and to revive that nostalgic feeling of excitement from traditional arcade experiences. Seeing that increasing engagement among the students was one of the main objectives, we incorporated three main features into the redesign of the website; a leaderboard for top 10 games, an unlockable prize system, and having an easy navigation layout for game selection.
Project Management | Client Liaison | Full UX Services
The Scope
This project was a great opportunity to think outside the box and apply the design process in a unique way. I was the project lead of a team of 3 UX designers and 2 UI designers in a fast and furious 3-week design sprint. Our client was UME Academy — an education company aimed to equip kids (Aged 6–14) with STEAM (Science-Technology-Engineering-Arts-Math) learning fundamentals through workshops, after school events, and in-class programs throughout the lower mainland in Vancouver. One of the most popular programs among the kids is when they learn to create their own video games using a gaming engine called Unity.
During our kick-off meeting, we encountered several obstacles that would significantly limit our data collection for our research phase and impact the way we would normally approach the design process. The initial goal for the project was to re-design UME Academy’s corporate website with the purpose to generate more leads from parents and to also onboard potential teachers to incorporate their coding programs into their school curriculum. Some time into the research phase, we discovered that the scope had changed from redesigning the main website to just the arcade page. As a result, the goals of the project were updated to the new scope (refer to goals), which impacted the way we set up survey and interview questions. The other obstacle was that we couldn't visit the schools or classes to conduct a contextual inquiry site visit because they required a police check and wasn't able to apply for one due to the short time constraint.
User (Students) Goals
- Share their work
- Be inspired by other students' games
- Play games
Business Goals
- Increase engagement with current students/clients
- Spark interest / curiosity in students
- Increase marketing exposure
Project Goals
- Create/increase engagement and inspiration to kids
- Make engagement more visible
- Showcase students' computational thinking skills to adults
The Design Process
Contextual Inquiry
Because we weren't able to visit the classrooms or schools, my team decided to conduct a contextual inquiry at a nearby arcade to gain inspiration on the experience and environment. We found that the contrast of bright neon lights with a backdrop of dark spaces were effective in creating the attractive gaming mood. Lots of numbers and prizes were highlighted to emphasize the motivation to win points and tokens to earn prizes, which we found to be a winning formula to increase kids’ engagement.
Survey
We sent our survey out to UME Academy’s e-mail list of 5000+ clients and received 17 responses. With the unfortunately small number of data collected, we were still able to gain some key insights.
- 90% of kids play games on tablets, while 67% play on laptops/desktops
- 40% of children play on UME Academy Arcade, and 75% of those children play on it less than 15 minutes
- 90% respond positively to reward systems
- Netflix was rated the highest in terms of content layout
We found that 90% of kids play games on tablets while 67% play on laptops and desktops. This provided valuable information for us to emphasize on the tablet experience. We also found that there was low engagement on the existing UME Academy Arcade website with 40% of children playing on it and among those who did play it, 75% of them only played on it for 15 minutes or less. We discovered that kids respond well to reward systems and found that a netflix-like content layout was rated the highest, which provided a guideline on how to design the navigation of the website.
Interviews
We conducted three interviews of UME Academy staff and teachers and this is what we found:
“They love playing each others games.”
“Parents want to know what their children are learning at camps.”
“Kids are sensitive to feedback.”
“For star students, we want to encourage their work to be showcased.”
Due to the change in scope from a main website to a single arcade web page, we took this as an opportunity to think outside the box and creatively expand a single webpage to a unique arcade website experience. The challenge was to creative a comprehensive arcade website while not having the experience of a typical website. We did a comparative analysis of other kids gaming websites and found that large buttons, colourful contrast, and big thumbnail imagery were common elements in each website. After collecting all the data that we could during the research phase, we summarized a set of main features to incorporate into the new arcade experience:
- Featured Games
- Prizes
- Leaderboard
- Share Option
- Design Process
We also created a user persona based on the research that we did. Please meet Ashley.
She’s a very creative 9 year old who currently enrols in a UME Academy program. She especially loves playing video games and would often steal her parent’s iPad to play games. She is proud of her games and wants to know if others have played her games. Ashely also wishes she can share the games she’s been creating to her classmates and family. Her main disappointment is when she runs into games that are not playable.
The userflow diagram above summarizes all the major tasks the user can do when navigating through the arcade website. Naturally, the top decision diamonds represent the page links for the top navigation bar for the website. As the animation shows, the main feature would be to select a game to play and the subsequent options are available after selecting a game. This helped to clarify how the features were presented to the user in the grand scheme of things and where they are presented.
We designed three different layouts for our responsive web homepage (as shown below) to meet the screen sizes for desktop, tablet, and mobile. Under the main title, we decided to showcase the featured games in a wheel-like manner to create a dynamic and interactive experience as they explore the new games of the month. You’ll notice that the arrows to navigate left and right to other games aren’t on the tablet and mobile screens because it will be done through a swiping carousel gesture.
Prototyping & Testing
Our survey data pointed out that students respond positively to reward systems and just like at a traditional arcades, we wanted to include the ability to win and earn prizes. As each game gets played, it receives one coin/token and each download equals five coins/tokens. As each game earns more coins, they unlock various prizes in the form of attractively beautiful gems giving the creator of the game a sense of achievement. This is a great way to show the creator of each game that others are interacting and engaging with their game.
We wanted to replicate that feeling of standing in front of the prize counter at an arcade and aspire to earn each and every one of them with coins/tokens. We decided to connect each prize in a linear fashion to give that journey pathway experience of achievement. We wanted to increase the user experience by sprinkling “micro-experiences” throughout our website. We did this in our prize page by including “mystery boxes” to unlock as each student’s games grew in popularity. It gives each student that extra motivation to reach those milestones and discover that unique prize that’s hiding inside the mystery box.
Another challenge we faced was that our client didn’t want the students to register for their own account and profile. This made it hard to account for all the coins each student would earn if someone were to clear the cookies from their internet cache. Instead of tracking coins and attaching it to a student profile, we decided to attach it to each game that was uploaded to the website. Given that the traffic of the arcade website are mainly UMA Academy students, we found it reasonable that 500 coins summed up for each play and download per game would be an appropriate amount of top achievement.
We wanted to include all the options to download, share, and play the game into one section. The “View Design Process” button takes the user to another page describing the program curriculum as described in the features above. The blue “Life Sciences Program” text is a hyperlink to UME Academy’s corporate website and is mainly for parents to find out more about the and enrol their child into the program. The list of prizes are showcased here as well as the total coins earned. Screenshots of the game are available on the right to quickly browse what the game looks like before starting to play.
To further motivate students to design great games, we created a leaderboard to inspire other students to play and find out what made the top 10 games so popular. This also follows the theme of the traditional arcade games whereby top players/games get ranked with the most points. In this case, the points are represented by coins.
Insights Learned
Given the series of obstacles encountered at the beginning of the project, we were able to create a website that the client was happy with. We received praise from the client saying that we addressed all the major issues they had with their current website. This was a huge success!
Recent Projects
