Juni Learning
Juni Learning is an online educational platform providing tutoring for K-12 students. Instructors juggle multiple digital tools for teaching, impacting teaching efficiency and student learning experiences.
In this project, I focused on transforming Juni Learning into a comprehensive, all-in-one platform that eliminates reliance on third-party tools, streamlining essential tasks like live learning sessions, communication, and troubleshooting within Juni itself so that instructors can focus entirely on teaching.
TIMELINE
January 2025 - Present
ROLE
UI/UX Designer
TOOLS
Figma
CONTRIBUTORS
Haley Chan
Soren Boddy
Lanka Diunugala
AJ Sangle
An all-in-one for teaching, calling, and coding
CASE STUDY OVERVIEW
Problem Statement
WE IDENTIFIED A CLEAR PROBLEM
Juni Learning instructors struggle to provide effective programming instruction due to their reliance on switching between multiple platforms for in-session coding, video conferencing, and communication with students and other instructors, preventing them from focusing on student learning during limited session time.
User Research
Our team conducted in-depth interviews with two Juni Learning instructors, Katelyn and Jay, to identify pain points in the instructor workflow. Both instructors frequently used third-party tools like Zoom for student learning sessions, Slack for communication with students and administrative support, BlueJ and Replit for coding, and manual bookmarking to access past student work. This fragmented experience disrupts their ability to focus on teaching.
Katelyn emphasized the need for built-in urgent support and better integration of essential teaching tools, while Jay's experience highlighted inconsistencies in feature discoverability and usability. Both instructors had to supplement Juni Learning's platform with external tools, which increased cognitive load and reduced efficiency.
What I Learned
Iterative Design. I developed the design in stages, continually refining it based on feedback to create a more effective user experience.
A/B Testing. I learned how to test alternative screens to understand user preferences about layout and functionality.
Data-Driven Design. I used user feedback and behavioral data to inform design choices, ensuring the solution was aligned with actual user needs.
Competitive Audit
After recognizing these pain points, I conducted a competitive audit to explore how other platforms address or fail to address these challenges. By understanding existing solutions, I aimed to identify gaps that Juni Learning could bridge to create a more streamlined teaching experience.
Platform
Learning Format
Subjects Offered
Personalization
Interactivity
Gamification
Best For
Instructor Tools
Strengths
Weaknesses
1:1 tutoring, small group
Coding, Math, Science, Entrepreneurship
Yes — tailored learning paths
Project-based, mentor-led
Limited
Structured, guided STEM learning
Handbook, Student Proposals, coding environment, custom lesson plans
Built-in coding environment, personalized student-instructor interaction
Poor session notes usability (loading times), no integrated video-chat platform or communication system
Live, interactive classes
All subjects
No — depends on instructor
Live discussions
No
Wide variety of topics & learning styles
Handbook, no built-in programming tools
Has integrated video-chat platform (No having to use Zoom which is external)
No built-in coding environments
Live, structured classes
Coding
Yes — structured curriculum
Hands-on projects
Yes
Live, structured coding courses
Built-in coding system, limited support for external resource integration
Specifically tailored towards coding, track student progress and code feedback
No real-time collaborative coding for instructors, no built-in system for managing session notes
Self-paced, video lessons
Math, Science, Humanities
No — same content for all
Video lessons & exercises
No
Free, independent learning
No live instruction, no dedicated instructor tools, automated tracking of student progress
Interactive coding exercises, immediate feedback, self-paced
No real-time collaborative coding for instructors, no built-in system for managing session notes, no live student-instructor interactions
One of Juni's key strengths is the built-in coding environment, which allows for direct engagement with coding exercises. However, the lack of an integrated video-chat platform and discussion channels forces instructors to rely on third-party platforms like Zoom and Slack for communication. Findings from this competitive audit highlighted the need for a unified platform that integrates coding tools, session tracking, and communication features. We propose an integrated video conferencing feature that includes tools for built-in session note management to track student learning and urgent help systems to quickly receive administrative support when needed.
UX Flows
We then created a UX flow to map the user journey with the addition of this integrated video chat feature. The instructor first logs into their teaching profile, and is then brought to the "My Schedule" tab displaying their upcoming sessions. Next, the instructor clicks on a student's session, which opens an integrated video chat feature within Juni Learning. Instructors can then conduct lessons without needing third-party tools like Zoom.
Since instructors also expressed a struggle to keep track of past student work and session notes (e.g. relying on external bookmarks, Google Docs, manual tracking), we created a second UX flow for a student timeline feature. This feature would provide a centralized and structured way to access past session details, including notes and coding files. First, the instructor logs into their teaching profile and navigates to the "My Schedule" tab to display student sessions. Then, the instructor selects a student's profile to view a chronological timeline of past sessions. Session cards display session dates, topics covered, and proficiency levels with the learning material. Clicking a session card opens the coding file and notes side-by-side for easy reference. Instructors can quickly review student history, reducing the need for external bookmarks and manual tracking.
Lofi Prototypes
Drawing insights from our user and competitor research, we utilized our UX flows to guide our initial design layout for the video chat and student timeline features.
Our first lofi prototype visualizes the video chat feature, highlighting seamless integration with session notes and communication tools like Slack and Zoom, which reduces platform-switching fatigue. We included a live editing feature to allow instructors and students to code collaboratively without navigating multiple tabs. For instructors like Katelyn, who emphasized her experience with click fatigue during initial user research, we included an embedded session note feature to allow instructors the flexibility to take notes while teaching their student. This prototype was heavily influenced by common video conferencing tools to ensure familiarity while enhancing efficiency.
Our second lofi prototype streamlines student progress tracking through a student timeline. Instructors can view past session details (date, topics covered, proficiency level) at a glance, access past coding files and version histories, and filter cards to reduce cognitive load when reviewing past work.
Testing on Lofis
At this stage, we sought to validate our design decisions through usability testing on our lofi prototypes. We asked two users to perform three separate tasks on each prototype to help the explore the prototype's features and for us to test the usability of our interactions. For example, with our video chat prototype, or Prototype A, we prompted users to switch mic settings, share their screen, and create a help request ticket. With Prototype B, the student timeline, we asked users to filter session notes by topic, add notes to a previous code version, and click on a specific date within the version history.
After testing Prototype A, users expressed that they liked the accessibility and streamlined layout, which made essential features (chat, session notes, screen sharing) easy to find. They noted that the UI felt familiar and similar to Zoom, making it intuitive for users. The embedded help request feature addressed urgent needs without leaving the platform. However, users struggled to determine if their mic/camera was on or off due to unclear icon highlighting and mentioned that the session notes and chat icons were too similar, leading to misclicks. Additionally, users wanted a side-by-side layout to view both the live code editor and screen share simultaneously.
For Prototype B, users liked the quick access to student history and past session notes. The filtering system for session notes helped reduce information overload, and the version history layout made it easy to track previous code edits. In terms of challenges, users suggested renaming "topics" to "modules" or the project name itself for increased clarity. Our users also recommended layout adjustments, such as placing the student timeline button under the student's name in the dashboard for better visibility.
Juni
Student Name
Student’s Past Session Notes
Home
Handbook
My Clubs
Community
Playground
Feedback to learner
Student Timeline
Computer Science Session
Course Progress
Internal information
Modules
Juni
Student Name Timeline
Home
Handbook
My Clubs
Community
Playground
Date
Date
Date
Topics
Topics
Topics
Proficiency
Proficiency
Proficiency
Filter
date
topic
progress level
filtering system reduces information overload
Juni
Student Name
Coding File Name
Home
Handbook
My Clubs
Community
Playground
Date
Date
Date
Date
Date
Date
Date
Date
Date
Date
Date
Date
Date
Version History
Back
version history makes it easy to track previous code edits
placement of student timeline button isn't easily visible
"topics" can be vague and unclear to instructors
Our first user preferred Prototype A because it "tackled more urgent needs," while our second user preferred Prototype B because it involved a new, innovative feature to Juni Learning. We ultimately chose Prototype A for high-fidelity development because it addressed more urgent instructor needs, such as integrating a live video chat system into Juni Learning. Moving forward, we would redesign UI elements for better usability—improving visual feedback for mic/camera status, differentiating session notes from chat icons, and relocating the help request button for better visibility.
Initial Hifis
The high-fidelity prototype builds upon the concepts from the low-fidelity prototypes and user feedback from our testing. It integrates a video chat feature into Juni Learning's platform, addressing instructors' pain points of switching between multiple tools like Zoom, Slack, and coding environments. The design maintains core functionalities of video conferencing tools (audio/video settings, screen share, chat) while adding a collaborative code editor and a session notes sidebar to enhance the teaching experience. The code editor enables instructors to directly work with students on their code live during the teaching session, making it easier to provide real-time feedback and troubleshoot issues without switching between different platforms or tools. The session notes sidebar allows instructors to easily take and reference notes during the session, track student progress, and quickly access key information about past sessions, all within the same interface. Our prototype also includes the ability to request for help within the video conference call, eliminating the need to ask for administrative support on a separate communication platform like Slack.
Incorporating feedback from our usability testing on our lofi prototypes, we made sure the microphone and camera status icons implemented clearer visual cues, utilizing red and a slash through the mic/camera to indicate that it was off (universal icon for off). A deeper purple color was added to match Juni Learning's style guide, making the UI visually cohesive. We also added a green border to show when screen sharing was active as a visual feedback indicator.
I was also in charge of designing two alternative screens to explore users' preferences for different types of video chat layouts. For the live code edit screen, I tested a horizontal layout with the menu bar on the left. This would provide more horizontal space for the code editor, but the unconventional placement of the menu bar could increase cognitive load.
menu bar on left side to expand the code editor
alternative placement for end meeting button in upper right
The second alternative screen explored a different layout for the message chat. I redesigned the chat feature as a movable pop-up instead of a fixed sidebar, allowing more space for participant video feeds. The chat messages were aligned to the left, creating a thread-like structure, similar to Zoom. These changes would be further validated in the next round of user testing.
movable chat box creates more space for video feeds
messages left-aligned for a thread-like structure
Testing on Hifis
After completing the initial high-fidelity prototype, we conducted user testing with two stakeholders—Jay, one of our original stakeholders, and Abby, a machine-learning student. We compared the original screens to alternative layouts and refined the design based on the feedback received.
Jay provided insights on visual design improvements, including rounder buttons to more closely align with Juni Learning's design system and branding, enhancing contrast between the main screen and menu bar on the live code edit screen, and removing the redundant green "active status" icon during calls.
Abby highlighted her preference for the alternate screen layouts due to its use of whitespace and resizing options. The alternate layout for the code editor provided more horizontal space, benefiting advanced coding students who need extra room for longer lines of code. Abby cited that this would place a better emphasis on coding tasks, and she also valued the flexibility to adjust window sizes. Combining our original and alternate screens, we implemented a toggle between both views to give users the choice of layout on both the live code edit screen as well as on the chat (sidebar chat vs. movable pop-up) screen. Based on Jay's feedback, we introduced a clear boundary between the menu bar and code editor using a lighter shade of purple for better visual clarity.
switch between different window sizes with toggle
left menu bar makes better use of whitespace
clear boundary separates menu bar from code editor
changed to "code edit" to avoid confusion with note editing
removed green dot to eliminate unnecessary visual clutter
switch between chat sidebar and movable pop-up
rounder buttons match Juni's branding
By addressing the visual and usability concerns raised during testing, we ensured that the prototype better met the needs of our stakeholders. These refinements contributed to a more intuitive, user-friendly design that aligns with Juni Learning's brand and enhances the overall teaching experience. The integration of video conferencing, live code editing, and session note management with a single interface ensures that instructors can focus entirely on teaching.
play the final prototype here :)
Next Steps
While our high-fidelity prototype successfully addressed the immediate needs of video conferencing and live code editing, we would aim to further develop Prototype B, focusing on the student timeline feature, given more time. By providing a structured, chronological view of a student's learning history, the timeline would enable instructors to easily access session notes, coding files, and version histories, making it simpler to provide personalized feedback.
The student timeline feature coupled with our existing video conferencing feature would further streamline the teaching experience on Juni Learning, creating a more comprehensive platform that not only facilitates real-time coding instruction but also allows instructors to track, review, and plan for future lessons more effectively.
similar icons for session notes and chat can be confusing for users
mic status indicator unclear about on/off settings
embedded help request to address urgent needs