- Gathering feedback is a super important part
of the design process.
Obviously, it's how we learn and grow as designers.
It's how we improve our designs.
In this video, I want to show you my favorite method
for getting feedback from my team
on the designs that I create.
And that is by using a tool called
InVision. (bell rings)
If you haven't heard of InVision before,
it is a prototyping tool.
There's lots you can do with it.
But I use it in a very simple way.
I find it really quick
and easy to get feedback through it.
And also to keep that feedback organized.
And I really liked that
when I'm sharing a design in InVision for feedback,
people are viewing it in the browser,
which puts it in context
of where the final web design will end up.
So, I feel like they're able to
give better feedback that way,
because they are seeing it in context.
I know that some designers
will send the whole design file
over to someone for feedback.
But I don't like doing that
because I don't like knowing that someone could zoom out
and see the full website in one view on their screen.
That's just not how we view websites.
So, I don't think it's a useful way
to be viewing a site to give feedback on it.
And also in my design files,
there's like a million different uploads,
with lots of variations on the design
and I want to be super clear
about which iteration I want feedback on.
So that's why I like using InVision.
And with all that I said,
let's get into how I do that.
(upbeat music)
So, the first thing that I do is head into Figma,
select my upload and export @2x size.
And I add this @2x on to the end of the file name.
And that's important.
And I'll show you why in a second.
So, let's just export this.
(keyboard clicking)
InVision does have integrations with sketch
and Photoshop as well
to automatically export uploads,
is not one fit for me here,
but I would love to see it one day
appearing in this menu
this integrations menu here we can hope.
After I've exported the file
I usually come in and use image optimize
just to compress it a bit,
make file a bit smaller.
Then, I come into InVision.
Let's click this + icon here
to make a new prototype and give it a name.
(keyboard clicking)
And then I usually am sharing this
on desktop designs for feedback.
But obviously, you can also share
on all these different devices.
And it will put your design within a frame of that device,
which again, helps to put your design in context.
That's really good.
But let's go with the desktop version.
I'm going to drag in that design
that I just exported.
Now we have this design as a screen in the InVision file.
And it's looking nice and sharp,
because I labeled it with that a 2X on the end.
That tells InVision that it's a retina file,
so it should display the image at half the size.
I hope that makes sense.
Now if I'm designing a series of web pages
that are perhaps part of a flow,
I might use this feature here,
which is Build Mode
to create hotspots,
where I can make things essentially into a button
and link it to another screen in this prototype.
I can make it go to another point
on the screen like an icon link
or I can even link out to like the video
that this would play if I want to.
But usually for the most part,
I'm designing a single screen at a time,
so I don't think Make use of that.
That's nice know that I could if I wanted to.
What I do often use though is the comment mode
to add some points about various parts of the design.
Like say here,
I want to point out
that this number will be brought in dynamically
from a form that someone's filled out
to get to this page.
So, what I do is
I leave this as a tour point.
(keyboard clicking)
So, when I do share the design,
like I just showed,
I come in here and create this public share link.
There is the possibility to add a password to a link,
which is really handy
if you work somewhere that is really concerned
about privacy and keeping your design secret
until you live it.
That sort of thing.
At ConvertKit, we don't tend to care about that too much,
which is why I'm showing you this not currently built thing.
But yeah, we just copy the link and I can share it.
When I share it,
I always make a note to point out
that they should click on the blue dots.
I think they're pretty enticing to click on any way,
the way that they glowing,
but I just like to point it out.
And also tell people that they can turn on comments
in the bottom right here
to, click anywhere on the screen and leave their own.
And that also, if they use the arrow keys
or click on these arrows here,
they can go and see more versions of the design.
Let's talk more about the commenting feature, though,
because this is how I get the feedback.
So, with comment mode on,
someone can click on my design
and say something like
(keyboard clicking) this heading seems too small.
Then back in InVision,
in the back end of my project,
I can come into the comment section.
And I'll see this little pink comment.
That comment will be slapped to the screen
at the point where they made it.
And I find it really handy
to get feedback in this way,
because I'm getting the feedback in context.
If someone just told me randomly
that the heading was too small,
I might wonder,
is it this heading or other,
meaning this heading here
or this heading here.
There's multiple things he could refer to.
So, getting the feedback in context like this
just makes it much more helpful
to know exactly what people are talking about.
And anyone else looking at this design
will be able to click on this comment
that someone has made
and they'll be able to add the thread
if they'd like to back it up
or say that they agree with it
or maybe they disagree with it.
And conversations can happen in these comment threads too.
They can also comment on places
where my tour points are,
which is handy if they've got follow up questions
or thoughts on things that I've noticed.
And see here, there's difference
between the pink and the blue dots.
This is why I like to leave my notes
as tour points rather than his comments.
Firstly, because when comments are off,
you can still see the tour points.
But also when they're on,
people will know what is feedback I could have been given,
and what is information
that I've been giving them about the design.
The latter being blue, the former being pink.
Let me jump into a more like filled out project.
And I'll show you some more of the commenting
and how that looks in the back end our view the feedback.
So, this is the project for the webinar flow
that I've been designing.
And, you can add different sections to your design,
which is really handy.
So, this was the initial designs I shared.
And then this was the revisions,
it's handy for me to keep them separate.
So, to see all the feedback that I've gotten,
I come into this comment section.
Then I've got this list here
of all the feedback
that people have given me on my design
and I can click into this
and it'll show me the comment
with a little snapshot of the context that it was given.
So, this is really helpful to work through,
I sort of treat this as a thread of things to respond to
and action points to take as well in my design
to make sure I'm addressing all this feedback.
I just really liked the way
that this comments feature is designed.
And I like that you can tag people
so I could bring someone else into this conversation.
Even if they haven't commented on the design,
you can just tag them via the email
or via their InVision account.
Being that I work in a small team.
I love that people don't actually need
to have an InVision account though,
in order to comment.
They can just give their name
and then leave any feedback they want.
It means that it opens up more of the team
to giving feedback,
because I do care about the opinions of the wider team,
not just people on the design team in particular.
So, in this case,
this is Aisha, who is our data expert
and she's leaving feedback on the design
which is awesome.
Once I have gotten feedback on my designs,
if I've made any slight tweaks to it,
what I can do is export another version.
And if I want to I can give it the same name
as the previous one.
Then in InVision if I drag this file in,
because it has the same name as the other one,
it will just automatically replace the screen,
which is really handy.
And if it doesn't have the same name,
I can still come in here
and click Upload screens,
and drag any named file in here to replace the design.
That means that all of my tour points will stay there
in the same place as well.
So, I don't have to go through again
and re-annotate the design.
If I've just tweaked a couple of small things.
In this case, the top one doesn't make sense here.
So, I would want to annotate
but that's beside the point.
So, I use InVision to get feedback on my designs.
But I also use it to give feedback
to that friend in developer
that I work with on the build of the project.
So, to do that,
I will come to a web page.
Let's just go to a homepage.
Then I use a Google Chrome plugin called
Full Page Screen Capture,
which does this little PacMan thing
and takes an image of the whole page.
I can download that, again compress it
because it makes it a PNG,
so it's pretty big.
And then I upload it to InVision
and I leave comments for him on little things
that need to be fixed in the build.
Here's an example of that from a pre existing project.
So right here, I left a comment
about the size of this image,
just asking him to change the proportions a little bit.
And we can have a conversation about the change.
And then if I turn on resolved here,
you can see a bunch of these pink text.
And that's because if I leave a comment
about a change that needs to happen,
Cory will make the change
and then mark as resolved.
That's kind of like marking it off the to do list in a way.
And we have a team InVision account.
So, he can be in InVision
and looking at things from that comment moderation viewpoint
like I was showing you before.
This process works really well for me,
like I said at the start,
I know I'm not making use
of a bunch of really powerful features of InVision,
but I like to keep things simple.
This is my method for gathering feedback
in a really easy to understand,
easy to keep organized
and easy to stay on top of things way.
And before anyone comments about it,
I know that I could be doing something
similar to this in Figma,
another thing that has a commenting feature,
but I just much prefer the design.
And organization of comments and InVision,
and so this is what I prefer to go through
and just want to like better.
Like I said, I've been doing this for years,
it's pretty well entrenched in my design process now
and so that's why I wanted to share it with you.
I hope it was useful for you to see this video
and to see how I use InVision as part of my process.
If you've got any questions about it,
and please feel free
to leave them down below in the comments.
And if you're new to my channel,
then please hit subscribe
because I make new videos about design every week.
And we'd love to have you back here for the next one.
Alright, have a good week everyone, bye.
(upbeat music)