Creating a student-centric EdTech widget to enhance learning experiences on FigJam.
www.figma.com
overview
Context.
At the height of the pandemic, Figma newly launched its collaborative white boarding platform, FigJam, a real-time collaboration tool for teams to visualize ideas, brainstorm, and create feedback loops. As a technical consultant at DiversaTech, I helped to bolster brand awareness and target new student segments by developing custom widgets that address student pain points and needs.
ROLE
Technical Product Designer
TIMELINE
Sep 2022 - Dec 2022
SKILLS
User Research, Market Research, UX Design, Frontend Development
TEAM
2 Project Managers, 2 Designers, 5 Developers
What is a widget?
FigJam widgets are interactive tools that can be added to FigJam files to extend their functionality.
Defining the problem space.
The collaborative white board is a highly competitive market and has only intensified post COVID-19 lockdown. Schools began transitioning back to in-person and hybrid models at this point. It was crucial for FigJam to take advantage of virtual learning and incentivize students to use digital white boarding tools even when in-person.
As such, my team sought to address the question:
How might we create widgets that make FigJam an indispensable tool for students’ collaborative work, both in virtual and in-person settings?
research
Focusing on Gen-Z platforms.
I started by conducting market research on the current white boarding platform landscape, specifically focusing on platforms used by younger audiences such as Gen-Z and Millennials. I found that the main factors for using digital whiteboarding tools are:
🧠 Brainstorming
👥 Meetings
🎠 Fun
📊 Data
🗒️ Diagramming
📝 Planning
🛠️ Workshops
Synthesizing my findings.
Then, I helped to conduct competitor analysis and synthesize my findings into strengths, weaknesses, and takeaways in comparison to FigJam.
Miro
Strengths:
Onboarding features to acclimate users to platform
Trusted by 95% of Fortune 100
Intuitive, user-friendly interface
Weaknesses:
Key features locked behind paywalls
Low awareness outside of professional workplaces
Minimal student-focused functionality
Jamboard
Strengths:
Up to 50 live users simultaneously
Google/device integration
Image recognition and auto-polishing
Weaknesses:
Unclear value proposition
Difficulty with producing high-fidelity work given simplistic features
Unimpressive UI design
Miro Takeaways:
Strong market position makes Miro initial favorites
Clean, easy-to-use UI appeals to beginner users
Extensive app integrations are a must for students
FigJam Takeaways:
Holds upper-hand in simplifying design
Provides creative support with access to better templates
FigJam’s student-driven widgets facilitate collaboration
Jamboard Takeaways:
Free and upgraded version of Padlet
Extensive application in teaching
Physical whiteboard appeals to modern study room
FigJam Takeaways:
FigJam is superior in creative possibilities
figJam supports ample use cases in individual study groups and club collaboration
Prototyping > smart display
EdTech standouts.
Additional existing platforms whose strengths informed out market research on which features improved the user’s experience and the app’s general popularity.
Schoology
Minimal, student input, consolidated tools.
Desmos
Small learning curve paired with robust features.
Chegg
Student-oriented, digestible information, UI, SEO.
EdTech pain points.
Additional existing platforms whose weaknesses informed out market research on which pain points caused for usability friction and lower user conversion rates.
Notion
Steep learning curve and unintuitive display.
Zoom
Can feel cluttered and pressuring to collaborate on.
LucidChart
Stressful on hardware, high barrier to entry.
Key findings.
We compared our findings from each competitor to FigJam’s capabilities and offerings. Our main takeaways were:
01
💡 UI Design
Students rely heavily on intuition when interacting with interfaces.
02
💡 Integration
Friendly learning curves and capable apps yield user retention.
03
💡️️ Accessibility
Hardware feasibility must be considered for all features and cases.
04
💡 Collaboration
Collaborative tools should be unimposing, suitable, and clean.
Conducting user research.
With the takeaways outlined, we moved forward with the user research process by distributing user surveys and conducting user interviews, The main research objectives and questions we defined were:
❓ Competitors
What EdTech tools have students used in the past? Which have been their favorite?
❓ Use Cases
What does a typical day in their major/concentration look like? What are their personal studying habits?
❓ Pain Points
What has been your experience with accessibility with technology and its applications?
❓ Needs
What are some resources you wished you had?
❓ Familiarity
Have you used FigJam or would you ever use FigJam in your academic or professional career?
Survey insights.
We gathered 68 responses where we divided up our survey questions into three categories and asked those sets of questions according to the student’s background. The first set of questions was for all students, regardless of their experience with virtual collaboration softwares. The second set was for students who have used virtual collaboration softwares in the past. The last set was for students who had very minimal or no experience in using those applications.
Users of EdTech Tools (72.7% of Respondents)
Which virtual collaboration software have you used?
Jamboard (79.2%)
FigJam (39.6%)
Miro (27.1%)
What do you use them for?
Brainstorming (70.2%)
🧠
Team Meeting (66%)
👥
Wireframing (31.9%)
✏️
Personal Use (19.1%)
👤
Non-Users of EdTech Tools (27.9% of Respondents)
When collaborating, what percent of your time is spent virtually?
⏰
83.3%
spend less than half of their time
Which virtual collaboration softwares have you heard of?
FigJam (54.5%)
Jamboard (45.5%)
LucidChart (36.4%)
All Users
How familiar are you with virtual collaboration softwares?
Very familiar
14.3%
Not familiar
4.1%
Sort of familiar
36.7%
Vaguely familiar
44.9%
Interview insights.
I conducted 5 of the 33 user interviews, where I performed a live demo of FigJam in addition to asking in-depth questions. Some initial user feedback we had received were:
01
❌ Relative Apathy
The most cited reason for EdTech software use was “course requirement”.
02
❌ Classroom Context
Most students interviewed perceived FigJam in the same context as their educational platforms.
03
❌ Formality
Students perceived FigJam as too “high energy” to be used for personal studying.
Kate Dellet
Psychology ‘25
“FigJam would be most effectively used by grad students who are taking the time to summarize classes, no typical student is going on FigJam to map out what they learned.”
User personas.
From our user research, we created three user personas for FigJam to understand how students may use the platform based on varying levels of prior FigJam experience.
Student who doesn’t use FigJam
Familiar with Canvas
Uses Notion heavily
Has experience with Miro
Pain points with FigJam
Tools and resources are hard to find
Lack of integrations
Lack of shapes and designs
“When trying a new EdTech tool, I get overwhelmed by the new environment. I personally don’t have the time to learn a new framework given that I already have one that suits my needs.”
Brayden
20, Cognitive Science
Student instructor looking for tools
Uses Google Suite and Zoom whiteboard
Lesson plans on Notability
Uses Jamboard for groupwork
Pain points with FigJam
No classroom specific tools already integrated
Needs engaging yet useful features for students
No way of modeling the more technical aspects
“I need students to be able to easily see and access the material. I can not afford a learning curve, I’m already trying to teach them something else.”
Shawn
22, Psychology
EdTech student who uses FigJam
Proficient with all Adobe Creative Suite apps
Part-time UX/UI designer and uses Figma, Miro, and Mural daily
Fluent in Jira and Webflow
Pain points with FigJam
Plugins have extra steps which can be a hassle
Organizing sticky notes is time consuming
Lack of integrations with Google Suites or Canva
“As a freshman, I wasn’t familiar with EdTech tools. I wish there were more resources that broke down the functionality and use of these apps.”
Kehlani
21, Sociology
Research summary.
We synthesized our research into 3 main guidelines for approaching the widget creation process.
01
✅ Interactive Widgets
Animated and engaging widgets are more favorable. Collaboration and having fun is a priority for our user.
02
✅ Use Cases Vary
Preference for using FigJam for club meetings and ice breakers. Study/organizational widgets are favorable.
03
✅ Learning Curve
Widgets needs to be intuitive and easily recognizable. Emphasis on efficiency and enhancing work flow.
design process
Widget ideation.
When brainstorming widgets, we divided our thinking into six main sections where we emphasized creating a technical widget for STEM majors, ice-breaker challenges, studying tools, auditory-based experiences, instructor-focused features, and more. Our research pointed us to create an engaging yet practical widget that younger audiences would utilize within and outside classroom settings.
Widget proposals.
We created four widget ideas to propose to Lauren McCann, the Head of Education at Figma.
Quiz widget.
Ultimately, Lauren gave my team the green light on the Quiz and Data frame widgets. Half of the team took on the Quiz widget, including me, where I worked on designing and developing the frontend of the widget. Below, we address some risks and the mitigations we considered, as well as student needs for the Quiz widget.
❓
Similar widgets already exist such as the flashcard and flip card widget.
✅
Our widget has more developed and additional features.
❓
Users may prefer to use external quiz apps like Quizlet.
✅
FigJam allows further collaboration and can be combined with study guides.
01
Studying Use Cases
Individual use cases resolve around notetaking/self-studying.
02
Quiz-like Apps
Student dependency on apps like Quizlet suggest support for quiz-like features.
03
Collaboration
Improves collaboration by encouraging students to learn together.
User flow.
We divided the flow of the quiz widget into 4 phases: onboarding, editing quiz card, taking the quiz, and checking.
Flashcard Feature 01 –
Deck Management
The user has the ability to edit the flashcard deck with features to add, delete, and confirm flashcards.
Your question here
Confirm flashcard edits + add to deck
Three buttons appear when deck is in ‘edit’ mode
Add a new flashcard to the deck
Delete flashcard from deck
Final Version
Flashcard is currently in ‘edit’ mode.
Flashcard front input field
Flashcard Feature 02 –
Toggle Settings
Users wanted a lower learning curve, so by having easy access to toggle between flashcard settings, users have the capability to create a range of different types of flashcards to study from. These settings imitate traditional learning models and online tools like Quizlet, which allows for familiarity for users.
Final Version
Your question here
Flashcard front; click on the card to flip to the backside
Correct?
Your answer here
Add answer here
Multiple Choice
Check-all-that-Apply
True/False
Flashcard
Drop down menu for users to toggle between flashcard settings
Setting button
Flashcard back
Flashcard Feature 03 –
Multiple Choice
The first flashcard setting is ‘Multiple Choice’, where users input a variety of answers and can indicate one correct answer choice.
Final Version
Flashcard in ‘edit’ mode.
Final Version
Flashcard in ‘quiz’ mode.
Figma
Add answer here
Jamboard
Miro
Lucid Chart
Correct?
Correct?
Correct?
Correct?
Add additional answer option
Select which answer is correct
Flashcard Front
What is Figma’s main competitor?
Multiple Choice, Unselected
Figma
Jamboard
Miro
Lucid Chart
Adobe
Multiple Choice, Selected
Figma
Jamboard
Miro
Lucid Chart
Adobe
Correct Answer
Figma
Jamboard
Miro
Lucid Chart
Adobe
Wrong Answer
Figma
Jamboard
Miro
Lucid Chart
Adobe
Edit mode
Next flashcard button
Skip button
Flashcard Feature 04 –
Check-all-that-Apply
The next flashcard setting is ‘Check-all-that-Apply’, where users input a variety of answers and can indicate multiple correct answer choices.
Final Version
Flash card in ‘edit’ mode.
Final Version
Flashcard in ‘quiz’ mode.
Add answer here
Jamboard
Miro
Lucid Chart
Correct?
Correct?
Correct?
Correct?
✓
✓
Add additional answer option
Select which answers are correct
Flashcard Front
What are the best design apps?
Select-all-that-Apply, Unselected
Figma
Jamboard
Miro
Lucid Chart
Adobe
Select-all-that-Apply, Selected
Figma
Jamboard
Miro
Lucid Chart
Adobe
✓
✓
✓
Select-all-that-Apply, Answers
Figma
Jamboard
Miro
Lucid Chart
Adobe
✓
✓
✓
Flashcard Feature 05 –
True/False
The next flashcard setting is ‘True/False’, where users select whether a statement or question they inputted is true or false.
Final Version
Flashcard in ‘edit’ mode.
Final Version
Flashcard in ‘quiz’ mode.
True
False
Choose the correct option
Select which option is correct
Flashcard Front
Is Figma the best design app?
True/False, Unselected
True
False
True/False, Correct True
True
False
True/False, Correct False
True
False
True/False, Wrong True
True
False
True/False, Wrong False
True
False
Flashcard Feature 06 –
Free Response
The last flashcard setting is ‘Free Response’, where users can respond with whatever input they would like. When taking the quiz, the user can determine their own level of mastery, giving users autonomy in their own learning and mastery of the content.
Final Version
Flashcard in ‘edit’ mode.
Final Version
Flashcard in ‘quiz’ mode.
Your answer here
Input answer
Flashcard Front
Why do you enjoy Figma?
Flashcard Back
Mastered
Not Yet
Your answer here
Flashcard Feature 07 –
Summary
After taking the quiz, users have an overall summary of their results with metrics on the number of questions correct, missed, and skipped. Users get the options to edit their flashcards or re-take the quiz.
Final Version
Summary
77%
10 correct
3 missed
5 skipped
Study again?
CTA to restart deck
Percentage correct
final prototype
Editing flashcards flow.
Upon creating the first card, the user has the option to toggle between different flashcard settings: Multiple Choice, Select-all-that-Apply, True/False, or Free Response.
Continued.
In ‘edit’ mode, the user can input their flashcard information and select which answers would be correct when taken in quiz mode.
Taking quizzes flow.
After editing the flashcard deck, the user can take the quiz and get their results back.
Continued.
The user can modify their current flashcard deck by adding, removing, or editing flashcards.
Continued.
The user also has the capability to shuffle the flashcard deck and retake the quiz as many times as they need until mastery!
Try the widget here!
reflection
User research emerged as the cornerstone of my design approach.
This project marked my first immersion into product design!
It offered me an invaluable end-to-end experience from conception to launch. Straddling both design and frontend development roles gave me crucial insights into technical feasibility, teaching me to design within practical constraints while maintaining my creative vision.
User research emerged as the cornerstone of my design approach, fundamentally shaping how I crafted user flows and made design decisions. This experience fortified my understanding that exceptional product design is born from intuitive user experience and clean, efficient code.
Having our widget be used by over 10,000 FigJam users is a rewarding feeling, but its an even greater feeling being able to actively support students in their academic journeys.
