Oh, everyone can hear me, take it.
Everyone, this is Laurel Thorelesky, and they're gonna get started.
I am high.
Okay, well it's okay, right?
Everybody can see?
Can you hear me in the back?
Yeah, okay, good.
Does anyone need to stand up and kind of move for a minute?
I've been in here a while.
Oh, good.
Come on.
Thunderbird.
Okay.
Who's a Thunderbird fan out there?
Which one?
Yeah.
And who's downloaded Thunderbird for Android?
Oh, couple.
Oh, more, more, more popping up.
And are you excited for Thunderbird for iOS?
Question mark.
Okay.
As I'm up here with all my Mac devices, right?
Okay.
Hello.
So I'm excited to be here at Phosem, and thank you to Earl and your team for organizing this room.
It's great in the sea of development.
This is my first, so please be gentle and kind.
I'm the design manager at Thunderbird.
Just some of my team here, and some of the team is here as well in the audience.
A pause for just a moment and ask if anyone is visually impaired on the audience.
If you are, I'll describe the slides.
Hey, hands.
Everybody's good.
Okay.
I won't double up then.
There's some text up there.
Okay.
So last year, Alessandro, our director of desktop and mobile apps, talked about how Thunderbird entered the modern UI era of simplicity and consistency.
By prioritizing user-centered design and accessibility, Thunderbird is finally catching up with the competition.
We're working really hard to reduce visual clutter and enhance the mutability of our productivity tool.
And take your camera.
Okay.
Now, if you're familiar with Thunderbird and the UI UX journey, you're probably familiar with the complexity and challenges of its dense interface.
Many of you experience the improvements introduced by version 115, also known as Supernova, and more recently improvements in 128 known as Nebula.
These go to on that foundation, adding new features, better organization and visual refinements.
Improvements to card's view, made scanning emails faster, and enhance the threaded experience, all while delivering a more visually pleasing design.
Plus, the height of cards, making sure, based on your settings, it'll adjust automatically.
So it ensures everything looks perfectly balanced at the end of the day.
So that's simple, right?
When designers need spreadsheets, we're in trouble.
So as you can see through this project, there was the discovery of at least 42 different selection states, each with its own style, completely inconsistent and a nightmare to implement properly.
So it took a while, but new selection states were landed, and you see them today in the interface.
So if you've explored the code base, you know it's not so simple.
That said, when using Thunderbird, you recognize the visual cues and the interaction states, and there's an expectation for these elements to maintain their integrity across Thunderbird experiences.
With Thunderbird for Android, launching last year, the introduction of beta of Thunderbird appointment.
Anybody tried that?
Ooh, something to look at.
Okay, anticipation of Thunderbird for iOS, and the value and importance of a cohesive design system become clear.
Let's be real.
Design systems at their core should be kind of boring.
And that's a good thing.
Why?
Well, because then we can lock all the foundational decisions.
Let's keep reinventing the wheel.
All that reserved energy can go towards those beautiful aha moments, and all the spark innovation and ensure our products meet up with our diverse users.
Plus, a solid design system keeps everything consistent across design files, product environments, and allow us to make updates quickly and seamlessly from a single source.
Design systems.
Every part needs a strong connector.
Kind of like bolts that hold the structure together like a house.
These bolts are components that keep the user experience consistent and reliable across platforms.
At Thunderbird, these aren't just ordinary bolts.
They're Thunderbolts.
Adding the strength and power of a lightning strike into every interaction.
By connecting our cross-platform design system, we're creating a solid, adaptable foundation ready for future growth.
Starting with design principles are essential because they serve as the foundation for every decision made within the system.
Our design principles prioritize creating a user-centered experience that is intuitive, inclusive, and respectful.
We focus on familiarity, simplicity, and personalization all while empowering diverse users with accessibility and customization.
By emphasizing privacy, collaboration, and craftmanship, we aim to deliver elegant, secure, and seamless interactions across platforms.
So here are the principles that we came up with that shape or approach.
I won't read everything, but consistent familiarity, this ensures that everything's familiar.
It's simple, it's effortless.
Inclusive freedom, we want our products to be adaptable, customizable, and accessible.
Privacy companion, our products are your trusted partner and privacy.
We want to humanize human collaboration.
We make collaboration, doing what you need to do easier, and human, right?
Not, you know, as if you're interacting with somebody.
Craft, we always want things to be sleek and seamless.
So what comes next?
When I joined the team last year, I knew I had to do an audit.
Both to become familiar with the product and to use my fresh eyes to spot inconsistency,
and those sad face user experiences that might be present.
Without diving too deep, I initially discovered 28 shades of blue.
And that's without touching on even more colors, icons, textiles, and spacing.
Spacing?
Let's just say that it's silent chaos in every design.
Clearly, we needed to establish some foundations before tackling the worst place to start a design system, the button.
So, I don't know if you can help me that, but yeah.
Today, Thunderbird still has 28 shades of blue, and they're all hard-coded.
So, color is hard.
That's really hard.
After lengthy mulling and explorations, I eventually created a light and dark palette for Thunderbird brand and introduced color variables.
Instead of relying on color styles, which would only add unnecessary complexity to an already intricate product,
I opted for a simpler approach.
The focus was on minimal variables, aligned with specific use cases, like surface elevation, primary colors, supporting colors,
like success, warning, critical, text and icon colors, and then some accent colors.
For contrast, we focused on AAA accessibility where we could, and gave into the limits of dark mode, ensuring AA accessibility.
It's kind of exhausting, right?
It's nice up here at the tip of the iceberg, but we all know design systems run deep, real deep.
So, the rest of the foundation where it came along smoothly does help anatomy, typography styles, iconography, and spacing values.
We're still figuring those ones out how to use.
Still a work in progress, or alpha might be more familiar to some.
To build our component library, we let projects drive what's to be included in that shared library.
So, no putting the cart before the horse.
Everything's realistic, contextual, and thoroughly vetted.
Complexity, we need to sport desktop.
We need to sport Android, there's also web, all both in light and dark modes, so it's a lot.
The goal is to create consistent visual language that ensures familiarity across all touch points, and making switching devices effortless, and seemingly adapt to your context.
When we approach Thunderbird for Android using material three as a foundation, it allowed us to move quickly with a predefined design system that we could customize as we needed.
You may notice a gap between desktop and Android today, but rest assured, they'll come closer together.
Material three is powerful, but it's heavily influenced by Google's style, making it harder to customize and add unique branding for cross platform use.
It also comes with challenges like uniformity and performance overhead.
As we look ahead to building Thunderbird for iOS, Apple's human interface guidelines also present exciting opportunities and challenges, shaping how we adapt Thunderbird's design system to this whole new platform.
It's going to be a swift journey.
Okay, a few of you laughed.
You got it.
It's like pause with my jokes.
Okay, so to tackle this and to ensure consistency across all experiences, we're working through a six phase process to build our design system.
Here's how it all comes together.
Design, right? We start with sticky notes everywhere.
This is very hard to read, but I'm going to describe it.
So phase one, we start with discovery and auditing.
So first we identify the components in each project, reviewing styles, to see a foundational elements like color, typography,
or brown guidelines, need updates.
Then we create an inventory in each project file, evaluated against key criteria.
Does it look consistent? Can it be reused in at least two contexts?
Does it involve minimal user interaction?
From there we add tasks to our notion boards so we can track of what's next.
Then in phase two, purple thing.
This is where the fun starts. We focus on designing flexible, reusable components and variations.
For all different use cases, think of buttons in their various states.
Along the way, we define and document styles like color, typography, and spacing making sure that it's aligned.
And then we make sure accessibility states front and center with standards like WayCag.
Once everything is ready, we publish the components and styles for a shared library in Figma.
And that's your Pablo's here, but we're aiming to transition to Penn Pot in the future,
just to make sure that we stay aligned with our values.
Thank you for your.
So phase three, this is front and preparation.
Here we get into the needy grid of front and work, creating our updating CSS variables and prepping variables for Android.
We also prepare design documentation to guide designers and use like usage instructions.
We export assets for development and flag components as ready for implementation.
In phase four, we're at development. This is where the components come to life.
Developers build, implement, and integrate the mentor projects, often replacing or updating similar existing items.
Clear documentation supports this phase, ensuring the components are used consistently and easy to maintain.
Martin, where'd you go?
There he is. Martin, where'd you go? He likes to refer. He's a staff software engineer for desktop.
And he likes to refer to this phase as make the thing, use the thing, document the thing, right?
Okay. Documentation. This is the time that we tie it all together.
We implement components in a centralized library, like Storybook or Wolf Jetpack Compose, yep.
So it's easy to reuse across projects.
We also create friendly, comprehensive documentation that includes design principles, component usage, code examples and best practices.
A version control system helps us manage updates and communicate changes, making sure the whole team stays in sync.
Last phase, governance and maintenance.
So this phase is all about the design system running smoothly.
We have a governance model with clear roles and responsibilities to manage and involve the system.
We use help us keep up to date with new project needs, user feedback and tech advancements.
We also engage with the community encouraging feedback and contribution to keep it relevant and effective.
So this is our full lovely team.
At Thunderbird, we're a small team of employees, lucky to have an amazing and dedicated community that generously puts their time and energy into making our products better.
Historically, most of our contributors have been developers and many of them have tackled UX UI challenges with remarkable care.
But here's the thing, where are all the designers?
We'd love to see more designers joining us, especially to help shape and grow bolt Thunderbird's design system.
We know that contributing as a designer to open source projects like Thunderbird can feel daunting at first.
Barriers like developer-focused workflows, limited onboarding, lack of design tools can get in the way.
But the good news is the door is wide open for designers to bring their unique talents to the table.
I'm more making it. We're going to make that easier.
At Thunderbird, we believe in the power of free and open tools to create a healthier, more accessible tech ecosystem.
Values that resonate deeply with designers contributing to open source.
By embracing these values and addressing common barriers, Thunderbird is working to create space where designers can feel contribute.
Compared to contribute, whether you're improving a button, refining a layout or helping to take bolt to the next level,
your efforts can help shape a cohesive and beautiful experience for Thunderbird users everywhere.
Later this year, we're aiming to launch community files in Figma and Penn Pot featuring core UI elements from bolt.
These files are all about empowering our growing design community to learn, collaborate, and create together.
By sharing these resources, we're making it easier to keep designs consistent, scalable, and ready for collaboration across Thunderbird's open source ecosystem.
As we wrap up, I would like to know how would you like to contribute to Thunderbird.
Whether it's creating user research plans, conducting heuristic analysis, offering insights and guidance, improving accessibility through research and design,
making components or patterns, your contributions can enhance design system for the design system for Thunderbird's ecosystem,
specifically to help shape bolts design system for a more seamless and inclusive user experience.
Before we flip this script for your questions and feedback, I have a little gift for you.
Have you ever wondered where our Thunderbird rock calls home?
Last year, we teamed up with an illustrator from Vancouver BC in Canada to bring rocks world to life, and what you see on the screen is a result.
I'd love for you to take a piece of Thunderbird with you, so you can just scan the QR code and download this delightful wallpaper to use on your favorite device.
I'll come back to the slide in two seconds.
Just to say thank you for listening.
And a few times.
So back there if you need the QR code, but yeah, I think do we have time for questions?
Okay, good.
Okay, good, perfect.
Excellent.
Oh, I'll do that.
Yes, I'm not getting used everywhere.
Hi.
Oh, hi.
We're talking earlier.
Hello again.
So you talked about this big design overhaul.
Well, this continual design overhaul.
You also mentioned how a lot of developers in the past have tried to tackle a lot of UX and UI students.
Did you recover any unexpected pushback on change?
Did you type the implement?
I'm curious how smoothly a lot of the changes went that you tried to push for.
Who likes change?
I have a, I have a persona ever user is called.
Oh, my god, change.
Oh, sorry.
I can repeat the question.
I'm so sorry.
Yeah, so did we experience any pushback when we sort of to modernize the UI?
Yeah, we did.
For sure.
That's what Alejandro talked about last year when he was here.
For sure.
There's definitely some people, especially New Year's or users too, that were like,
Wow, finally, you know, much more easy to use, sense interface.
But, you know, our trusted users are over the last 20 years.
You know, they still like that.
Like the way it was, you know.
So yeah, slowly bringing some of them over and finding that new world.
But, I don't know, for me, I know that when I was looking at the tool when I was,
like last year, I was really digging into it and I was like, wow, kind of feel like I'm in the 90s.
That's cool.
There's folders and folders and folders and folders.
And of course, there's a designer.
I'm like, think we can clear up some redundancy and make some things easier.
So I think we're making good progress there.
Yeah, so slowly bringing people along.
We have, I mean, down at the table, we've had so many people thanking us for the changes that we've made.
So yeah, yeah, yeah.
And then, you know, being able to, in your context to be able to, you know,
check your email's on desktop, organize yourself, calendar tasks, those kinds of things coming.
And then be able to move into your mobile phone wherever you are to check them as well,
and have it all work the same as a bonus.
So yeah, can I answer it?
Yeah? Okay.
Anyone else?
Oh, yes.
So I'm a user-excuse designer that works for the design system.
And one of the problems that I encounter sometimes the design system is too rigid.
As well, design, when future use case that was not up here,
when it's first three times.
So how would you make sure that the design system is scalable to future problems?
Well, we don't know ever know what's coming in the future.
Oh, yes, sorry.
I need that reminder, thank you.
I promised I would do it too.
So how do we ensure that a design system keeps adapting as we change,
as our needs change, as the product changes?
This is harder when you have a centralized team,
or you want a centralized team?
Yeah, so I've been in this before,
where there's a disconnect between what's happening with the product,
maybe even adjacent user research this happening,
and then there's a whole system that feeds back in.
So design systems need to evolve and change and grow.
It's not something that you can build and set aside and say,
here it is, just keep going and keep working.
You know, we always have to come back and re-evaluate it.
We need to bring key people from the teams together
that are looking at it from all the different angles.
And so it has to evolve, and then there's adoption.
No matter how big your company is,
I used to work with a team of 700.
So yeah, sometimes it's like, what do you, why did you break?
Why did you detach that component?
Can we talk about that?
What do you need?
Why are you doing that?
And sometimes it's sure the component needs to change,
or there's something as a user experience designer,
there's probably a different solve.
So why did you disable the button?
So yeah, yeah, so allow for change and allow for flexibility.
And actually the other thing to that point is,
now having your design system so big that you can move it,
right?
It should stay simple, it should be the reusable things.
Sometimes we end up with things in there that maybe we're not using,
or have a one-time use, and it's like,
should this be in the global design system,
or does it need to live somewhere else?
So keep it small, yeah, agile, yeah.
Anyone else?
Oh, yes.
You talk about this new world.
You.
You come over here.
Oh, this rocks land.
You talk about this new group.
You come over here.
When you have.
Oh, great.
Oh, good.
The group, the cards view.
The cards view that we're looking at in the face?
Yes.
The issue where the oldest medicine is filmed,
and you have to photo it out to see the newest medicine.
Yes.
So sometimes I actually forgot to see a medicine at home
because this is an old medicine film.
Yeah.
Yeah, totally.
And then, yeah.
So the question is that in our threaded,
when you're looking at your emails,
so it's a threaded conversation view,
and it shows the oldest one,
and you have to open it to see the most recent one.
I experienced this daily too.
We're working on that.
Yeah.
Well, you'll see some customization and some improvements
to threaded view for sure.
Yeah.
You'll be able to do a sending or descending for sure.
Yeah, and there's a button that says, hey,
there's some little visual cues like something's new.
There's a star.
You know, the button turns blue,
and you know that there's some other ones.
They're kind of hard to see,
but yeah, you want to really be alerted.
That, you know, we don't want you to miss your emails,
and the most important,
especially over apply, right?
So we've been working on that.
There's some things coming soon.
So make sure you update and follow along.
Please.
Yeah.
Thank you.
Do you want to really want to ask questions?
Anyone else?
Yeah.
Anyone else?
Yeah.
Did anyone ask about the,
I think source design processes that
can you give us these folders or like,
little weeks and things that you've got found?
Well, yeah.
So any open source design you want to contribute.
I want you to contribute.
I don't want to just see code.
I would love for someone to say,
hey, I was looking at this and like give me a visual,
you know, sketch.
Let's not, I love napkins sketches.
If you send me a napkins sketch,
I will not be hurt.
I love them.
Yeah.
Good question.
It's a little loose for design contribution right now.
Like I'm up to suggestions.
What works back.
Currently, I've been just showing things on topic box
and our community.
So you'll see things there.
We're going to, in our blog,
we'll be talking a little bit more design.
I'm open to anyone just emailing me.
That sounds scary.
Yeah.
And once we get these component files out in community
and figman, pen pot, like start working with them
and, you know, we'll figure out where to post them.
Normally, we just have the dev channels that we have right now,
so in a normal things,
but I don't want that to be a barrier.
So what am I saying?
Stay tuned.
It's coming.
Let's talk.
Let's make it work.
If you have an idea, I want to hear it.
Yeah.
Cool.
Thank you all.
Thank you.