The art of iterating quickly
At feedly we think that feedback from users is a gift. We have organized our design process to absorb, structure and integrate as much feedback as possible and as iterate efficiently.
These values are guiding the way we structure our design process and helped us come up with a lot of interesting design tricks. I am sure these could benefit any designer interested in integrating user feedback and quick iterations in their process — independently of whether you are a single designer or part of a bigger design team or company.
So here is how we do it:
Note: Though gathering user insights before even starting a design is key (check out my talk on how to design with your ears if you are interested), this post focuses on how to build products quickly and how to get user input in the process.
1. Shape with Sketch
Price: $99
Website: http://bohemiancoding.com/sketch/
In short: Sketch allows you to design your interfaces from low fidelity to pixel perfect.
Design in user flows
It’s alway better to design user flows instead of focusing on each screen separately. It brings more context to each interface and helps you keep users’ goals in mind. So start your projects by creating one screen per step and don’t spend too much time on details. Just put the main information and key buttons on each screen. Just enough to get an idea of the flow.
Use InVision from the beginning
Before going any further, import each of these steps into InVision to experience the user flow you just created. It will also help you see corner cases early in the process. My recommendation is to keep the latest screens from your user flow on one Sketch page (I usually call this page “InVision prototype”) and brainstorm and iterate on other pages.
Iterate on each screen
It’s now time to improve each step/screen of your flow. Create a new “page,” position each screen vertically and duplicate them horizontally (command + D) to you iterate on them. That way you will have a history of your iterations (horizontally) while keeping each step of the user flow in vertical order.
Anytime you are happy with a screen you designed, duplicate it on your “InVision” page and replace the old version. From there, update your InVision prototype and experience the changes.
2. Prototype with InVision
Pricing: Free for 1 project, $25 for unlimited projects
Website: http://www.invisionapp.com
In short: InVision lets you create prototypes and get feedback in just a few clicks.
Use InVision from the beginning
As I mentioned before you should always work in user flows, which also means, you should always import your screens to an InVision prototype from the very start of your project! After importing your screens, link all the pages together and start experiencing the user flow right away.
Invite your teammates
One of the great features from InVision is that you can invite your team to try out your prototypes and comment on them. The good thing is that people don’t have to sign up for the service in order to view your prototypes and leave comments. Doing this early on will enable you to gather feedback on the flow and the things you might have forgotten early on.
Get it into the wild
When you are done with the prototype, take a bold step and ask the open community for feedback. This can sound crazy, but I have done it on with previous prototypes and it was awesome! Thousands of people from the feedly community and the design community went to try out the prototype I created and shared insightful comments. I personally like to duplicate the prototype my team has been commenting on before sharing it to make sure I can easily find my teammates’s insights. Once that’s done, share your project with your users on Facebook, Twitter, Dribbble, or even within your own product — wherever your community is! At feedly, for instance, we added a little banner at the top of our desktop product to invite our users to share feedback.
3. Hand off blueprints with Zeplin
Pricing: Free for 1 project, $25 for 8 active projects
Website: https://zeplin.io
In short: Zeplin lets you hand off your designs to your developers in one click and lets them select any element to get the pixel-perfect specs they need.
Just click it
I don’t have much to say regarding Zeplin — it’s so straightforward! It’s one of those products that just works. You export your designs to Zeplin, invite your developer to the project you created, and that’s it! All I can say is that every time I use Zeplin, the first implementation from my developer is 98% perfect, to the pixel.
4. Get feedback with UserTesting
Pricing: $49 per video
Website: https://www.usertesting.com
In short: UserTesting lets you list tasks for people to accomplish and within an hour you get videos of users accomplishing these tasks while thinking out loud.
Ask for the right participants
When it comes to user tests you want to get people who are as close to your target audience as possible. UserTesting has some basic options you can select on their screener (such as gender, age, country, income, etc.), but overall it is not really made to help you target very specific audiences. So to make sure I get a participant who would be a good potential feedly user I always use the “Other Requirement” field in the “Choose your target audience” section to specify what kind of users I want. For instance, feedly is a place for people who like to read regularly on work-related topics. So I always ask for participants who already read publications and blogs on work related topics regularly. To check if the selected participant actually fulfills the requirements, I always ask them to mention three sites related to their job they read regularly. UserTesting always gave me my money back if the participant ended up not matching the requirements.
Prepare your questions smartly
It is crucial that you prepare carefully the tasks you want to give to participants so you learn what you need to learn to move forward in your project. There is a lot to talk about here, but I am just going to mention a few key things.
Make sure you ask only one thing per task, not more. People tend to do only half the things you ask if you mention several things in one task. A good way to prepare your task is to start by listing the things you want to learn and pay attention to details. For instance wondering if people can easily find your discovery page and wondering if people understand how to use it are two different questions which can be answered by framing your task differently. Then write down the final task and double check that your question will not lead your users to be successful because of the way you asked it.
Share the resulting videos with your team
Use the section on the right side of the resulting video to take some notes. You can list ideas, bugs, or anything that comes to mind. Then send the link of that video to your team. I personally like to add a little note summarizing the test or mentioning the things to pay attention to, especially if my colleagues are not used to watching user tests.
I use these few little tricks and methods to make sure I create my design quickly and I get feedback in the process without losing much time.
At feedly we are constantly trying to find ways to make our design process more open and to iterate quicker. If you have ideas on how to involve users in other ways or on how to iterate quickly please share your tips in the comments below.
We are looking at growing our design team size. So if you would love to come over and help design the future of the work newsfeed, please shoot me an email at design@feedly.com with a link to your portfolio and a quick paragraph on why you want to join!
Arthur
Design co-founder at feedly
This article is part our Open Design series where we share our processes, current project and gather feedback from the community.
