Online SQL Editor Re-design
Live SQL
Live SQL is Oracle's free online SQL editor. While it targets SQL beginners, its current experience lacks support to help users master SQL. In this project, I collaborated with the VP and PM to design a beginner-friendly learning experience, enhancing the platform to better support users in their journey to SQL proficiency.
Company/
Oracle
Role /
UX/UI Designer
Collaboration /
VP, PM, Engineer
Year /
Feb, 2024- May, 2024
Final Design
Problem
Master SQL in Live SQ isn't Easy
PM approached and informed that most Live SQL users are college students and one problem is they think there's a gap between Live SQL and other popular SQL fiddle tools in the market. I was tasked to figure out what makes the gap so I can give Live SQL a learner-friendly make-over.
User Research
User Research
Understand What Makes The Gap
Working with a user researcher in my team, I came up with a generative research agenda. My goal is to understand these questions after user interviews.
How's SQL editor being used currently?
What's working and what's not?
What's lacking in the learning experience within live SQL?
Findings
I talked to 6 college students with varying levels of SQL expertise. Here are my findings 👇🏼
Finding 1
Low Resemblance to Other SQL Products
SQL editor lacks the familiar look and feel of a traditional SQL tool, leaving new users unsure of where to start and find things.
Finding 2
Unclear IA and Disconnected Pages
Current information architecture (IA) of Live SQL makes it difficult for users to understand its offerings and navigate. Also, uers feel disconnected when they have to switch between multiple pages to select schema, run query and see results.
Finding 3
Lack Guided Learning
Users want more guidance and instruction, a few users mentioned Codecademy as a good example, saying instructions being displayed alongside the work area make it very easy to follow.
Design
Design
Information Architecture (IA) Simplified
Before
After
Schema to Worksheet
Simplify sub-tabs
Consolidate pages
Schema to Worksheet
Schema is moved into Worksheet so user can select and use schema within context of SQL editor.
Simplify Sub-tabs
My session is simplied. Only NFL and current session is kept.
Consolidate pages
My script, My tutorials, Code library are all learning resources and is consolidated into one tab, so user know offerings by navigation title and can find all resources in one place.
Bridging the Familiarity Gap
I re-designed SQL Worksheet page so beginners can transition to other SQL product with ease after practices in Live SQL.
Before
Re-design is a multiple section layout that has
- resource navigation panel
- SQL editor
- Result/history view
This allows user to use and view information in one place. User can also change size of each section based on their task.
After
Couple user mentioned they'd like to re-run statements to troubleshoot when something goes wrong.
I added SQL history section, as well as Insert into editor support so user can easily go back to history, test and learn.
In-context Tutorials and Learning Assistant
User research findings informed learning by doing is important to master SQL for students.
A collapsible learning panel is introduced in SQL worksheet view. User can open the panel by clicking on library icon, read script or tutorial and run query in SQL editor.
Another feature for future releases is utilizing Gen AI to have a learning assistant in live SQL. Students can ask for reference code, how to questions anytime within SQL worksheet.
.png)
Consolidate Learning Reources
Before
After
Various pages with similar connotations can be confusing.
My Scripts, My Tutorials and Code Library is consolidated in one page and is renamed to Library give clarity on its offerings.
Within Library, I introduced a page called Community that contains all tutorials and scripts to create an environment in which beginners feel supportive, as students mentioned community during interview using online learning forums such as stack overflow.
Within my content, users can create their own tutorial. This used to be in My Tutorial.
After pages being consolidated, this action lives within a tab named My content.
This is mostly used by SQL teachers who create exercise and need to share to students.
There's no tutorial preview before, after re-design for add tutorial module, tutorial creator can get a preview of the tutorial while creating content.
