First implementation of Material Design / by Gavin Lau

A couple of weeks ago I wrote An Exploration in Material Design after attending a workshop at Google HQ where I explored what feedly would look like if we followed the new style guide.

On February 10th I went back to Google with my teammates Edwin and Sean to attend another workshop and get more tips from the Material Design team. Rachel Been, Art Director at Google, was our mentor and shared with us a few core principles they use in Material Design..

After two days of work in Google’s Garage we managed to create a working prototype. Add to that a few weeks of polishing and we are now able to release our first implementation of Material Design.

Get the new feedly for Android on the Play Store to experience all these new changes.

 

Emotional experience

During these two days we focused on rethinking the visual design of our discovery experience. This experience is our users’ introduction to feedly — that is to start building their self-curated newsfeed by finding a few sources to add to their feedly.

Rachel’s main guidance was to make the experience more emotional and more immersive. She championed a few things:

  • Visuals over text
    How can each element be better represented by imagery instead of just text labels?
  • Curated over algorithmic
    Can we feature search results based on a human opinion rather than having an algorithm decide what is best?
  • Featured over flat list Create a hierarchy in search results with featured elements instead of showing a flat list of results and letting users go through the hassle of figuring out which are the best results.
  • Article photography over stock image
    Dynamically use visuals from articles rather than using static stock photography. This applies in particular to our topic cards.
  • Suggestions over basic search
    How can we suggest content relevant to users in the core experience instead of asking users to specifically search for content.

We wrote these principles on the board and started prototyping. The goal was not necessarily to implement each principle but rather to get inspired by them.

We wanted to apply these ideas to Feedly’s discovery experience which consists of two screens:

Explore
A place where we let people search for the topics they are interested in as well as finding specific sites they want to follow. We also suggest a few topics for people to explore and get inspired from.

Search result
The search result screen displays the blogs matching the selected topic or search.

Prototyping our new discovery experience with paper

Prototyping our new discovery experience with paper

Explore

Our Explore screen used to have a grid of images representing a variety of topics which we called ‘Starter Kit.’ But there were a few pain points with this experience:

  • Having three cards side by side made them hard to browse
  • The topics were hard to read
  • The experience was not immersive

We decided to use bolder visuals and larger cards. We also listed sub-topics on each card to make sure people have a better understanding of the types of sites they would discover after selecting each topic. For example, under “Design” we listed ‘Architecture, Typography and UX Design.’ In order to avoid the list of topics to be too long to browse, we used that logic for the first 6 topics (which we randomize) and we added smaller cards for the remaining ones.

I invite you to get the app to see how we designed these cards to make these little cards more engaging!

Search results

After selecting or searching for a topic we used to present blogs in a flat list. But there were a few disadvantages to that:

  • The flat list wasn’t immersive or engaging
  • It was hard to understand what each blog was really about
  • We had a hard time surfacing the awesome blogs with smaller readerships

As a result it was really hard for users to decide which blogs to add to their feedly.

We wanted to see what it would look like to embrace Rachel’s advice, using more curated results to elevate the human touch in the design. This resonated really well with the “collection sharing” feature we had been working on for a while. So we decided to use this feature to make our search results a lot more interesting.

For instance, if you select the food topic, you are now presented with a first collection of generic food blogs followed by more refined sub-topics: Vegetarian, Healthy, Baking, Cocktail, etc. Each of these sub-topics is curated by a thought leaders such as Deb Perelman from Smitten KitchenAmanda Hesser from food 52Jeanine Donofrio from Love & Lemons and more. This human curation makes the discovery of content a lot more human and easier to approach.

Finally you can use the “Add all” button to add all the sites from one collection to your feedly and build your personal newsfeed in just a few clicks!

Creating these curated topics is going to be a lot of work but we think that bringing this relevant expertise to a topic that users are looking to explore in depth makes a big difference. For now we have only applied this new approach to the food topic, but you can expect this experience to be replicated to a lot of other topics in the future!

 

Don’t forget the basics

We also took the opportunity to update our sidebar as well and the way we present blog lists with the Material Design guidelines.

Animations

In my previous article I also mentioned animations. We worked hard with John Schlemmer, motion designer at Google, to come up with a great animation when opening and closing articles. This is a super tricky one but here is what John came up with. I think it works very well: it is both quick (less than 300 ms) and works with articles which don’t have any image as well.

This one is a little trickier to implement so it’s not available in this release but you can expect to see it soon ☺

 

 

Source: https://medium.com/feedly-behind-the-curta...