In Summer 2015, I was part of the product team at General Assembly to launch Data Analysis Circuits, a new online, mentor-guided course. In four weeks, we designed an interactive code challenge for learning SQL.
As a product design intern, I was involved in the product development process from start to finish. I collaborated with the team to create the visual and interaction system as well as design UI transitions, which includes documentation, guidelines, and specs. I also worked with closely with developers for QAs and design implementations.
Circuits is a mentor-guided online course in Web Design, UX Design, and Digital Marketing at General Assembly.
In Summer 2015, PMs, content producers, designers, and developers worked together to launch a new course in Data Analysis.
Data Analysis Circuits teaches students to gather, analyze, and tell stories through data with SQL, Excel, and visualization through activities such as slideshows, quizzes, videos, and in-browser interactive code challenges.
> Dead space on the right side of the SQL editor
> Lots of scrolling gets in the way of following instructions while looking at the data table
> Hard to notice the transition from step 1 to step 2 after clicking “run”
> Dead space on the right side of the SQL editor
More horizontal space on the instruction column = less scrolling & better readability
> Lots of scrolling gets in the way of following instructions while looking at the data table
Repositioned run button from the right to the left: easier to direct user’s eye from the written query to the instruction column after clicking run
> Hard to notice the transition from step 1 to step 2 after clicking “run”
More clear distinction between Completed Step, Current Step, and Inactive Step
When using raw data and tables while learning SQL, it could get pretty intense and sometimes tedious compared to learning HTML & CSS. Besides, state changes on the web often involve hard cuts by default, which can make students difficult to follow.
To create moments of delight, I designed UI transitions, especially at moments of change. Many of these moments center on helping a student orient themselves to the interface, find their way around or establish visual relationships.
Because it was GA's first time implementing UI transitions, I created a documentation to develop a system that allows for a unified experience across the product.
> Current step header of accordion menu lights up green to convey success. The green slides in like a progress meter; the animation directs the user’s attention from the code editor to the instruction column. This helps users visualize the results of their actions
> A check glyph appears as the green slides in, instantly reinforcing the success. The check glyph should ease in to view, pause momentarily in the center of the title bar, and then ease out towards its final position on right.
> Schema tab toggles to Results tab, displays query in the form of tabulated data
> The next section of the accordion menu opens to gracefully move user along to the next step
> Schema tab toggles to results tab and reveals an alert div that details the query error; subtle transition compared to successful query
> When incorrect again, previous alert div from first try fades out and is replaced by a new alert div that fades in in its place to communicate status and provide feedback
> OnClick, “Show Hint” button morphs to reveal hint. Morphing radiates outwards from original position of button, or top left corner for a seamless div transition that helps users visualize the results of their actions
> Where possible, maintain visual consistency by reusing the text from one state to another. Ex. “Hint” slides to the left to morph from button text to Hint title
> During accordion panel transitions, all current states persist
> Each panel should be able to be toggled open onClick, revealing the panel’s contents. All animations should remain consistent
> Only one panel in the accordion should open at a time to avoid confusion of steps and reduce scrolling
Hovering tooltip has a subtle bounce to draw the attention of users in a friendly way.
To validate our assumptions, our team conducted six user tests using Rainbow Spreadsheet, a collaborative user testing method to share insights and data. Users began by watching an intro video, absorbing the information through a slideshow, followed by the SQL editor as an exercise.
89% of the students completed their first SQL challenge successfully
The product plans on using this product for other purposes at GA - such as the teacher training tool
More than 2,000 students have taken Circuits since the launch.