top of page

Role

UI/UX Designer

Team

Solo Founder

Tools

Axure Pr
Adobe Photoshop
Adobe Illustrator
InVision 
Figma

Overview

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.


In line with my non-disclosure agreement, confidential information has been withheld.

front.gif

Launching Data Analysis Circuits

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.

The goal was to help students learn SQL online by creating an interactive code challenge that's educational and intuitive

T he Five Weeks Design Process

56460f3b40b7ed805c22c690_design-process.png
Screen Shot 2021-12-23 at 2.20.28 PM.png
Screen Shot 2021-12-23 at 2.20.58 PM.png
Screen Shot 2021-12-23 at 2.21.17 PM.png
Screen Shot 2021-12-23 at 2.21.34 PM.png

Polishing The UI

Ploishing.png

Problems with the first prototype

> 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”

Ploishing.png

Solution

> 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

Creating delightful moments through UI transitions

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.

1 — OnClick, if correct

front.gif

> 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

2 — OnClick, if incorrect

564f5e6b4da8363152cff2ea_image04.gif

> 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

3 — Hint reveal

564f5e1417585696682a2c3b_image03.gif

> 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

4 — Switching steps

> 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

5 — Tooltip

564f607e4da8363152cff3a1_image01.gif
564f60ddc60ecb2f524a507b_image00.gif

Hovering tooltip has a subtle bounce to draw the attention of users in a friendly way.

Test, Iterate, Launch

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. 

Result & Impact

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 courses since the launch.

bottom of page