Material Design Case Study and Google Blogger Redesign Concept
Project Brief: The purpose of this project is two fold -
1. Study and understand how an existing design system works — its philosophies, aesthetics and interaction principles, implemented across various applications; observe its weak points and challenge its assumptions.
2. Study existing blogging and social media platforms, where they succeed and what is missing, not just for ardent bloggers but everyday users who explore online content a lot. Use these observations to reimagine Google’s Blogger (Blogspot) platform.
When Google announced Material Design at I/O’14, I was sitting at GDG’s IO Extended Event in Google’s Bangalore office, watching it unfold live. At first when I heard the term ‘Material’, my initial thought was that Google must have invented some Microfluidic touchscreen or a new technology that lets you feel “materials” that you interact with. I was an Engineer back then, and my dismay did not let me fully appreciate such a well thought-out and adaptive design system.
What is Material Design?
Here’s how some Googlers have defined it (paraphrased)
A new design system for designing interfaces across platforms
A new perspective on what a human and device relationship can be
A design philosophy that is trying to acknowledge the technology behind the interface
A design language — visual, interaction & motion
A visual language that synthesizes classic principles of print design with the innovation and possibility of technology and science.
“A single underlying design system that organises interactions and space. Each device reflects a different view of the same underlying system.”
On the surface, Material can be seen as a union of Skeuomorphic and Flat Design, taking paper and ink as an inspiration and turning them into tactile objects with bright colors, elevations and shadows, and motion. But what Material really is — a first well-done attempt at coming up with a design system for digital interfaces, and using the metaphor of ‘paper’ to define how objects within said interface present themselves and interact with each other. It is more than just a defined set of specs or visual components, rather a philosophy of how information should be communicated to a user with meaning, hierarchy and intention.
Digital interfaces are still in their infancy with only a few decades of work to show for it, and that’s makes Material one of its kind, bringing digital design out of its infancy.
You can read more about material design on their official guideline.
(I made some rough scribbled notes here.)
My main goal was to implement this design system to bring one of Google’s own product, Blogger, back to life. Blogger has not received any updates in the past few years. It’s app still has a simple editor interface, with no way of interaction with other blogs on Blogspot.
I wanted to reimagine Blogger as a new blogging platform, something that combines the microblogging of Tumblr, Instagram, Snapchat and Vine along with the long form content of Medium or Wordpress and the future form of multimedia (360, VR, Interactive content) without the noise and distractions we face in places like Facebook, and with an interface that encourages content discovery with its ease of use.
But this needed to be more than a blatant application of a design system or a simple redesign without serving purpose or addressing any need. So I decided to first challenge Material Design, explore certain aspects and presumptions of the philosophy behind it, and see if it works in context of real world applications with real everyday users, especially those who are not design professionals and are unaware of the purpose of this design style. For them, the interface is just another tool to get their job done. I put these principles to test in the following ways —
- The Paper metaphor — One of my own criticism, or rather skepticism, of Material Design is the paper-ink concept. Does the everyday user perceive the relative moment and depth of this “quantum paper” that material describes? Do they see the UI components as an imitation of actual paper in a digital, tactile form? Or do they see it as another fancy 3-D interface with animation and movements?
- Adaptive Layouts — The arrangement of cards, app bars, tabs on desktop is something very different from what we see on traditional website designs. The bold color, typography and images create a lot of empty space on larger screens.
Often, this space is compensated by using a jumbled arrangements of UI Card elements (multi-column lists). This presents a testing point to see if such layouts guide the users’ attention in the right direction or not. Does this design style really translate well onto every platform, the way it claims to? Are the design elements really balanced? - Interaction and Motion — One of the main features of material design is how buttons rise up to meet with the users’ touch point, and create this ‘ripple of ink’ on contact. But is such a micro-interaction actually visible? Or is it just design indulgence?
With these questions in mind, I created this survey-
https://goo.gl/forms/MGJj4h0qZ4afPsZ72
by compiling questions that explored various aspects of Material Design — its philosophy, components, arrangements, styles as well as real app/website examples. The questions meant to test out how does a user visually perceive the system.
After 100 responses (with 84 non-designers) by individuals in different age groups and different professions, I made the following observations -
- 76% had already heard about material design
- 45% perceived it as “3D depth of field illusion” while only 32% recognised the Paper metaphor
- More than 60% found the components neat and visually pleasing, even on desktop, if it was done right.
- 67% did not like mixed sized card arrangements, as seen on Pinterest or Google+.
- 76% of the participants were android users, and after showing them Google’s material design video, 69% actually appreciated what the system was about.
See full results
Now this is a really small, almost insignificant sample size with questions framed in a very naive manner, but it gave me some direction as to what I need to improve and pay attention to before I implement Material Design.
For the next step, I explored the UX and design of the following sites — Wordpress, Medium, Tumblr, Instagram, Flipboard, Google+, Google Arts & Culture, Google Spaces, Google Travels, Google Inbox, Google Keep, Google Photos, Google Blog, Facebook, Snapchat, Vine, Pinterest, Twitter— going through their signup and on-boarding process, integration of social networks, content discovery, profiles, and user engagement as well as their implementation of Material Design, on mobile and desktop (if available), noting down the pros, cons, successful design patterns, interactions and visuals. (rough notes available here)
With all these observations in mind, I began redesigning Google’s Blogger.
Google Blogger Redesign Case Study
Before jumping onto the visual design, I really wanted to explore and understand what a blog is, what is its purpose and who are its users, in context of the present day as well as in the near future considering how technology is evolving.
The most elemental purpose of a blog is a place to tell stories.
People use a shared platform to express their thoughts, ideas and emotions. They share experiences, opinions, news, information and a lot more in various forms of media. But why design a new blogging system when other products already exist? The fact that Blogger is dead is not a reason enough to design a new system. Is there a need for a new platform? Can we rethink the visual design and user experience of a blog with a new purpose?
One of my main goals was to create a platform for every type of media. The only one to doing so is Facebook, but that is always riddled with click-baits, ads and content we don’t really want to see. The mix of personal updates with page ads, events and everything else under the sun doesn’t create an environment conducive of content discovery. Its “Notes” feature for long-form content has been lost in obscurity, despite recent updates. I really wanted to take the simplicity of Instagram and Medium and give it the power of multimedia content, even beyond Tumblr, and make content discovery easier and simplified. It should really feel like a place you come to share stories. Another need identified was to give Blogger a new direction, and avoid the mistakes of its imperfect cousin, Google+ which now feels just alienating and noisy. A new blogging platform has great potential in this age where we are constantly generating content, sharing our thoughts and documenting our lives online. An immersive experience can be created out of this need.
Playing off of all that, I began my design process to reinvigorate Blogger.
Product Icon
Blogger has had a very simplified logo, an orange background with a white ‘B’ mark on it. I did not want to detract too much from this very identifiable mark, but update it to the current style of Material Design. Adhering to Google’s methodology, I started to craft the logo using paper and arrange the elements with different elevations and lighting.
After multiple iterations and going through the current Google Apps’ product icons and the Material Design Guideline on Icon Design, the logo started to come together. The background of the logo is mimicking a journal or diary — the traditional medium for writing personal stories. But this needed to be updated for 2016 and beyond.
Content would vary from magazine style articles and audio/visual to 360, interactive content and even VR in the future. The logo needed to represent the boldness and power of the everyday user and their story. Hence, the final logo is the centerfold of an open book and the ‘B’ is not just ink on paper, but an entity of its own that has left the bounds of the book and rests at a certain elevation.
Information Architecture and User Experience Design
Studying various other blogging platforms and social networks, I went over how I would like to arrange the content and information inside the app and tailor the user journey. After some iterations as well as discussion with a few active bloggers and social media users that I personally knew, I came up with the following structure -
- Home Screen — This shall contain the feed of latest posts from your followings. The content should be fully displayed in form of cards, except for long-form posts. All posts can be viewed by tapping to open in full. You can like, share and bookmark posts, filter them with tags and other criteria.
- Discover Screen — Content discovery is one of the main goals of the application. It should be discoverable via various filters, tags, trending topics and more.
- Favourites — All posts must allow bookmark, like, share and adding to a collection. Another unique feature I came up with was to allow snoozing of posts (inspired by Google Inbox’s snooze feature). Often, we do not have time to read something and want to save it for later. But we either resort to bookmarking it, which creates a strange dynamic if you use bookmarks for your most valued and favorite posts. Else we rely on third-party bookmark apps like Pocket. Also, there is no way of being reminded about that bookmarked post. Snoozed post notification can solve this problem!
- Blog Profile — One of the most important aspects of blogging is individuality. Each user wants to customise the look and feel of their blog to best suit their style of story-telling. Wordpress and Blogger both offer various themes to be used. However, this would not go well with our design philosophy. Hence, we allow profile customisation via cover images and profile pictures, and use the primary and accent colors to further tailor the look for a profile and make it stand out (explained further below in the visual designs).
(Signup and onboarding have been slated for later development.)
Wireframes
After designing the basic components (Post cards, saved post tiles, topic tiles etc.) I designed the wireframes and used Marvel to create a basic prototype —https://marvelapp.com/2f26h7b.
The wireframe prototypes were used to get initial feedback from other designers and improved upon the designs.
The bigger challenge was designing for Desktop. One of the main concerns was how to utilize space without using a multi-column feed (like we see on Google+). Along with that, another design pattern that I had in mind was to make the header sticky for every post in a feed till the entire post is scrolled through (the way it happens on Instagram’s app). This however is not easily translated onto the desktop design. Sticking the post header to the app bar looked clunky and awkward. So after a considering a couple of design patterns and testing them out by sharing GIFs for feedback, I finalised this one —
This further pushes Material’s concept of “tactile, quantum paper”. We know that components can elevate and allow others to pass above or below them. But can we transform Material asymmetrically to improve content viewing?
Visual Design
I wanted the visual design to be more than just UI components put together according to some guideline. It needed to serve different use cases and create patterns to improve content discovery and consumption. The wireframes, prototypes and final design push on those ideas.
Home Page
As a user scrolls through their feed, the header for each post lifts up to the same elevation as the status bar and sticks there until the post is scrolled through, then it goes back down to join the footer and scrolls off the screen.
A difference to note between desktop and mobile blog post UI cards is that the share icon is kept under the contextual menu on mobile, while on the desktop it’s kept on the card footer. This is because we do not want the user to stray away from the app. On desktop, it is much more acceptable to switch between applications and browser tabs, but on mobile, any action that can lead the user out of the app will be disengaging. However, we still want to provide the option if user chooses to use it.
Discover
This section is divided into 3 parts on mobile — Explore, Topics and Blogs. Each one offers different aspects to content discovery. Explore shows you the trending posts and editor picks, or just browse through the latest public feed (that will be curated over time for you the more you use the app). Under Topics, you can look for the latest trending #hashtags and hot topics, along with the collection of all the topics Blogger offers to be followed (this will contribute to the curation of your Explore feed). Finally, in the Blogs section, you can look at the most trending blogs. Search is always available while you are in Discover mode to find more content.
The Desktop design is slightly different. Instead of dividing the page into tabs, I created a single page with scrollable sections.
Navdrawer, Favourites and Notification screen
Blogger Profile
This is one of the most important parts of Blogger. The profiles need to stand out for every individual. But it still has to be contained within the same platform and not look like an external website, so consistency of design with the rest of the application is an important thing to consider.
This can be achieved by allowing the user to add their own Profile Picture and Cover Image. From there, Blogger will select the most prominent color from the Cover Image using the Palette library, then match it to closest color from Material Design’s color palette to beused as the primary color.
The profile’s primary color plays an important role in not just viewing the profile, but also while viewing any post from that blogger in expanded mode.
The primary colors seen above are the same as ones taken from the user/blogger’s profile cover image (shown below). This keeps certain consistency throughout all the blog posts from the same user.
Prototypes (page based)
Mobile - https://marvelapp.com/1djcedd
Desktop - https://marvelapp.com/89i5a06 (does not reflect actual navigation design or interaction)
Conclusion and Next Step
One of the biggest realizations while working on this project was that Material Design is not just a visual style but more of a set of rules for digital interface design. It would evolve overtime and even do away with certain decorative minutea and components like the FAB, which doesn’t always work, maybe even the whole paper-ink concept. But the underlying principles will be there to stay. Another thing I realised was how tough it is to follow a set design guideline, its keylines and metrics and other aesthetic rules. It is always easier to design the components first then assemble the layout, rather than coming up with components during the main UI design stage. This will also demonstrate that you thought about different pieces and components of your app beforehand, during the IA stage.
This is the beginning iteration for Blogger’s redesign. I’ll keep it a work in progress and take in more feedback before I add it to my behance and portfolio. In reality, we would need to change a lot, as more and more people would use the application, giving us an idea of what works, what doesn’t and what’s missing. But one cannot deny that a perfect blogging platform has great potential today, and Google already has a position to use its name and Blogger to capture that audience, provide great integration with YouTube and other Google services, and reimagine blogging to create the most engaging and immersive experience, and a universal platform for every kind of story.
Thank you for reading this. This is my first process writing piece as well as the first project involving mobile app design (visual). If you loved my work, please like my page 10To24 Designs where I share design related goodness. And a huge shout out to all the 100 people who participated in my material design survey as well as all my friends whom I bugged for days on end to evaluate the designs and prototypes, even though not all of them were Designers! 😋
P.S. — If someone from Google is reading this, please release Product Sans as an open font. 😝 Also, if a Blogger redesign is in the works, I would love a chance to be a part of that team and reimagine blogging for the future :).
