Simon McCade
Fizzy UX Teardown
2views
Fizzy UX Teardown
Simon McCade
This video provides a teardown of Fizzy, a new tool from 37signals. It covers the sign-up process, UI observations, and an initial exploration of the Kanban board features, including global search and keyboard shortcuts.
Transcript
00:01
All right guys, welcome to another teardown.
00:04
So this time, this time we're going to take a look at Fizzy.
00:06
There's a new tool, just hit the market last couple of weeks I think, designed by Jason and the team at 37 signals.
00:16
So these guys have a really good track record.
00:18
they're responsible for Basecamp, and hey, email as well.
00:24
So I'm looking forward to diving into this one.
00:26
so be going through the onboarding.
00:27
I'll sign up for the product, go through the onboarding, and then maybe create my own Kanban board and see how we get on.
00:33
and also as always, I'm just going to share my thoughts with you.
00:36
the good, the bad and the ugly.
00:39
Alright, so without further ado, let's sign up then.
00:42
So this is the website here.
00:43
I'm going to click start for free.
00:46
as you can see, super simple.
00:48
sign up page here.
00:50
I mean it is a new product so I'm guessing that's why they haven't got too much social proof on here.
00:55
Although they do mention the fact that it has been designed and built and backed by 37 signals.
01:01
Right, so let's sign up then.
01:03
Put my email address in here like so.
01:05
so also says here, enter your email address to create an account.
01:08
Kind of feels like subtext.
01:10
Maybe that should just sit, under sign up I really think we're getting a sense of the UI style.
01:17
Even just from the sign up page here you can see it's nice chunky text, big form fields, large buttons as well.
01:23
I'm sure this is going to carry through into the product.
01:26
Anyway, let's click.
01:27
Let's go again.
01:28
Okay, so we now need to verify, grab the verification code in my email again.
01:35
I kind of think we had this on the last teardown.
01:37
We did.
01:38
Like I'd love a link from here just to go to my Gmail and then I could find that code super easy without needing to move away, from Fizzy Okay, so I've got my code here.
01:49
Let's paste him in.
01:50
Nice.
01:50
So automatically takes me to the next step, which is good.
01:52
And then funnily enough, it now asks me for my name.
01:56
kind of curious why they did it that way.
01:58
It's clearly deliberate to ask for my email, grab the code, enter the code and now ask for my name I guess.
02:04
I guess they kind of could have done that in a single sign up page.
02:08
Anyway, let's enter this in here.
02:11
And then again they're setting expectations which is really nice.
02:13
So like you're just one step away.
02:15
All you need to do is enter your name and then we're going to create your own fizzy account.
02:19
Just like reassuring users works really well.
02:21
Right, let's click continue.
02:23
Okay, so we're in.
02:25
So it looks like we've been taken straight to a Kanban board here.
02:30
Like zero setup process.
02:32
I assume this is just like an example that they've put together for me.
02:36
So I guess we're gonna have to work out some of this ourselves, what some of this means and how it works.
02:42
So let's start the top, work our way down.
02:44
So it looks like we've got some keyboard shortcuts dotted around here.
02:48
So power users are certainly going to be happy.
02:50
We got J which is what was this menu up here.
02:53
And then we've got P for pinned, K for search and N for notifications.
02:58
So that's nice.
02:59
obviously don't need to remember them if they're always shown.
03:03
right, let's see what else we've got in this menu then.
03:06
So this is a global search.
03:07
but this is, this is like really powerful.
03:11
so you've got home Okay, so let's look at this menu at the top here.
03:15
we can either click J on our keyboard or we can just click into it.
03:19
And it looks like we've got like a global search up here.
03:23
so we can jump to a specific board or a person, a place or a tag underneath that.
03:28
we can have more keyboard shortcuts, both to home and I assume cards that have been assigned to me and then cards that I've also been added to.
03:37
Like I really like the way they're breaking down this search into different categories here.
03:43
So I've got a list of my boards.
03:45
The current one is the playground, obviously the people and then other settings as well.
03:50
And I presume, I can also access other settings from up here top right in the board settings.
03:58
So let's take a look at the board itself then.
04:00
So we got three columns, not now maybe and then done over here on the right.
04:06
So right now everything's in maybe.
04:08
and it looks like I have created or been assigned to some of these cards by default.
04:14
When we hover over the centre column here, we get this option.
04:18
and I think, okay, so if we open that up then these are all of the cards.
04:24
so that works really nicely.
04:27
so we've got the option to basically dive in to see all of the cards at once simply by clicking that icon up there.
04:33
Got the ability to create a new card as well.
04:36
So let's do that super quick.
04:38
right.
04:39
Create new card.
04:39
Okay, so simply enough entering the title, adding some content.
04:44
Can we add a tag to it?
04:46
Yes, we can.
04:47
so we can create a tag on the fly.
04:50
I think, I think just like the ui, just could take a little bit of getting used to.
04:55
I'm guessing if you're from Basecamp or, or maybe their hair.
04:59
Hey, email.
05:00
plat.
05:01
Then some of this probably feels more naturally to you than somebody who's coming at this, with a fresh pair of eyes.
05:08
I have used those products in the past, but not extensively.
05:10
What I do like is the fact that when you're creating a new card here, they've just like focused users attention on that specific task.
05:18
So everything else just gets out my way and I'm not distracted by other cards.
05:23
so we've added a title in there, we've added some content.
05:26
We've got a WYSIWYG over here as well.
05:27
and I think let's create card.
05:32
Done.
05:32
Okay, so we've added the card into the maybe option or into the maybe column by default here.
05:37
I presume it's just a case of dragging and dropping over there.
05:42
So we could just move the cards around like we can do in any of the Kanban board.
05:46
and we can see here updates.
05:48
So we got like one.
05:48
Not now zero done then not too sure how many, 10 in the maybe column.
05:55
okay, let's add a new column here.
06:00
Let's try later.
06:01
Okay.
06:02
So we don't get big modals popping up.
06:04
we've got like these inline menus, which is really easy for us to create new, columns for our Kanban board here.
06:13
So we can type the name in and then we can choose a colour.
06:16
Let's go for green.
06:17
And then click add.
06:18
And there we are.
06:19
we've got Later.
06:20
I wonder if we can rearrange these somehow.
06:22
Yeah, I'm not too sure we can drag cards in there simply, enough.
06:27
So, again, it's just, it's just really responsive.
06:30
and I like the fact that the cards are colour coded depending on which column they're in.
06:36
I mean, it is subtle, especially in this dark mode.
06:38
But you can see we've got the green cards for later and the blue cards for maybe.
06:42
Okay, so if you come up here, like, we know this icon just takes you into the view that allows you to view all of the cards in that particular column.
06:48
If we click on here, we got the ability to edit, but like moving left, moving right.
06:53
I don't understand why those are disabled.
06:56
maybe there's some restrictions.
06:57
So if we just go back into one of these cards, then clicking on here, then we get the card full screen.
07:01
Obviously the option to toggle, notifications or it looks like by default you're going to be watching the cards.
07:09
And then what does this one do?
07:10
Right, you can pin the cards.
07:11
If there's quite a few of them in the column, I presume that would just sticks them to the top.
07:15
So let's try that.
07:16
Okay, so as we've done that, looks like it's pinning it to the bottom of the page.
07:21
If we try coming out of here, which unless you click back on your keyboard.
07:26
Here we go back to Playground.
07:27
There we go.
07:28
the back isn't obvious.
07:30
I'm looking for an arrow.
07:33
but you can use.
07:34
You can click on the link or you can just click Escape to go back.
07:37
And then if we throw a few more cards in here, it looks like.
07:41
It looks like that one we pinned is just permanently down here.
07:44
Let's pin a few more, shall we?
07:46
There we go.
07:47
Right, okay.
07:47
So any of the cards you pinned obviously seem to be sticking to the bottom down here.
07:52
which is fine.
07:53
I mean, it kind of gets in the way a little bit, depending on the size of your window, obviously.
07:58
but it is convenient to go down here and see the cards that you've pinned, especially if you need like, quick access or you want to reference something.
08:05
I do like the feature, I wonder whether, it could be implemented a little bit better, maybe pinning them to the side of the window.
08:13
Okay, let's see, let's see what else we've got here.
08:16
We've explored these.
08:17
like, the design works, you know, like, I mean, this is like a really novel way of doing, the Kanban board.
08:26
Like, I've never seen it being done like this before.
08:28
you know, you kind of got these colour codings and it looks like you can only open a set number at once, which again means you're just not bombarded with all of these tickets on the screen at the same time.
08:39
because that can be really overwhelming.
08:41
so we are in the playground, board here.
08:46
If we come back up and then we can see we're there and we click home.
08:51
So it's obviously a deliberate choice, after we'd signed up for the product to take us into the board.
08:56
And I think that makes sense because it allows me to get a feel for things like how the Kanban board works with fizzy.
09:03
but this is, this is the home screen, which is basically just your activity.
09:08
But again, they've obviously thought about this.
09:10
They've broken it down into three columns.
09:12
things that have been added today, things that have been updated or things that have been marked as done as well.
09:20
You can see even when I'm scrolling down here, the column headers are stuck to the top.
09:25
So if I've got a long list of items, I'm not going to get confused about which is in which column, which is really nice.
09:30
And then from here it looks like I've got the ability to add a card and then create a new board as well.
09:35
So if we click add a card.
09:36
Okay, nice.
09:37
So we screen.
09:38
We've seen this screen before.
09:39
we know what number, the card is.
09:43
We can then add it to a specific, board and fill in the details, like we did previously.
09:48
So, yeah, works really well.
09:50
super impressed with it.
09:52
Clearly well designed, well thought out.
09:54
It's very snappy and it feels like a product I think a lot of people could get to grips with really quickly and adopt this approach.
10:02
All right, guys, I'm gonna leave it there.
10:04
Super impressed though.
10:05
cheers.
10:06
Bye.