Designing brand identity and prototyping an internal coding platform with guided learning features for an advanced programming education startup.
Product Design Intern
Product Design
UI/UX
Prototyping
May - Aug 2022
1 Manager
3 Developers
Figma
Zepline
In their transition to online learning, Ursa Technology struggled to maintain the quality of guided instruction available onsite. A lack in a centralized digital solution exposed issues such as administrative difficulty and instructional content redundancy. Ursa wanted a change from this summer.
Friendly
Interface
The use of see-through panels, warm gradients, and glassy buttons creates a feeling of depth in the user interface.
Feeling confident?
Here's a friendly reminder for syntax format!
Feeling shaky? Follow the steps and relearn the logic and procedure behind!
Industry Application
You're not just finishing up this question--you're practicing to make real-life impacts, in the near future.
"Can I audit the class?" Believing that constructing an effective configuration requires developing my prototype in its actual context, I joined a lecture on game development at office once. Two important notes:
Before my time, the faculty had to manage homework assignment and submission with multiple coding platforms and email communication.
Instructors teach the same syntax over and over again to students for memorization.
Competitive Analysis. I analyzed main and side features of 14 interactive code-learning platforms, which quickly helped me identify the essentials components for a viable coding product.
User Interviews. I conducted 3 user interviews and 2 stakeholder interviews. I furthered and solidified insights by scripting 50+ diverse opinions from workers, educators, and professionals on discussion websites (Quora, Reddit, etc.)
Majorly inspired by my research insights, I sat down with the CEO and pitched many ideas. While a bunch were crossed out, we both nodded on adding side features as the new direction.
From there, I defined my 3 main product goals:
Support core functionalities with a panel-based user interface.
Provide guidance seamlessly with clean incorporation of side features.
Boost motivation and engagement by staging vibrant, welcoming, and calm visuals.
Industry Application
Sweet and short fact to pique student’s motivation on mastering the concept on view.
Live Commenting
Inline annotation system enabling highlights on specific portions of students’ code.
On hold for future launches due to the huge frontend and backend development effort needed.
Get Help
Pre-populated message board for students to fill in and communicate difficulty to instructors via email notifications.
Never shipped because the communication hassle can be easily avoided by purposefully using existing communication platforms like Slack and Discord.
Hints
Step-by-step breakdown on the coding concept of the day, carefully crafted by instructors.
I consulted my engineering team on multiple dashboard layouts. By empathizing with their programming habits and personal preferences, I optimized for a version of low mental and physical effort.
Before
"Interesting gamified design. However, I think it's a lot of going back and forth for a site I use often."
After
"When I think of a terminal design, I think of a left panel and a right panel. This is great!"
In the internal testing session, the overarching feedback was that the placement of panels and features was unintuitive and confusing. I resolved this usability conflict by:
Grouping input panels, output panels, and side features.
Removing overlapping area usage of reference and feaback features.
Dividing the terminal dashboard into distinct subareas.
Iteration 1
"The pop-up feature overlaps the input panel. This shouldn't happen."
Iteration 2
"The control center on the top-right is busy and not handy."
Iteration 3 ✅
"Very clear layout! Let's go with this one!"
Before
Limited color contrast between the white description board and the light-beige background.
After ✅
Outlined transparent panels featuring three layers (light-orange background, question description, and input box).
✅ Convenient to find all practices information on one platform.
✅ Unintrusive to check hints and industry applications at a glance.
✅ Interaction design on error and success messages is engaging.
Desktop view
Tablet view
I once had a long list of features and they helped me scope by detailing the development efforts and illustrating some existing solutions. My software engineering co-workers were one of my main sources of inspiration and assurance.
Unlike other known products like Khan Academy, my coding terminal is meant to be an addition to instructor-led teaching, not a replacement. With this in mind, I avoided drilling on UI and UX designs that may come off as too heavy-handed or replaceable for students.
The internal testing and hi-fi testing sessions expanded me with areas of improvements that I can’t possibly think of on my own.
The testing sessions humbled me and pushed me to make better design decisions, and I wish in future opportunities I can budget more user testing sessions.