I'm Kayla Briët, a computing interface designer and artist.
Orange County, CA
UX & UI & Apps & Websites
Hopscotch, a visual programming language for kids.
2019 - 2021
UX / UI design
WHAT IS HOPSCOTCH?
Hopscotch is a visual programming language for kids. A full computing environment to explore the powerful ideas of computing. You can make games, turn your drawings into animations, and build anything you can imagine.
Hopscotch is an open-ended tool for kids with big ideas. You can make anything you can imagine, for example:
HOW HOPSCOTCH WORKS
Hopscotch is an object oriented programming language, in the most literal sense. Kids manipulate objects (characters, drawings, shapes) and make them interactive. Let me show you:
Hopscotch is the first and only visual programming language designed for mobile screens.
1. Add an object
2. Drag blocks of code
3. Play & have fun
Music Keyboard in Hopscotch
In-app music keyboard that allows you to program sounds and music into your coding project. Credits: UX/UI design, iconography, sound asset creation, prototyping, user research, user testing
There were three key design challenges :
Designing the coding language feature itself (object-oriented programming functionality, hierarchy, inheritance, etc.)
Designing a visually friendly, easy-to-use interface
Creating an enjoyable experience that is simple and fun enough for beginner coders to enjoy, but had enough customizable parameters that advanced coders can also tinker with.
Challenge #1: The coding language feature
* a high-fidelity mockup I created with detailed annotation describing how the coding language feature should work in the app.
* Here are some coding language features I designed that didn’t make it into the final cut. (from top to bottom: Arrays, Randomization, Chords)
Challenge #2: Designing a visually friendly, easy-to-use interface
* iterations of musical note icons
Two high-fidelity mockups (annotated with user flows) I created to communicate design possibilities and define scope for the product.
(We ended up launching the product with an iteration of Idea 1.)
This fun play on a MIDI keyboard was my personal favorite but didn’t make it into the final product. Oh well, maybe next time!
Challenge #3 Designing an enjoyable experience
I surveyed kids in the app's community for custom sounds they'd most likely purchase to use in their coding projects.
After collecting their input, I created a sound library of 6 custom instruments kids love.
After rounds of usability testing, we launched a music coding feature usable by both beginner and advanced coders.
Beginners can easily start coding music in just a few taps.
Advanced coders can use parameters to code generative music using math operations, randomization, loops, and incrementation.
In-app currency 2.0
Designed a development program to invite top creators to use in-app currency features in their coding projects. Hit Q4 goal of increasing currency spending in two weeks after product launch. Credits: Program Manager, Program Designer, Branding, Marketing, User Research, Usability testing
Conducted user research to get a better profile of pain points while using in-app currency feature.
Marketing illustrations used on social media marketing campaigns.
Design and SEO for marketing website.