Web Wizards
A web application that allows kids to learn web development through a kid-friendly drag-and-drop framework.
A web application that allows kids to learn web development through a kid-friendly drag-and-drop framework.
Web Wizards was my 2018 University of Washington Informatics Capstone project. My team (two developers & two designers) designed and built a functional web application in 6 months that we presented to faculty and peers at the annual Capstone Event. As the UX designer and researcher for our group, I conducted user studies and analyses to create an intuitive, kid-friendly design.
Kids are interested in coding. We know this because we have had experience teaching them in coding classes before, but we also learned through this experience that teaching web development can be extremely difficult. There are many barriers that children encounter with the unfamiliarity of using computers and coding – from navigating a computer interface to remembering coding syntax.
Our team set out to create a web application that alleviated the problems mentioned above by allowing children to simply click and drag blocks of code to build websites in real time. Instead of having to learn to use a coding editor from scratch, our users could piece together blocks of code to build a website in minutes.
I sent out a survey to teachers who had taught kids' web development courses with our sponsor, Computing Kids. The purpose of the survey was to gather information about different teaching methods and their strengths/weaknesses from teachers with real experience.
I visited an ongoing web development class at a Seattle school where I observed student interaction with the content and instructor. At the end, I handed out a survey to the students to gather information about our primary target market. These learnings allowed me to ideate new functionalities for our project, confirm potential use cases, and narrow down our target age group.
I created curriculum to teach a web development course using our application. Using this curriculum, I taught a web development course using our sponsor. The feedback I gathered was used to further improve and design new features for Web Wizards.
(Logged in state) I wanted users to be drawn to the Create button right off the bat since this is the main action we want our user to immediately think about. Below, they can see their "tier level", which is a gamifying feature we added to reward kids for using the program. We added a tooltip that pops up when user hovers over "How to gain more XP?", to provide clear instructions. Underneath, kids will see screenshots of their projects and their titles. Clicking on a project will take them to that page's editor.
It was imperative to ensure kids could easily understand messages that warn them against posting personal information or deleting their projects. I created these types of messages throughout the site, with this warning in the Create Modal screen as an example.
In my research, I asked kids what animals they enjoyed most. I created avatars based off of their responses, and designed a tier system that ranges from Beginner Wizard to Master Wizard. The experience structure rewards users for using our application, by offering incentives like new avatars.
Some of the barriers that kids face in web development are having to remember syntax such as carets ("<", ">") and backslashes, as well as having to type the code. This inspired us to create a drag-and-drop interface where children can become familiar with the code without having to encounter these discouraging barriers. They can drag and drop new blocks from the left to the right side of the screen, re-position blocks in the editor, and drag blocks into the trash can to delete them.
When hovering over a block that they have created, kids will see a pencil icon that opens a style-editing modal. Different block types have different options. For example, the <img/> block will have a src attribute to add images while this <h1> block does not. Because there are many different styles to be considered, I organized styles under six categories.
Here is an example of the border styles being edited. Upon clicking on any color-related CSS style option, a color selection panel opens. I worked with the developers to select a color panel that provides free range in colors but also quick selections on the bottom. This is not only easy for children to understand, but it also helps them learn about how the color wheel and hex color codes work.
In designing a web application for children who have little to no experience with computers, it is important to conduct research to determine what type of features to implement with this age group. I utilized my personal research in a classroom environment to develop user flows and designs and assemble the first kid-friendly image API (that we know of). Our project provides a first-look into how web development, which is normally taught at the collegiate level, can be effectively introduced and taught to young groups.
