Designing features
in Pencil
Creating whiteboard, video call and admin experiences for students and tutors
My Role
Product Designer Intern | Idea Generation, UX Research, Information Architecture, User Flows, Prototyping, Brand Application
Team Size
3-5 members
Duration
2 years, 6 months
Tools
Figma, Figjam, Notion, Goodnotes
Overview
This case study highlights many of the features I designed over the years, but is not indicative of all my work. There are features where I have closely collaborated with other designers at the time, but mostly I was the only designer and/or took responsibility of the feature.
For the sake of this case study, three features will be highlighted: Object toolbar, Screenshare annotation and Participant Manager.
CONTEXT
Pencil wanted online learning to be just as engaging as in-person sessions
When Zoom took off as the major video call platform to replace in-person classes, Pencil believed that online classes could be more than just talking through a screen.
problem
How can online learning be engaging?
In online sessions, students can be distracted by social media or streaming services due to the convenience of opening these applications via another tab or by another handheld device. Thus, it is much more difficult to maintain a student's attention as compared to in-person settings.
By ensuring a student's attention to the online class, it is not only important to have useful tools within the video call, but also features that can make teaching dynamic and accessible.
Constraints
Limited resources: Due to the company being within a competitive landscape, resources were allocated elsewhere. There were a few user interviews and user testing, but nothing organized formally.
Technological constraints: Due to engineering constraints, certain features were not feasible to implement.
💡
The challenge is to create a platform that fosters dynamic learning experiences.
solution
Features are organized into three categories: Whiteboard, Video Call and Admin experiences
whiteboard
Chat Messaging
💡
A chat app allows for both private and public communication between students and teachers
Improvement: Added more contrast and reduced visual clutter
Exploration: Searching and adding files, links, and pictures into the chats
I have also added the number of messages exchanged within the unread chat.
whiteboard
Object Toolbar
💡
As different objects had different toolbars, it was important to set a standard toolbar to reduce user confusion.
For research, both Figjam and Whimsical had simple and intuitive toolbars…
Improvement: Choosing a dark color toolbar for high contrast
I also explored edge-cases if objects were cut off from the viewport, was still clickable.
whiteboard
Sticky Notes
💡
As sticky notes were commonly used in real-life whiteboard applications, it was important to keep a skeuomorphism element
Improvement: Sticky Notes had dynamic text sizing and additional features
The 2nd iteration prioritized text functions, such as support for italics and underline rather than actions on how the object is layered on the canvas.
whiteboard
App Library
💡
For sessions that involved tools and objects in subjects such as math or literacy, it was imperative to have a library of resources that could supplement such lessons
1st Iteration: Explorations of objects within a "Clipart Library"
Objects that were static images were organized under a library called the "Clipart Library". I explored two approaches of this library feature, where it was a popped from the whiteboard toolbar or if it was opened through the side panel.
As discussions progressed among fellow designers and product managers at the time, I realized quickly that this library wouldn't solely be a place for static images, but rather a hub of interactive resources. Therefore, a side panel approach was the suitable decision.
2nd Iteration: Converting Clipart Library to App Library
The App Library was the place where App Integrations, tools like a calculator and games resided.
The Resource Library was part of the App Library, and had static images such as shapes or graphs that can be added onto the whiteboard.
In working on the Resource Library on parallel, I also created the first assets that were available in the Resource Library. As many of the tutors were teaching mathematics, all of the assets I created were based on this subject.
3rd Iteration: Organizing the App Library
As the number of App Integrations increased, it was important to organize these apps under a clear set of categories. Together with a co-designer, we also set a design standard for each app entry, such that any new App Integration can be seamlessly added.
video call
Raised Hand Queue
💡
By translating the raised hand experience into an online platform, students are able to use this feature intuitively. For tutors, a queue was designed to organize the amount of students who had raised their hand by oldest to latest requests.
1st Iteration: Creating a queue for tutors to save and organize which people had raised their hand first
The queue has a list of requests from earliest to latest, allowing tutors to address the people who raised their hand first. Once a request has been addressed, the tutor can then lower the person's hand, or everyone's hand at once. There is also a minor action of a tutor raising their hand as well, for an edge-case where there are multiple tutors in a session.
As both whiteboard and video call gallery are separate visual experiences, I also had to design the raised hand queue for both views.
2nd Iteration: Deciding the primary action due to feedback
After feedback from stakeholders, the 'Lower all' button became the primary action of the Raised Hand Queue. This also helped me to decide which were secondary and tertiary actions.
video call
Screenshare Annotation
💡
By adding an annotation feature to the screenshare, teachers can control the focus of the screenshare for students.
1st Iteration: Whiteboard tools are used for annotation
Due to engineering constraints, this feature allowed for screenshares to be added onto the whiteboard. The screenshare becomes an interactive element on the whiteboard, where one can write on top of the screen.
2nd Iteration: Screenshares have direct annotation tools
Due to both user confusion on Iteration 1 and engineering capability, screenshares were able to have direct annotation tools. By reducing the effort of adding the screenshare into the whiteboard, teachers can seamlessly transition from adding a screenshare to interacting with it directly.
admin
Participant Manager: How can we provide a way for tutors to maintain control within a session?
💡
Our solution is to create a Participant Manager with four distinct tabs: Controls, Settings, Requests and Attendance
Controls: Tutors can mute/unmute a student if they cause disturbances
1st Iteration: Having a side panel where tutors have a set of actions on students
This feature was one of the first tasks I worked on around the time Pencil Spaces launched.
2nd Iteration: Minimizing the amount of primary actions to reduce visual complexity
Settings: Tutors can allow/restrict Student's use of a mic
1st Iteration: Creating granular control of certain privileges to certain participants
2nd Iteration: Organizing the controls to be individual-specific and Space-wide
Requests: Students can request to use their mic, with the acceptance of the Tutor
1st Iteration: Embedded into the Controls Page, allowing space for it's transient state
2nd Iteration: Organizing the controls to be individual-specific and Space-wide
Attendance: Tutors can record Student's attendance from events made in Schedule
1st Iteration: A list that recorded the entry and exit times of participants, but was not editable
2nd Iteration: Allowing tutors to edit attendance for other participants within their discretion
admin
Schedule
💡
By designing a schedule within Pencil Spaces, events can be easily created and integrated with the platform. This also allows for users to enter into these sessions easily in one tab, rather than opening a new tab from a link. (Reducing friction between the scheduled event and the session)
1st Iteration: Schedule within Spaces as an app
The Schedule I worked on manifested as an app within Spaces. This Schedule app was linked to the same feature outside of Spaces, as sessions in Spaces were dictated by the organization of this Schedule.
2nd Iteration: Adding a calendar view to Schedule
takeaways
Upon reflection,
The features designed in the platform allowed me to have the flexibility in understanding and creating different user experiences. The things I learned can still be applied to most, if not all, of the features I designed.
Engineering constraints and capability are influential in creating seamless user experiences. By closely collaborating with software developers, I was able to know how even the smallest details of my design could be difficult to replicate through code. This made me flexible in prioritizing which design decisions were important for the software developer to build than others.
If I could do things differently, I would do more user testing before the final design is released. Many of the improvements made on prior features were from user feedback, and thus a lot of user frustration and confusion could have been reduced if such findings were known ahead of time.
Impact
✍️
One of the standout features of this platform is its unparalleled ability to put everything in one place. From built-in apps to making websites collaborative, from the ability to upload documents to breakout rooms, Pencil Spaces offers a diverse range of tools that empower our tutors to deliver engaging and effective lessons in any subject. The platform's versatility ensures our tutors have the tools they need to tailor a session to suit the unique needs of each student.
NLG statement of recommendation (Client)
Awards
EdTech Awards Cool Tool Finalist 2024
For Tutoring Solution
For Blended, Flipped and Remote Classroom Solution
For Classroom Management Solution
For E-Learning Solution
For Collaboration Solution
National Tutoring Awards 2024
Shortlisted for Technology Tools for Tuition
EdTechX Awards 2024
Americas Category Finalist
Tech and Learning Magazine 2024
Award of Excellence for Primary Education
Award of Excellence for Secondary Education
Thank you for reading!
More works
Sparky: AI Assistant for Teachers
User Research
Prototyping