Google Playstore Web app
Keeping the Google play store web app consistent with the mobile app
“Gentleman, why a redesign? Who sent you?”
I recently recorded a video on youtube where I replicated the google play store mobile app for android. The goal was to walk through how to design product tour components for mobile apps using Figma.
Fast forward, I wanted to take it further to show how to design product tours for web platforms. So why not the same play store but the web version 🤷🏽 ? But that’s when I noticed a couple of differences compared to its mobile app and other web products by Google.
Challenge
The Challenge was to align the Google play store web app UI with the other google web apps like Gmail, Youtube, Google Drive etc. (More like making Google play store adhere to the new style guide). Since the other web apps have had their UI and experiences revamped.
"Unfortunately, The google play store web app seemed left out. " — I may be wrong though. So let's check it out below.
Observations — Started digging in
Having replicated the mobile app and coming back to this, I noticed a few things about the components.
- App cards: The app cards looked different compared to the mobile app cards. If you will remember, the mobile app's cards used to have similar styles with thick shadows and straight edge cards.
- The top navbar is different from that of other Google products.
- Tabs have different menu items
- Mobile app sizes are shown in the Google play store mobile app but not on the web.
- On the web app, it shows the ratings for each listed app.
- The web app has the owner of the app listed. The mobile doesn't.
Also reviewed other google products (Gmail, Google Drive, Youtube)to align with the components. Noticed that fo those I reviewed had similar navbars with the same theme unlike that of the Google Play Store
Design
To be honest this is all I had as a sketch. I went straight into high fidelity designs after noting the various components and comparing them with existing google web apps.
Here are the design components I introduced. (Some of which were already designed when replicating the mobile app)
Learnings.
On the quest to design product tours, designing the Google play store web app made me appreciate the simplicity in Google products and the need to sometimes keep styles and experiences consistent across various platforms.
Feedback
Noticed the "Games", together with “my apps” were missed in the redesign. An update will be made to have both options available.
