The User Experience

The Chrome and Fi teams partnered up to redesign the Google Chrome Web Store. By offering more accessible content and speeding up the overall experience, the Chrome Web Store allows for a better user experience and discoverability of apps and extensions.

wireframes example

In our approach to the experience we abandoned the traditional ecommerce site models for a more dynamic, interactive and app-like setup. We also decided to merge both apps and extensions into a

singular digital experience. We integrated navigation, interactive tiles, rating systems and user comments to let users switch between pages intuitively, and reshape traditional navigation bars.

Placeholder image

The Grid

It was imperative to design a dynamic grid that worked in multiple screen resolutions and offer a wide variety of content in a central location.

Grid example screenshot

Grid & resolutions

Grids Units &
App Tiles

Using a precisely designed and easy to scale grid, all tiles were positioned dynamically, thereby allowing Google to promote specific apps as a large tile (such as USA Today) in 4 tiles, or 8 smaller tiles. This grid opens the door for an unlimited amount of layout combinations with visual hierarchy of what’s more important and interesting at any level.

Grid app tiles

Interactive
App Tiles

We wanted to push the limits of how users connect, touch and interact with apps – one that’s different from other app stores. So we highlighted the most relevant, useful and engaging information to simplify the whole experience. This helps users feel more knowledgeable, while also taking them to their required destination in less clicks.

To achieve this user interaction, the apps were showcased in the form of screenshots. This lets users hover over each tile to learn more information about the app, ratings, how many of the user’s friends already use it, number of downloads and even sponsored advertisers.

To introduce online advertising in a way that isn’t intrusive or unrelated, we also created sponsored placements within app tiles, rather than banner ads.

Grid medium tiles
Grid large tiles

Super Pop-ups

You may notice we used large pop-ups with all app information across the entire Chrome Store to give users a seamless, connected experience with each app.

When users click on apps, such as Angry Birds, at any place within the site, a large pop-up (super pop-up) will appear within the same page with an in-depth overview of the app's functions, technical

details, user reviews and related apps and content. Users can also scroll through thumbnails, videos and reviews from friends.

Details overview

The Components

It’s all in the details. Special attention was paid to each minute detail and pixel to build the interactive style guide which is then used as a nifty tool by the development team.

Breadcrumb

Breadcrumb

Interactive Components Breakdown

We were very deliberate in every choice that we made when creating the style guide for all components. Each color, pixel, font style, font was used to further enhance the Google Chrome brand.

Components overview

Icon

Final Designs

Partnering with Google every step of the way through the discovery phase, UX and wireframes and design explorations resulted in a highly successful outcome for the Google Chrome Web Store. User downloads and app submissions increased 1000+ %.

Web Store/Home Page

We created a fresh, dynamic layout that’s easy to scan and understand what each app offers.

Final design homepage

Web Store/Most Popular

While users explore and navigate around the Chrome Store for a variety of apps that are fun and useful, there’s also a Most Popular page where users can see the latest apps that may be worthwhile.

Final design most popular

Web Store/Collections

We arranged the most popular apps into collective groups according to the type of content. For example, users can browse various apps under the Art & Design, Book Apps, or Favorite Paid Apps categories.

Final design collections

WebApp/App Overview

When users click on tiles, a pop up screen appears within the same page and offers useful and relevant information about the app’s content, technical details, user reviews and even reviews from their friends.

Final design webapp overview

WebApp/App Overview

This tells users everything they need to know about each app, including its version, improvements and even allows users to contact the developer or report a bug.

Final design webapp overview

WebApp/App Reviews

Since most users seek interaction and engagement with digital experiences, we allowed users to not only rate the app for themselves, but also view reviews from users, including general users and their friends. To customize the experience for each user, we allow users to sort through reviews according to language.

Final design webapp review

WebApp/App Related

When users view and/or download apps, a list of related apps appears based on the content in the original app being viewed by users.

Final design webapp related

Extension/Overview

To keep the user experience consistent across the Chrome Web Store, users can view, sort and download extensions in the same way as they did for apps.

Final design extension overview

Webstore/Search Results

We created a very clean, fresh and subtle design for this page. This makes it easier, faster and more useful for users to search, and essentially, download apps.

Final design extension results

Oh by the way...

We have built a bunch of cool Chrome apps at Fi as well.