All right, welcome, everybody.
This is one of the sessions for the Big Blue Button World 2023 conference.
This one is on user experience and user design and how it informs what we're doing with
the product.
Really, two of the key people from the project who have been involved a lot on
user design, it's something that we have always been doing and will always continue
to be doing to make the best user experience.
So I'm going to turn it over to Bruno Vellalinti, who works at Emcoff, involved in
their design team, and Tyler Copeland, who, if you watched any of the past
conferences or Big Blue Button sessions, Tyler has been with us since the
beginning of the project and has pioneered and spearheaded all the
designs of Big Blue Button.
Bruno, Tyler, over to you.
Sounds good, Fred.
Yeah, I mean, it's actually amazing to have another face beside me here on
these virtual conferences.
As a designer earlier on in an open source project, design isn't usually part
of the equation in open source.
It's often developers solving problems.
But fast forward to today, we have myself, Bruno, we have the team at
Emcoff and individuals around the world who have started to contribute to
this project from a design perspective.
And I have to say, it's such a surreal moment to be able to say that we
have a design community working towards supporting Big Blue Button.
So we have a fun presentation here.
I'm going to walk you through a lot of some new thinking we have behind
how we approach design.
And then afterwards, I'm going to head it off to Bruno where the team
at Emcoff has taken a similar philosophy on approaching design and
have solved a really interesting problem or ideated and kind of
interesting problem in addressing some of the customer needs.
So I'll kick it off and we can get started.
So really to go over today, just a fun overview of the history of
the design of Big Blue Button, some early thinking, you know,
we talked about earlier as we jumped on the call, the paper
mock-ups on the screen.
And then from there, we're going to walk through the product side process.
Some folks here who are product designers or have been through the
process before on their teams or would be familiar with it.
However, I'm going to touch on it just to kind of expose the open
source community around how they can take this thinking and apply it
to even in their organizations to help solve problems or even problems
they are working on in the context of Big Blue Button.
How we've started to really empathize with the teacher.
You know, we're really focusing on making sure we're providing
a really good tool for them.
But also students at the same time.
But this conversation would be focused around teachers, reframe
our thinking, and then afterwards an amazing showcase from
Brunel on the MCOP team around how they've taken this philosophy
as well and are talking about a really fun problem.
Okay, great.
So I'm going to jump into the product design history.
So right now, again, if you've been any of my talks before,
I love leading off with this one because this is actually
the first design of Big Blue Button on a chalkboard in the
university by Fred and Richard and it's always so cool to
see how far we have come, but this is the official first
design of Big Blue Button.
From there, we had to build a digital interface.
So we've leveraged some open source layouts, which was
the Flash client that evolved into something that myself
here earlier on in the journey really tried to experiment
with how do we, you know, build something that's scalable
as part of an open source technology product.
You know, a lot of people contribute to it and they are
extending it in various ways.
So really building a modular system was kind of the
focus and some really core principles we had on the
design side of things.
And then you can see Big Blue Button evolving different
modules, you know, being able to integrate different
experiences.
And then HTML5 client came around and we really had to
figure out how to build a modular and scalable solution.
And we always reference that like we were very much
a mobile first approach, scalable, collapsing.
So imagine this was your browser, just collapsing
your browser.
Everything just form fits exactly the screen and screen
resolution that you're working on.
So principles are always thinking mobile first.
How do we solve these complex problems from that
perspective and building anything that is scalable and
ensuring any design solutions we put together are
scalable in that manner.
So what is, so next up is what is the design process?
I know a lot of people have talked about it, design
process, product design process, design thinking,
et cetera, but really at the bare bare minimum,
the product product design process allows teams,
allows organizations to take this process and build
a systematic process to build solutions based off
the needs and wants of their customers.
So really if you want to build a successful product,
it's like getting down to the root of the needs,
the wants of customers and building solution around
those, those really strong pain points.
So from the philosophy of which we're starting to
integrate in the Big Blue Button Project is how do
we actually take this philosophy and go through the
entire process.
So really at the end of the day, there's five main
groupings.
So at the beginning, it's talking to customers,
it's talking to end users and really, really
understanding those pain points and needs,
building themes and then working towards those
themes and various types of projects.
Once you, once you've gotten into like kind of
an area of focus that you want to work on based
on your research efforts, that's where you
start to define it.
The real problem that you're working on and from
a team, a user, et cetera, and then from there
you ideate on those defined problems until you
start to come up with something that you're
confident with.
From there, you would prototype with the
efforts and then that allows you to actually
be able to go test it with customers.
Once you're on the ideal end user, when
you're in the test phase, there's arrows here
that scale back to any step away because the
crucial part of testing allows you to figure
out one, okay, well the speed of which this
solves the problem.
However, the speed of doing it takes a long
time.
Imagine that was the feedback that you
receive.
Well, you don't have to go back to the
beginning or you don't necessarily need to
ship it right away.
There's still some improvements.
Well, that's where you can go back to
prototyping or your ideation phase.
Well, maybe we can do one or two tweaks
to that to make that experience exponentially
better or maybe you were far off with the
prototype realizing that you, you actually
were solving the wrong problem.
So then you could come back to the
beginning.
We talked to customers defined.
However, the topic of this has been of the
product design process.
There's a lot of amazing material online,
but it's really just helping this
community here around the Big Blue Button
project just to think a little bit
differently when we solve problems, not
just go and say, hey, I think we need
this, but really talking to customers
and building solution around those true
pain points.
So here's an example of how we've
actually started to proceed with this.
So we really internally wanted to
understand the day in the life of the
teacher.
What is it like not and it doesn't have
to be in a physical world or we
really didn't focus on it being in
the physical world, remote world,
hybrid world.
It's really agnostic of where they're
teaching.
What is, what is the day in a life?
What are the problems they have day
to day, week a week, et cetera, you
know, interactions with students and
so forth.
And then from there, once we, once
we gain that knowledge in secondary
question we had is what were the
challenges teachers faced while
transitioning to the physical, the
physical classroom to the online
format?
Like early theme that we heard
constantly was your lecture
slides that were set up, you
know, going next every single time
in a large physical classroom
doesn't necessarily translate one
for one to the digital format.
There needs to be this pulse
experience that happens.
You need to stop, check in with
the users, ask questions, and
kind of repeat on the basic, on
on certain aspects of the slides
just to always have check-ins,
build some collaboration piece
and really allow the users to
feel engaged as they're going
through, you know, a lecture that
could be anywhere from an hour
to three hours in a remote
setting.
So while we were going through
this efforts on the core team,
we needed to find a structured,
a structured template to
leverage to really categorize
this information.
So we leveraged the known
behavioral archetypes, which
just focuses on the user's
goals, thoughts, needs,
feelings, pain points, and
actions.
So from there we focused on
user groups to talk to them.
There is a variety of
different approaches you can
take. You can do one-on-one
interviews. However, for the
sake of time, as teachers do
are quite busy during school
year, we really focused on
leveraging the focus group
approach. So we had around
five to six teachers part of
each session. So we asked them
a series of questions and the
questions that we leveraged
here was really just to
getting to know the users.
Everyone has their own story
about how they got to where
they are today as a teacher,
the teacher's patterns,
etc. And then from there,
just really getting to know
them and their experience
using Beagle Button. An
absolutely amazing discussions
we've had, so many great
insights. Culturally, it's
been amazing just to talk to
teachers from around the
world and really start to
paint, start to narrow in
how we can address their
needs. And again, another
action item from this
conversation as well is
anyone here today can
definitely take these
approaches to problem-solving
and try to integrate them
internally within the
organization. This year is
you know, more than happy
to have folks extend this
into their organization.
So as you can imagine,
dozens and dozens of
teachers, the amount of
insights that we received
were a lot. So how do
you take these insights?
You feel any time you
talk to a group of
customers, you just come
from it so energized,
like you're really
empathizing with them.
You have a million ideas
of which you could solve
their problems. But what
we really needed to do
is find a way to
categorize them into
specific areas. So
depending on your
organization, there's a
bunch of different tactics
you can use. For us,
though, we categorize
them into these four
pillars. So getting them
to know the users, like
who they are as
individuals, their
product use, what we
like as the end user,
their needs, what are
their primary needs, and
then the pain points.
It's like I wish, you
know, these are the
issues that I'm facing
that I'm not able to
do to do my day-to-day
job. I wish this was
easier and better.
So this is like, this
here is giving you like
that aerial view of how
we think we were
categorizing for patients
and customers. This
actually ended up being
a lot larger. However,
I wanted to give you
a small, fun snapshot.
And then this here all
boiled into some themes.
So here we built out
three behavioral
archetypes. So this
was one cluster, and
you can see here how
the feedback, again,
were grouped together
again, were grouped
into different clusters.
So, you know, split
screen experience, white
board movability,
engagement and interactions,
et cetera. And these
insights here helped
form the behavioral
archetypes that you
see here. And what's
so amazing around this
is that we can hold
us up, you know,
on a wall at the
office, or a reference
as we're working as
designers, and really
remind ourselves of who
we're building solutions
for. So there's always
amazing things here that
you can see, like I
need a little
interruption as possible
during the class, so
my students stay focused,
or I feel bad
for my students who
get left behind during
the lectures and need
more attention. So
really ensuring the
quality of the, of
your, from a teacher's
perspective, that the
students are absorbing
this information. Like
what happens if, you
know, unlike a classroom,
like everyone, you
know, you can see 15
hand raises, or someone
just speaks out loud,
or just to clarify a
question. And someone
that is truly missed in
the online format. So
always reminding
yourself those, the
feelings of what's
happening during the
classroom from a
teacher's perspective,
always ensures that
we're, we're working
towards that, that
amazing end goal.
Again, here is another
cluster. So here we
have, again, the
prep work, we have,
you know, shapes and
grids. A lot of the
feedback here that we
have around, again,
breakout rooms and the
whiteboard functionality
and screen sharing and
sharing content and
engagement and
collaboration. So a
lot of really big
parent themes. However,
again, here with John,
you know, I would like
to be able to have all
the tools available that
I would in a physical
classroom and be able
to use the grid and
shapes to illustrate
solutions and problems.
So even that, like that
moment of, of a
teacher or groups of
teachers saying, I'm
just missing a lot of
these physical classroom
experiences. I would love
to see it in a digital
format or see how it
could possibly be done
in a digital format. The
things like thoughts,
like I want to be able
to help my students
succeed during the
class time to best
their capabilities.
Lots of really fun
things here to kind of
reference again. And
then the last one
here, Marissa Walker,
not going to go into
the depths of each of
these. Want to be
mindful of everyone's
time here today. But
again, all this is
recorded. You can
reference it at a future
date and I'm happy to
answer any questions
afterwards too, if
anyone has some.
So from there,
so I didn't focus
areas. So here one
of the things to one
of the approaches we've
taken specifically
that's been really,
really successful is
okay, we can work
towards short-term
problems. We can,
you know, we take the
customer problem and
work a very short-term
solution. However,
what happens if we took
framed it in a bit of a
different way and go
really wide, really
abstract, really
think out there from
how we may solve the
problem and almost
have that as a North
Star vision. And
then from there work
backwards. Okay, if
this is where we want
to head to, how can
we incrementally get
there? And how can
we, you know, then
do smaller design
initiatives to work
towards that larger
greater goal. So
some of the designs
here that I'm going
to kind of, there's
designs to the right,
there's problems on the
left. They're just
really to showcase
some of our really
wide out there
thinking around, you
know, some radical
ideas of how we can
shape Big Blue Button
in the future. Nothing
is in the roadmap
yet, but this is these
visionary kind of
mock-ups are helping
guide us as a, as
a community here as
we're all working on
Big Blue Button. So
things too, when we're
trying to... Hey Fred.
I just muted Fred.
Hopefully he was not
wanting to jump into
the conversation. But
here, you know, how
might be better surface
core functionality that
is scalable to future
features and integrations
of, you know, in Big
Blue Button here. So
things just like a
lot of our functionality
today, like initiating
breakout rooms, learning
analytics dashboard,
et cetera, are actually
buried features. Like
what if we were to
actually surface this?
Some new customers
using Big Blue Button
for the first time. We're
able to, you know, find
things fairly quickly and
get comfortable with the
platform in a meaningful
time versus having to
spend more time
discovering the ins and
outs of our product. And
then on top of that, I
know there's an earlier
call around integrations,
but how could other
organizations integrate
easier with Big Blue
Button or add certain
integrations into Big
Blue Button that can
help them with the
needs that they have
with their organizations
or customers. Additional
to that is how might we
support teachers with
understanding how their
students are doing in
the lab classroom. So
again, touched on earlier
around that fear from
teachers understanding
how their students are
doing. So a lot of the
data we're capturing is
part of the learning
analytics dashboard. But
as an out there idea,
what happens if we
challenged ourselves with
bringing that data back
into the client? So
a user, a teacher
doesn't have to toggle
between two browser
tabs or required a large
display to manage both
of those. How might we
support teachers with
understanding how their
students are doing during
their class during a
classroom challenge? So
integrating collaboration
and not, you know,
say things like, okay,
students go off, work
on this design challenge
or work on this challenge
for five minutes. As a
teacher, when you're
in a physical classroom,
a teacher is able to
walk around the different
desks and see if
students are working or
how are they doing or
they're struggling. So
really trying to take that
grid format and bring
it into the digital world
where if we had this
concept we've been talking
about for some time,
whiteboard vision, you're
able to see how your
students are doing on a
particular challenge and
try to mimic that kind
of that walking around
the classroom experience.
How might we make it
easier and more intuitive
to create a scalable
breakout rooms experience
for teachers? Definitely
a big theme from our
customers and teachers
out there are how can
we make it easier to
work on big work and
initiate breakout rooms?
How can we easily create
them? How can they be
always there when this
the classroom starts?
Can we can we resume
data from before?
So this is one child.
This is one of the
ideas we've thought
about so many creative
ideas around how to
solve these problems.
How do we actually
leverage this problem
in the context of
smart slides? So it's
in context of your
workflow as a teacher.
And then lastly, just a
fun thing to share as
well is like how might
we, you know, make
sessions more collaborative
and interactive to allow
students to apply their
learning? So infinite
whiteboard, how can we
make that more collaborative
experience shared spaces?
You know, when you
come back to the
classroom again after
or, you know, on day
one of the classroom
today, you know, day
12 or week 12, like
can you incrementally
see your classroom
involve into the
end result of that
whole lecture and that
whole series of
of the session.
So again, far out there
idea but really
challenging ourselves
with the problems
that we're solving,
leveraging the all
the amazing insights
we've had from our
teachers. So what's
next? Again, these
are really large out
there ideas. We
really want to simplify
these even further
and start validating
them with our teachers.
And once we're
confident that we are
solving the right
problems for them,
that's when it gets
integrated into our
roadmap and a pipeline
for development efforts.
So again, reframing
or thinking all this
amazing work has allowed
us to really shape
our mission for the
project. So our mission
is to deliver the
world's most effective
virtual classroom,
the most effective
virtual classroom that
should maximize time,
applied learning and
feedback for the
students.
And it's also helped us
shape some pillars.
You know, we've focused
a lot of the teacher
today on the call,
but the efforts is
going around
understanding that the
students behavior
and often on our
calls with teachers as
well. We try to get
as much insights from
the students themselves,
not directly,
but just feedback that
they've received from
students and really
focusing on the
pillars of management
and relationship building
and engagement and
assessment.
So here, walking you
through this amazing
process, I'm going to
pass it off to Bruno
where again, another
designer, part of
the community has
leveraged a very
similar process to
check to help them
solve an amazing and
complex challenge.
And I'll pass it off
to you, Bruno.
Thank you, Tyler.
Here we're going to
show you a prototype
of hybrid classes
that we are developing
since the last summit
in Berlin.
We are very
happy because
our team and Tyler,
we have like the
same synergy in the
process. So this
is like a practical
use of all the
process that Tyler
showed before.
So we developed the
hybrid class prototype,
which was one
idea that Fred
bring to us.
And we would like to
give the students
on site the same
experience as the
students who are
learning remote
and also give
teacher some data
about the students
who are on site
as the same as
he have
collected using
the BVB platform.
So with this
prototype, we would
like to provide
a really hybrid
interaction.
So students on site
and students remote
have the same tools
and also collect data
from students who
are on site.
So how can the
teacher collect data
in an analogical
place?
And also
it's a really nice
way to collect data
during the class in a
different kind of
approach.
So
because we
identified that
learning is happening
everywhere.
So you can learn
on site.
You can learn
remote classes.
You can learn from
books. You can learn
from YouTube videos.
So we have a lot of
different tools that
we can get the
the content.
And also
we would like to
collect the experience
that really matters
to the teacher.
So how can we
quantify and
share and track
all this information?
So
with this we develop
the prototype
which is like
a way to use
the smartphone as
a powerful tool
not like a distraction
because we live in a
second screen generation.
So
we would like to
mix the digital
experience
with the technology
and pedagogy
as one.
So
thinking of that
we
literally design
a scenario which
is something like that
to show how the
product may work.
So we have like
a university room
where we have
QR code
really next to the door.
So
the students
as soon as they arrive
they could
connect to the class
using the smartphone.
And then in the smartphone
we have all the tools
that we have in the
the BBB platform
but in your
smartphone.
So you can
answer polls,
raise hands,
react,
send questions
and things like that.
But
in a locker room
and also the teacher
can collect this data.
I will share my screen
to show
a little
bit of our prototype
because we developed
to
to start
doing some
UX test.
So here we have
it's everybody
looking to my
screen, right?
Okay.
Okay.
So at the first
the student can identify
using the
QR code
write down your name
and
get into the room.
So we have like this
interface
where the student have
polls,
questions,
chat
and presentation.
And also
the reactions to
give like
instant feedback
to the teacher.
So when you send
an emoji
the teacher knows
that you reacted
at the time of the class.
You can raise your hand
so the teacher knows
that you have a question.
You have a notification.
The teacher send a poll
so you can
sorry,
you can
you can see the presentation
in the room
in the
in the screen.
So if you're far away
from the screen,
you can
follow through your
smartphone.
So you can have like
full presentation
in your hand.
Okay,
we have also
the poll.
So teacher can
make a poll you can answer
in your smartphone.
In this data is collected
in the learning dashboard.
You can send a question
if you are
a shy person.
You can
write down and send to
to the teacher read
in another time.
You can interact with
other
students through the chat.
So you can
send a question
and answer a
message
and things like that.
And also you can
share your QR code
to a colleague
who forgot to
to get in the room
using the QR code
in the
in the door of the
the room.
And at the end
you can
leave the room
and give a feedback
about the class
and give some ideas.
So this is a prototype.
So we are
still
developing,
but we would like to
to make a UX test
with some users
to validate the idea.
But it's all
developed with
the design principles
that Tyler
shared with us.
Thank you.
Thanks for now.
Yeah, no, I think it's
this one here is
I love this graphic
that was put together.
It's really kind of
you're able to
see the problem
at a glance
and how one
would be able to
how you all
have solved it
and how you can easily
put yourself in the shoes
of both the teacher here
and the students.
So I was looking
enough to be part of
the early prototypes
and seeing these all
come together.
And I'm excited
to see how the testing
phase of the product
design process
goes
and how
one may go back
to iterate
or talk to more
customers.
But it's really
a really large problem
to solve here
and I'm excited to see
the next steps
for it all.
So
thank you all
for participating today
in this conversation.
I'm going to open it
up to the floor here
for any questions
that anyone might have.
Feel free to
unmute yourself
or ask questions
directly in the chat.
I'm happy to answer anything.