top of page


Product Designer


User Interface



Axure Pr
Adobe Photoshop
Adobe Illustrator 


4 Designers


To launch a new online, mentor-guided course in four weeks, I assisted in the design of an interactive code challenge for learning SQL with a product team. I participated fully in the entire process from the beginning to the end. It was my responsibility to create the visual and interaction system, as well as to design the user interface transitions, including documentation, guidelines, and specifications. Moreover, I worked closely with developers on testing and design implementations.

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


Launching Data Analysis Circuits

Data Analysis Circuits teaches students how to gather, analyze, and depict stories through data using SQL, Excel, and visualization by providing them with slideshows, quizzes, videos, and interactive coding challenges within the browser.

Creating a fun and easy to use interactive code challenge was our goal in order to assist students in learning SQL online

T he Five Weeks Design Process

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


Problems encountered with the first prototype

> An empty space on the right side of the SQL editor
> The scrolling of the data table makes it difficult to follow instructions
> It is hard to notice the transition from step 1 to step 2 after clicking “run”



> An empty space on the right side of the SQL editor

A column with more horizontal space makes instructions easier to read and requires less scrolling
> The scrolling of the data table makes it difficult to follow instructions
The run button was moved from the right to the left to make it easier for the user to see the instructions after clicking run after viewing the written query
> It is hard to notice the transition from step 1 to step 2 after clicking “run”
Clearly distinguish between Completed Step, Current Step, and Inactive Step

Creating delightful moments through UI transitions

As you learn SQL via raw data and tables, it can be a lot more intense and time-consuming than learning HTML and CSS. Also, the state changes on the internet often include default hard cuts, which can be challenging for students to follow.

My intent was to create moments of delight by designing UI transitions, especially during times of change. Most of these moments are focused on orienting students to the interface, guiding them through or establishing visual connections.

I created documentation to create a system that allows for a unified experience across the product since it was the team's first time implementing UI transitions.

1 — OnClick, if correct


> The current step header of the accordion menu illuminates green to indicate success. As the green slide in, users' attention is directed from the code editor to the instructions column by the animation. This makes it easier for users to see the results of their actions.
>A check glyph appears immediately after the green slide in, reinforcing the success of the simulation. It should appear gradually in the title bar, pause momentarily in the center, and then slowly drift out toward its final position to the right.
> The schema tab changes to the results tab, where a table of data is displayed for the query
> The next accordion menu section opens to seamlessly advance the user to the next step

2 — OnClick, if incorrect


> A schema tab toggles to the results tab, revealing an alert div that details the query error; a more subtle transition compared to a successful query

> In the event of an error again, the previous alert div fades out and is replaced by a new alert div that fades in so as to provide status information and provide feedback.

3 — Hint reveal


> OnClick, the "Show Hint" button transforms into a hint. From the original position of the button, or top left corner, the morphing radiates outwards for a seamless transition that allows users to visualize the results of their actions

> When possible, reutilize the text from one state to the next so that visual consistency is maintained. For instance, "Hint" slides to the left to change from button text to Hint title

4 — Switching steps

> All current states are maintained during accordion panel transitions

> Every panel should be able to be toggled open by clicking on it, thereby revealing its contents. There should be consistency across all animations.

> In order to minimize scrolling and avoid confusion, only one panel of the accordion should open at a time

5 — Tooltip


In order to engage users in a friendly manner, the hovering tooltip has a slight bounce.

Test, Iterate, Launch

Using Rainbow Spreadsheet, a collaborative user testing method for sharing insights and data, our team conducted six user tests in order to validate our assumptions. Initially, users viewed an introductory video and then absorbed information through a slideshow, followed by an exercise in the SQL editor. 

Result & Impact


  • Students successfully completed the first SQL challenge in 89% of the cases.

  • Since the launch, over 2,000 students have taken the courses.

bottom of page