Deliverables for Sandbox, a Collaborative Project
I spent week three of my GA UX Design Immersive working with two other UX students and three GA Web Development Immersive students to create a website.
The web development team presented Sandbox to us, the UX team, as a website for learning CSS coding. Sandbox displays components you might create with CSS for a webpage such as text or images and allows you to edit them while seeing how the coding is affected.
User Flow
At the beginning we wanted to figure out how users would use this site and the most efficient flow of their operations. We created and administered a survey to collect data and arrive at some answers.
The user flow below shows how a user can navigate the site and provides a solid skeletal structure to work around.
Can We Get a Mock-Up?
Once we had a skeleton to dance with we needed to convey these structural ideas visually in a way that the user would understand. Pictured below is how the website was initially designed by the web development team followed by a mock-up arrived at by the UX team.
There are three areas of focus when viewing a page from this site: Toolkit, Output and Code. Toolkit is used for manipulating attributes of an item such as text or image, Output shows the effects of the user’s manipulations, and Code displays the CSS code used to obtain the effects.
We wanted the user to intuitively understand these three areas and sought to achieve this with our proposed UX mock-up.
Closing Thoughts
The Sandbox project was a swell learning experience and a week well spent. Interacting and collaborating with the web development team put in perspective how UX and web development work together. I look forward to future collabs.
