top of page

Role

Product Designer

Contribution

User Interface
Animation

 

Tools

Axure Pr
Adobe Photoshop
Adobe Illustrator 
Figma

Team

4 Designers

Overview

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.

front.gif

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

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

Problem.png

Solution

> 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

front.gif

> 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

564f5e6b4da8363152cff2ea_image04.gif

> 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

564f5e1417585696682a2c3b_image03.gif

> 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

564f607e4da8363152cff3a1_image01.gif
564f60ddc60ecb2f524a507b_image00.gif

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