Drag & Drop Mini

 

Drag & Drop Coding For Kids

Our goal was to create a simpler, touch-friendly redesign & future roadmap of features for our coding education platform, "Code Camp World". I led the discovery, prototyping, interaction design & iteration efforts.

     
     

    Discovery & Synthesis

    Initial User Research

    I led interview sessions & conducted usability testing in classroom settings with kids who had used our platform to establish areas of interest for our project. I used this to build mental models of our kids and their current challenges with the platform.

    Prioritize & scope with data

    Once we understood the shape of the challenges, I used a mixture of GA & system level data to try and prioritise the challenges we'd seen in interviews & observation. For example, whether users were mostly not logging into the platform after classes, or not able to complete tasks within it.

    Competitive Analysis

    We looked at other major platforms through the eyes of ourselves and our kids. I evaluated how their features could help solve our problems, or influence how our users saw our platform.

     
    Rather than personas or JTBD, we focused more on using gaming psychology models to understand the interactions needed for a great coding platform.

    Rather than personas or JTBD, we focused more on using gaming psychology models to understand the interactions needed for a great coding platform.

    Having real data to describe how kids used the platform at home gave us hints as to how overall engagement could be improved.

    Having real data to describe how kids used the platform at home gave us hints as to how overall engagement could be improved.

    The styles associated with code blocks became an important feature to get right - trying to figure out the right match of user age and interface feel (e.g. chunkiness) involved a fair amount of competitor assessment.

    The styles associated with code blocks became an important feature to get right - trying to figure out the right match of user age and interface feel (e.g. chunkiness) involved a fair amount of competitor assessment.

     

    Design & Testing

    Explored design concepts

    Constructed array of low fidelity wireframes and prototypes over a wide range of features and test fit for usability & business/technical requirements. There was attempts at low fidelity user testing - however, the complexity of the interactions alongside the youth of the users meant this tended not to be as useful as internal "hallway" testing until much later in the development process, when we had functioning code.

    Developed high fidelity designs

    Worked with a visual designer to create detailed final designs & assist handover to developers. This process involved a great deal of fine tuning to ensure tools had the right feel, with tight deadlines often meaning heavy reliance on our earlier attempts to create style guides.

    Testing & Iteration

    Intensive field usability testing was performed as part of a phased launch, while many ideas for future projects that had fallen out of the delivery process were worked into a roadmap.

     
    The Dashboard for the app underwent a complete redesign, so basic prototypes were necessary early on to ensure the flows actually made sense.

    The Dashboard for the app underwent a complete redesign, so basic prototypes were necessary early on to ensure the flows actually made sense.

    In addition to wireframes, I also was regualrly producing styling concepts - a few usability issues (like distinguishing different code blocks) would require detailed work with the visual designer.

    In addition to wireframes, I also was regualrly producing styling concepts - a few usability issues (like distinguishing different code blocks) would require detailed work with the visual designer.

    One of the chunkier styles I experimented with, before we decided something "flatter" made more sense for our target users' age range.

    One of the chunkier styles I experimented with, before we decided something "flatter" made more sense for our target users' age range.

     

    Impact

    Delivered new coding platform

    Designed, prototyped and tested a tablet-usable experience that has been deployed to more than 10,000 students. The design was able to accommodate both user needs (clearer buttons, easier menu navigation and iPad compatability) and business goals (launch new classes emphasising 3D design, for example).

    Created a roadmap

    Build understanding & agreement on current platform usage & experience pitfalls meant a chance to align our vision for what new features might be built, and how (for example, more immersive tutorials and on boarding). This resulted in a roadmap of new features (like project sharing & remixing for kids) & associated initial designs, fixes & "UX Debt" backlog.