The Sandbox: Deliverables

The Sandbox is an online tool that helps users learn basic CSS. Users can edit pre-generated text or an image using a number of filters and attributes and watch the CSS code associated with the element change in real time. As the user changes the border radius of the image, for instance, the code will update. The Sandbox was brought to life by a group of talented developers in the Web Development Immersive course, with Matt, Tyler and myself contributing to the UX of it all.

Below are wireframes for The Sandbox, the latter of which incorporates our proposed style guide:

Here is the original user flow. In terms of user stories, we focused on a student first learning code and an entrepreneur educating themselves on CSS because they’re interested in building their own e-commerce site.

Really enjoyed our first collaborative project — it was a great learning experience.