The Sandbox

This is a website called Sandbox that was created by developers Bryony, Clint, and Aaron with design input from Evan, Matt, and myself. It is an online, single-page tool that enables someone to modify attributes of text (e.g. line spacing) or images (e.g. filter) while observing changes in both the CSS code (displayed in a box on the side and the output).

Bryony, Aaron, and Clint (the product owners and developers) were adamant that the main page have brown text and a sand colored background. This initially posed a substantiality readability issue due to lack of color contrast. We recommended changing the texture color in the sand from black to white, which significantly improved readability while making the background look, if anything, slightly more sand-like.

In the long-run, it will be possible to input your own text and images into sandbox, then use the tool to modify them. In the short term, it also allows you to modify default objects. So, we thought about the user flow in terms of someone first discovering the capabilities of CSS. Perhaps a student considering learning to code, or an entrepreneur considering building their own e-commerce website.

We also recommended adding a summon button that enable to user to rapidly assemble an army of fennecs (a desert fox selected as the website’s mascot).