Steve from Ludi shares how they created a design review template for their website redesign. This template helps teams focus on designs and gather point-in-time feedback, preventing comments from getting lost.
Chapters
00:00
Intro and Context
Introduction to the design review template
00:09
Website Redesign Process
How the template was created during website redesign
00:42
Feedback and Focus
Benefits of using the template for feedback
01:18
Template Creation
Turning the process into a reusable template
Transcript
00:00
Hi Steve from Ludi here.
00:02
Just wanted to share a bit of context and also a how to guide for the design review template.
00:09
So when we were getting ready to redesign our website last year, I started to put together a board for myself and the team to review together to go through the design changes that I was suggesting to our marketing website.
00:21
So that is this board here and you can see some similarities between this and, and the actual template that we've released.
00:28
So if I go here quickly and open up the time machine, take you back to how this board was built.
00:34
When we completed this part of the project, we realized that it was quite a good pattern for presenting designs and getting point in time feedback.
00:42
So I'm just going to scrub through the time machine quickly and get to the part where that experience is starting to take shape.
00:50
So you can see here I was laying out our new sitemap and then also bringing some designs in to get the guys feedback.
00:58
And basically what I found is that having the designs in here and out of Figma helped us focus on what was actually in front of us and it stopped me from switching back to design tab to make changes as we were talking about them.
01:09
This also ended up being a really good point in time, a bit of feedback so that I could reference it again and it wouldn't be lost in sort of a long list of comments.
01:18
So once we completed the process, I looked back at this and decided that it might be helpful to make us a template that we can reuse over and over again.
01:26
And that's what brought us to the, the design review template that we've released.
01:30
So if I jump back to that board and then I'll give you a quick walkthrough of how I suggest that you could use it.
01:37
So close that and go back here.
01:40
So it's fairly straightforward in the sense that for your project, your redesigned, your sort of component design, whatever you're working on, you have some space here to bring in some aims.
01:50
So in this area you would say, you know, outline the rationale as to why this design is happening while you're reworking it, why it's a new design coming into your system or your marketing site, wherever it's going to go.
02:01
And then the discovery phase findings are more for my notes to say, okay, while I was researching this piece or while I was working on this piece, I found this.
02:09
Here's some rationale behind why I think we should go in this route just to help the guys understand my thinking a little bit more and Then the process is fairly simple from there.
02:20
So we have on the left hand side design notes.
02:22
So this was where I would leave comments on specific elements in the design.
02:26
And, and then the right hand side is feedback.
02:28
So let's for arguments say we are reviewing our blog design.
02:32
So I'll delete this placeholder object, go.
02:35
And then let's just say this is a design that we're looking at.
02:38
So bring that in, place it there, and now we've got something to look at and review together.
02:46
So the benefit of VARA connectors is that we can make some notes here and then I can say, okay, this is reference to that.
02:52
The guys can then look through the design, they can add notes here, reference that, and then we move through this process.
02:59
depending on how many items we're reviewing at a time, you know, I can just copy and paste these zones and we can keep working through them.
03:07
This helps us stay really focused on the task at hand, which is reviewing the design that's in front of us and not get caught up with suggesting, you know, multiple changes or a tweak.
03:16
And can we see what this looks like?
03:17
And can we see what that looks like?
03:19
It keeps us focused on what's right in front of us.
03:22
And then at the end, once you take all this feedback, you can go, okay, from here, these are valid points and these are actions that I need to create.
03:29
So I'll come to the end of the process, create an action, assign it to whoever needs to do it.
03:34
If it's design related, it's going to be me.
03:36
So I'll assign it to myself and the person that's been assigned to get a notification and then we can manage the status from here and from the actions Dashboard.
03:45
So it's a super, super simple process.
03:47
It's a really, really basic template.
03:49
But, but I find it's quite helpful in just reviewing what's in front of you, gathering contextual feedback and then having this to reference as you continue to work through the design.
03:59
You know, duplicate the template as many times as you want depending on how many, elements you're reviewing at a time.
04:05
And then keep these and make new ones every time you review the next phase so you can look back and see what decisions were made and when they were made and why they were made.
04:15
So I hope you find it helpful.
04:16
If you do use the template, please let us know how it goes for you.