Table Of Contents

Prologue - Client Background 
Act 1 - Research Process and Findings 
Act 2 - Project Planning 
Act 3 - Prototype Development 
Act 4 - Project Scope Expansion
Act 5 - High Fidelity Prototype
Epilogue - Upcoming Features



Our design team was contracted by Unruly Studios to design the onboarding experience for their educational gaming and programming language learning app. 

Their Unruly Splats app will be commercially released by early 2018, so an MVP for onboarding was needed before December 2017, giving us only two weeks to submit the project. With my team's collective previous experience in the video game development, I was confident my team members and I could complete the project.


Unruly Studios is a Boston-based EdTech startup. They create interactive games to empower kids with critical STEM (Science, Technology, Engineering & Math) skills while encouraging physical play and social engagement.

Their Unruly Splats products are programmable electronic floor tiles that kids can control with a visual coding interface based on MIT’s Scratch and Google Blockly.




The primary objective of the Unruly Splats application is for users of any technical aptitude to learn and create custom code for the Splats device with the Scratch programming language. The secondary objective is to create a community of Splat users to encourage collaborative learning. 

However, Unruly Splats was just an iteration of Google's Blocky program. The application is not comprehensive enough to independently help children learn the Scratch program, neither is it engaging enough to support a community of different users.

With this realization, my team and I devised our problem statement:

"The Unruly Splats application does not sufficiently onboard its users to the capabilities of the Scratch programming language."


My team and I played popular mobile games to understand their onboarding process. We then analyzed Splats's own deficiencies with onboarding. My team and I concluded that the Splats app's primary issue is there is no integrated tutorial system within the app.

Unlike the other mobile games, Unruly Splats provides no information or indication about how to interact with it. As such, a user is unable to understand the Splats app's functionality unless they're familiar with the Scratch programming language.


Affinity Map for Unruly Splats design ideas

We synthesized our research in an affinity diagram to reach a consensus on features we should implement in our Splats revision.

1.) Giving the user control
the user retains total control at all times 

2.) "Funneled Actions"
Tutorials designed for the user to only proceed by inputing the correct answer 

3.) Approachable teaching
Ability to pull up tutorial about any aspect of the app at any time 

4.) See and Do at the same time
Follow-along by performing a new function while it's introduced 

5.) Motivate by showing progress
Create desire to improve with a gamification system

6.) Indicators should be prominent
UI highlights important call-to-actions 

7.) Content should be engaging
The user's presence is always acknowledged 

8.) Mascot!
The app needs an identifiable character for children to recognize

Unruly Splats Design Team


With our research completed, we worked on the objectives of our app redesign. As the target audience is 6-12-year-olds, the app should be informative and streamlined for new users to operate without additional assistance. Additionally, the app should also be engaging to support communities of different users.

We condensed our intentions into the following problem statement: Design an onboarding process that introduces users to the features of the Splats application.


user profile for Unruly Splats

We created three user profiles for our Splats application.

Sarah - "Active Social Gamer" 

  • Curious 8-year-old that likes trying out new casual games with friends. The first-time Scratch user that learns by doing.

Jim - "Gadget- Enthusiast Gamer Dad"

  • Competitive 38-year-old ex-hardcore gamer, that wants his kids to get into technology. Likes learning everything about a new gadget or product before using it.

Karen - "Super Cool Teacher"

  • Tech-Savvy 32-year-old elementary school teacher. Wants to learn new technology that she can use to teach kids about coding.


The Splats games are children's' educational applications, so my team and I deemed it critical to for users to create personal accounts to track their aptitude with coding. 

Furthermore, The Splats device is a commercial product that will likely be purchased by parents and teachers, so it's best to create features that would interest both groups. We proposed one planned feature to be parents and teachers helping their sons, daughters, or students learn to code using their own Splats accounts.

As such, my team and I proposed creating three types of Splats accounts. 

1.) A "Student" account - This is a standard Splat account 

2.) A "Parent" account - this account can connect to student accounts to track its process and review their code once its granted permission by the student account. 

3.) A "Teacher" account - this account can create separate student accounts that will be automatically connected. Teachers account will need to sign up with an email from a school that has a teacher's license.


My team and I devised a site-map and screen sketches to conceptualize the architecture and visuals of the primary features we plan to implement.

Login screen - This screen will allow to create an account type (student, parent or teacher) or log into an existing account. 

Browse - A "menu select" screen enabling users to select one of four "game modes" in Splat application.

Create (Game Mode) - users have the ability to either code original Splats games or modify the code for pre-loaded Splat games.

Tutorial (Game Mode) - a "Funneled-Action" game mode that teaches the basics of Scratch code with a step-by-step process.

Play (Game Mode) - Users can either play built-in Splat games or games from the Splat community.

Community (Game Mode) - Users can download games from different Splat users.


Evolution of Otty the Octopus

Otty the Octopus was the mascot we created for the studio as brand recognition and a tutoring mechanism with the target market (children 6-12). The following lists our thoughts behind the mascot's evolution.

    •  We chose an octopus because they shoot ink as a defense mechanism, which is consistent with the Studio's "Splats" theme.
    •  No other brand my team and I could of uses an octopus, making the mascot unique.
    •  The octopus arms create opportunities for point to call-to-action items with dynamic and lively animation.
    •  An octopus is typically considered a gender-neutral animal. We also choose purple for that reason.


screens for Marvel Pop Prototype
Play the Marvel Pop Prototype!

Warning: A non-numeric value encountered in /home1/wafzeg0aas3g/public_html/wp-content/themes/pinnacle_premium/lib/build_slider.php on line 21

To prepare for usability testing, my team and I created a "clickable" paper prototype in Marvel Pop using sketches of the following Splats application screens.

  1. The Intro screen
    • the screen to introduce Splat's features 
  2. The "Game Mode Select" screen
    • Log into your personal account on this screen
    • choose which mode to engage with 
  3. The "Create" screen
    • You can create or modify game code for the Splats devices. 
    • Earn "Stars" by demonstrating in creating or modify code.
    • Top Center screens show total number of Stars 
    • Virtual "Splat devices" for hardware feedback
  4. The Main Menu
    • Select the "Splats" logo at top left to navigate to different screens
    • Also change account settings and view account statistics 
  5. The "Learn" screen
    • Select different tutorials of basic Splats app functionality 
  6. The "Tutorial Map
    • A visual indication of the progress made through all the tutorials 


We ran monitored usability tests with five individuals: two females (a 5 and a 30-year-old) and three males (two 30-year olds and a 45-year old)

The test revealed the following insights 

  1. Differentiate Home icon from Splat icon. we used the Splat icon as the Home icon, which confused our testers 
  2. Add more controls - undo/back buttons. Testers were unable to navigate back to previous screens. 
  3. Quest page needs to be explained better - use Otty. The Quest page offered no context about it's purpose or functionality. 
  4. Need Call-to-Action on the front splash screen. Need a clear indication of how to launch the application. 
  5. The Play function on the Tutorial page's is unclear. - Testers were confused about the purpose of the Play button on the Tutorial page. 
  6. The star system for completing quests is not explained. - Testers were confused about how the point system work, as we did not explain the process. 


We presented our research findings and design propositions to upper management. While they were overall pleased with our progress, our presentation revealed an oversight in our proposal.

Our team's assignment was to implement an onboarding system for the Splats app. We defined "onboarding" to be the user experience when a user launches the Splats application. However, upper management defined "onboarding" as the user experience when a user turns on the Splats device.

Upper management wanted the Splats device emphasized in the onboarding process, so they requested we also design the experience of a user taking the Splat device out of the packaging. With that realization, we expanded our scope of the onboarding process to incorporate the device.


Splats device disassembled

My team and I noted that there is no onboarding process for connecting the Splat app to the Splat device. The Splat device has wireless capability, so we design a streamlined connection onboarding process utilizing its Bluetooth connectivity.

The Bluetooth connection process is as follows:

1). Turn the Splat device on.

(This makes the Splat device's Bluetooth-discoverable and turns its LED lights solid Green). 

2). Launch the Splat app on a Bluetooth-enabled device.

(This allows the Splats app to detect every Splat device powered on) 

3). Use the "Splats Device Select" screen to choose the Splat device to connect.

(This makes the Splat device's LED lights blink Blue) 

4). Confirm the app's connection to the Splat device by tapping on it.

(This turns the Splat device's LED lights solid Blue) 

As a result of these steps, the specified Splats device will connect to the app. A user can then play games and compose code with the connected Splats device(s).

A user will also be able to initiate the Bluetooth connection process at any time while in the app.




Splats app user flow (with bluetooth process included)

My team and I devised a user flow to visualize the three decisions and overall process a user makes from turning a Spalt device on to playing a game mode.

1). The 1st decision is connecting the Splats device to the app via Bluetooth.
Confirm yes to connect to a Splats device.
Confirm no to continue without connecting a Splats device. 

2). The 2nd decision is to log into an account.
Confirm yes to prompt the account login and access saved progress.
Confirm no to skip login (progress is unsaved). 

3). The 3rd option is to access the Tutorial
Confirm yes to engage the Tutorial Mode.
Confirm No to select the other three game modes.



Warning: A non-numeric value encountered in /home1/wafzeg0aas3g/public_html/wp-content/themes/pinnacle_premium/lib/build_slider.php on line 21

My and team I utilized Sketch, InVision, and the Abode Creative Suite to design the high fidelity versions of the Splats applications. Taking feedback of our paper prototype into account, we made the following modifications:

-Designed custom menu icons for easier navigation.

-Utilized Otty to introduce the Splat app's core concepts (particularly the Star-point system) 

-Created a Call to Action on the front screen for new and returning users. 

-Added game status icons on the Play screen in the "Create" game mode. 

-Presented a brief explanation of the star point system in the "Tutorial" Game mode.


My team and I went to to the St. Stephens Youth Program in Brookline, MA to observe prototype testing with their students. The student body is primarily 8 to 9-year-olds, so we considered them part of the app's target audience. 

We observed that the younger children were less interested in coding than they were with playing games in the app. These children need consistent feedback throughout their interactions with the application, as their attention will deviate quickly.

However, the younger children were extremely interested in making slight modifications to the games (such as changing the game timer and color of the Splat lights). 

The older children, particularly those familiar with Scratch code, were more interested in working by themselves to create an original game to share with friends. 

We concluded the app needs to emphasize two methods of tutorials; 

1.) The standard "funneled" tutorial present in the "Learn" game mode for users coding an original Splat game.

2.) Also, an "incremental" tutorial available in the "Create" and "Play" game mode, that allows users to only modify particular portions of a game (such as a game's aesthetics). 

We reference these conclusions to further highlight Otty's tutorial prompts in the aforementioned game modes.


Among the high-fidelity prototype and other deliverables, my team and I also submitted a "Learning Strategies" document, which details the purpose and process behind each of the prototype's features. The document's intention is proposing how Splats would work in an educational environment, as that is the application's most suitable industry.

Upper management was satisfied with the deliverables we submitted, as they had enough time, direction and resources to implement our suggestions for the application's commercial release early next year.


My team and I were satisfied with the work we submitted for Splat's onboarding UX design. Nevertheless, there are some application features we plan to develop further if given the chance. They are as follows


  1. Add support for connecting many splats in educator packs.
  2. Test onboarding for connecting Splats using physical Splats. 


  1. Understand where in the app children are likely to explore. 
  2. Create multiple levels of of assisted-coding, to accommodate both young and older children.

Making it fun

  1. Add animation during onboarding to make it more interactive. 
  2. Develop a richer rewards system with more incentives to engage kids. 
  3. Make a arcade-style "High Score system for the built-in Splat games


  1. Make Otty orange to keep him consistent with the brand. 
  2. Use Otty's arm as a Call to Action function


  1. Explain the difference between the different types of accounts. 
  2. Implement the sign-in process for each type of account
  3. Enable "Account Review" functionality for Parent and Teacher accounts


  1. Design the content layout for the "Community" Game Mode. 
  2. Figure out how different users can interact with each other.