See more where this came from
Feedly
How we used a Design Sprint to redesign Feedly’s homepage
Project Type
Design Sprint
Content Strategy
UI & UX Design
Our Role
Sprint Facilitators
Copywriters
Designers
Year
2019
Location
USA
The Project
Feedly is an intelligent insight platform that lets users keep up with the topics and trends that matter to them, without the overwhelm. They’re transforming trend research from a manual-process to an AI-driven process, and they needed to get the word out.
The Challenge
Feedly brought us in to provide a fresh perspective. They wanted a simple way for users to understand their new AI machine learning tool (a robot named Leo), collaboration capabilities, and integrations. They wanted users to recognize their specific use cases immediately upon visiting the site.
The challenge: Communicate how Feedly’s AI solution helps cure information overload
The Process: Design Sprint
The Feedly team was incredibly open to trying out a collaborative process like a Design Sprint. They knew the fresh set of eyes would bring new solutions.
Much of the work happened before we even touched a design tool. We spent weeks collaborating with Feedly to determine how best to customize the Design Sprint process to fit the challenge at hand.
The Feedly team gave us data from their Google Ventures 3-hour brand sprint. They had also defined StoryBrand-based BrandScripts for each segment of their audience. We’re big fans of the StoryBrand framework, and having Feedly’s BrandScript already defined allowed us to think about how this new design fit into the overall brand narrative.
Here’s what the process looked like:
We set up a 4-week structure to reach the project goals.
Week 0
Research & Preparation
Week 1
Design Sprint
Week 2
Iteration Sprint
Week 3
Design handoff and asset delivery
The international Team
The Feedly Team
Edwin Khodabakchian
CEO
Eduardo Santos
Lead Designer
The Purple Bunny Team
2 Designers
1 Project Manager
1 Copywriter
Plus...
Available during prototyping days
1 Animator
2 Illustrators
We were spread out across continents and time zones: San Francisco, Lisbon, and Buenos Aires. Thanks to a powerful suite of remote collaboration tools, positive attitudes, and snacks, we sprinted forward.
The diversity that your team brought was fascinating. People seemed to feel safe to try a lot of ideas and listen.
Feedly CEO
Remote Design Sprint:
Test big ideas in a week
Ideate
Days 1 and 2 were full of sketching, sticky notes, and getting deep into the challenges and possible solutions. Instead of tackling the entire homepage in a single Sprint, we focused on the specific area that would have the greatest impact: the way we communicate Feedly’s layers of intelligence, and how we express transparency and control of Leo, their machine learning tool. We voted on a solution and created a detailed storyboard.
Prototyping
By day 3 we had a clear storyboard, drafts of copy, and sketches of illustrations. Our designers, animator, and illustrators came together in a single day to create a high-fidelity prototype for users to test the next day.
Each section of the site introduces users to one of Leo's features
Custom Illustration and animations
We created custom illustrations, and adapted Feedly’s original Leo illustration to add new actions and fun props.
Leo's reactions
Leo's facial expressions
Leo grows as he learns
Leo waving
Characters for target audience
Privacy policy
Website's hero
People say a picture is worth 1000 words. I’d say an animation is worth 1000 pictures.
Feedly CEO
The animation we created to describe Feedly’s core value “was a big aha moment” says Edwin. “If the Sprint was only to create that animation, we would have already had a positive outcome.”
All your sources in one place
Training Leo
Share insights with your team
People are really able to grasp the concept just by scrolling through that animation.
Feedly CEO
Copywriting
It didn’t matter how cute the illustrations were unless we had clear, user-tested copy to get the message across. Messaging was a key part of what we were testing through the Design Sprint methodology.
Goodbye
information
overload
Train Leo to filter out the noise
Share insights with your team
User Testing
User testing plays a key role in validating or disproving our assumptions from the Design Sprint process. We recruited 5 users based on a specific profile: busy professionals in the US who need to keep up with trends and information in order to thrive in their careers.
Seemed open to AI for their content needs, but wanted more details
5/5
Wanted to know "How can I use this with my team?"
3/5
Weren’t familiar with the term “black box algorithm”
5/5
The tagline “filter out the noise” resonated strongly
2/5
They wonder how Feedly will be using their data
2/5
Instead of the traditional Design Sprint note-taking method with sticky notes, our team has adopted The Rainbow Spreadsheet, a lean UX research tool, for note-taking during user interviews. This makes it easier and more efficient to see clear trends, and to document feedback for future reference.
User testing gave us a lot of insights. It also showcased this customer-first philosophy that's so important to us. That helped clarify and align a lot of things.
Feedly CEO
Iteration Sprint:
Do it again, only better
Overview
Users in our first week of testing were consistently confused in certain areas. They didn’t see the difference between Feedly (product) and Leo (feature). The message of information overload and filtering out the noise resonated with users, but they wanted to know more about the behind the scenes of how it works.
Our challenge in week 2 was to iterate on the original idea, taking into account the insights from user feedback. We started with a short Lightning Decision Jam workshop for reflection and ideation alongside the client to brainstorm how we could improve the flow of the page to meet users’ needs. Then we were off and running for 2 full days of high-fidelity prototyping, animation, and illustration.
Testing Round 2
The second round of user tests was just as eye-opening as the first. By asking the same questions, we were able to validate assumptions and compare results to the first round of tests.
For example, user feedback helped us discard alternate tagline and illustration options. We knew we were making the right choice when 5 out of 5 testers chose one over the other. No blind assumptions here.
Understood what Feedly and Leo are about
5/5
Didn't realize you could scroll down
3/5
Really resonated with the 3 steps
5/5
Were distracted about the stats in Leo's illustration
2/5
Preferred the Leo image in option B and thought it better described how it works
4/5
Wrap Up
Week 3 was for tying up loose ends. We processed the final round of user test data, prepared assets, and delivered lottie files for animation so that Feedly’s development team could take it from there.
The thing that brings us all together is that we're all very customer-focused. The fact that we're not defensive about being right, but about doing the right thing for the customer made this process work really well.
Feedly CEO
Results
At the end of this full month of Design Sprint process, results included:
- Development ready files for the new Feedly.com, that the team implemented in 2 months
- Strategic recommendations for continuing marketing and design efforts
- A complete report of the process and decisions made
Feedly was then able to take insights from this Design Sprint and infuse their marketing and design work with this fresh, user-centric focus as they continue to help people cure information overload.
We wrote more about our experience in this Medium Article. Take a read.