Juni Learning Video-chat

An integrated video-chat platform aimed at helping Juni Learning instructors provide effective programming instruction.
Role → UX designer
Timeline → Jan. 2025 - Mar. 2025
Software → Figma

01

Context and overview

Learning about design through… designing for learning? Huh?

This was a 10-week undergraduate design project where we were tasked to extend or redesign a widely-used web or mobile app for a user population of stakeholders working within a professional organization. We chose to focus on Juni Learning, an virtual educational platform that provides one-on-one tutoring by qualified instructors to K-12 students.

Why? Online learning scenarios are ever-increasing as our world becomes more digital and our learning environments more remote. By designing for a virtual learning platform, we get the opportunity to dive into the complexities of remote collaboration, workflow efficiency, and educational platform design that shape the future of education globally.

What I did

  • During our product development phase, I developed the initial UX flow for our intended experience, low-fidelity prototype, and high-fidelity prototype screens and interactivity within Figma.
  • I iterated upon our high-fidelity designs based on feedback from user testing.
  • I had a supporting role in our user research phases, co-conducting interviews with our user research lead and taking notes.

02

The problem

Talking to actual instructors

We interviewed two current instructors at Juni Learning. Both of them reported extensive use of third-party platforms to aid in their teaching with Juni Learning, namely…
Zoom, for live conferencing
Slack, for internal communication
Google apps, for scheduling and notetaking
Juni itself, for administration
BlueJ, for advanced lessons
Replit, for bug issues with Juni's IDE

That's a lot of platforms!

I know, right? They gave us a laundry list of key pain points with Juni's current instructor experience, the most relevant of which included...
  • Unreliable session note-saving within Juni's current platform forces one of our instructors to use Google Docs to keep track
  • Their current method of giving feedback on students' code is through Zoom screen-sharing, which has proven a total headache as they cannot make direct real-time edits
  • Even though Juni has its own IDE for instructors to teach code, they still have to use external tools like BlueJ and Replit sometimes because some core teaching functionalities are missing from it!

Okay... so what?

This insight into their work life helped us immensely with defining, understanding, and contextualizing the problem we are trying to solve. As a result of our user research process, we came to a clear problem statement:

Juni Learning instructors struggle with a fragmented workflow, juggling multiple platforms that take time away from student learning.

03

Ideation

Turning insight into a vision

Now that we know exactly what the issue is, it was finally my turn as one of the UX designers in the team to step in and start thinking about solutions. I came up with an idea for how we could extend the current Juni Learning platform to address their core challenge of juggling multiple platforms.

An integrated video-chat platform?

The core of this flow is a video-chat platform, obviously meant to replace Zoom as their communication method of choice. It'll be integrated directly in their Juni portal -- no need to log in externally.

Not only that, it also comes with features that replace the need for most of the external platforms that instructors currently rely on, like Google Docs, BlueJ, and Replit.

As a result, this flow aims to combine most of the external platforms that Juni Learning instructors juggle into one complete experience, so that they are able to focus more on their students' success.

04

Design

Translating our vision into reality

With our core user flow established, I created wireframes to quickly test our prototype with instructors, gather feedback, and iterate early.
Again, the video-chat platform would be built directly within Juni's interface for instructors. Upon clicking the Start New Session button, the instructor would be taken to their video conference with their student.

The platform is heavily inspired by Zoom in its UI. By keeping it familiar for our intended user base, we lessen their cognitive load of trying to learn a new platform.

Key features include:
  • Embedded session notes for easy access during lessons, reducing click fatigue.
  • Live editing for real-time collaboration between instructors and students, replacing the need for screen-sharing workarounds.
  • A streamlined sidebar housing additional teaching resources, keeping everything within reach without cluttering the workspace.

Into the hi-fis

Before jumping into the polished screens, we met again with the same two Juni instructors from earlier to get their thoughts on the wireframes. Overall, users appreciated the accessibility and streamlined interface but faced challenges with visual feedback, icon clarity, and layout flexibility. We took their feedback into account when designing our high-fidelity mockups.
Overall, we attempted to emulate Juni Learning's visual design system through use of same colors, typeface, and use of rounded corners. We did this through referencing screenshots of Juni Learning's website that were provided to us by the instructors we interviewed.
  • Deep purple is the dominant color scheme
  • Typeface used is Graphik (same as Juni learning's website); Consolata for the live code editor (also same as Juni Learning code editor)
  • Use of rounded corners in the rectangles and buttons

It's cute, but what about functionality?

We felt the same. Even though we addressed their concerns with the wireframes with this hi-fi... what if our design decisions don't work as we intended them to? A second round of iteration is needed.

05

Polish

Going the extra mile

To further refine our prototype, we met one last time with our lovely Juni instructors to get their thoughts on the first version of our hi-fis. Overall, there were no glaring usability or functionality issues (good!), but they gave us a few suggestions on improvements.

Code editor refinements

In the first version of our hi-fis, we had an alternative screen for the live code editor. This version was designed to provide more horizontal space for the code editor, creating a fullscreen-like experience for both instructors and students. This feature is particularly beneficial for advanced coding students who write longer lines of code and require additional horizontal space.

Our second stakeholder preferred the alternate screen, citing its ability to emphasize the primary task—coding—while making better use of the sidebar’s empty space by integrating the menu bar within it. However, she also appreciated the original layout for its efficiency in minimizing unused space. Ultimately, she highlighted the importance of customization, valuing the flexibility to adjust window sizes as needed. Based on this feedback, we implemented an option to toggle between both views, allowing users to choose the layout that best suits their workflow.

Furthermore, our first stakeholder mentioned their preference for the alternate screen but pointed out that a greater contrast between the sidebar and code edit frame would have been helpful for visual clarity. As a result, we added a thin boundary with a lighter shade of Juni’s signature purple color to clearly separate the sidebar from the code editor.

General UI refinements

During user testing, our stakeholders also offered general feedback on the visual design and consistency of our screens.

One described their preference to move the menu bar to the side in order to make use of the empty space.

Additionally, they questioned the purpose of the green dot next to each video participant’s names. Did it show that the participant was talking? Or that they were merely on the call? Our user expressed that this status symbol was confusing and redundant, contributing to visual clutter. As a result, we removed this icon on all screens.

Lastly, our stakeholders mentioned that the corner radius of the menu buttons could be increased to more closely align with Juni’s current branding, which aims to convey a friendly learning environment given that most learners are young. Our after screen shows rounder buttons with double the corner rounding.

06

Final design

Teach, edit, and reflect — all in one platform

This Juni Learning extension is a video chat platform with integrated live code editing and session note-taking, designed to minimize the need for multiple external tools and keep their focus on student learning.

Screenshare and chat

Juni Learning instructors can take control of their lesson plan by sharing their screen as well as chat with their students if any technical issues arise.

Edit code in real-time

Instead of providing ineffective instructions through Zoom screen-share, instructors can jump right into their students' code files and provide feedback and make edits on the spot.

Take notes with ease

No need to keep an external Google Docs collection of notes -- just type directly into the session notes sidebar and keep your notes up-to-date with automatic syncing.

Get help when you need it

Instructors no longer need to create help tickets in Slack for their administrative worries -- it's integrated right in the video-chat platform.

Figma click-through

07

Conclusion

What I learned

Design takes time and a lot of grit. Even with a solid team, there's no getting around hard work. Although I am proud of what we created, there are still so many different ways we can tackle their pain points -- there is always something more to iterate upon.

In retrospect...

  • I'd go back to the ideation phase and explore more possibilities and unique ways we could have solved the same problem.
  • Time management is key. Even though we had set deadlines for each phase, we definitely could have delivered something of even higher quality.
  • Collaboration with my team was done entirely remotely and asynchronously. I wonder how much different our final result would look if we designed together in person.
← Home
→ IKEA AR Map App