Shell mobile app offers customers to pay for the fuel with their mobile phone, as well as provides an insight into their loyalty program and location of the nearest Shell station.
Since the first release, the app has grown tremendously and now offers more than 10 different services and accommodates 40 markets (each market features unique market specifics). Not only the app has grown, but it is also well present on various platforms: mobile app, web, mobile web, connected car.
The initial design wasn’t made scalable, so adding new features and markets requires a lot of work. Besides that, on high feature markets, the user experience is a bit clunky and not as fluid as it should be.
What we started with
The existing dashboard consists of different dashboard cards, that each represents one feature. Users can horizontally scroll through them, additionally, in some of the cards, users can scroll through the content inside the card.
Scrolling through the content inside the dashboard card was unclear and has frequently obstructed the main navigation.
It needed the update of the whole experience as well as the visual look of the dashboard, so it would be able to solve confusing navigation and highlight the mobile payment and loyalty program.
We had some restriction
Of course, a redesign like this cannot be done without any restrictions. As an app was growing over the years, a lot of different back-end systems were integrated. In order to make scope bearable (and not to create a brand new app with the same features), we had to work with only front-end changes.
Our main goal was to keep the same labels, behavior and functionality of the existing app. This in mind, our options to provide with an update we set to achieve were limited, but at the same time, it was a great challenge we were ready to tackle - or so we thought.
Let’s start with the design sprint
We ran a 5-day design sprint to come up with some ideas and learnings on how to tackle this challenge. Don’t worry - I won’t bore you with the whole design sprint process, so let’s just jump to the outcome:
Horizontal scroll between dashboard cards was replaced by vertical scroll (feed is more common UI pattern than a horizontal scroll). The visual look of dashboard and cards was as well refreshed. As mobile payments are a core functionality of this app, we have looked into the process to make the payment faster and easier.
From learnings and the base idea of the design sprint, we have started to refine our experience and design.
Behaviour of the navigation
Our first challenge was to refine the existing navigation. Going from burger menu (which was hard to access from bigger mobile phones) to bottom navigation.
(A) Home section was available only when 3 or more features were available in the market. (B) Home section was always available.
The benefit of a home section that was always available:
Simplified complexity of the code & development
All markets would have the same experience (including low feature markets, that would get new and refreshed home section)
The unique user experience when markets would enable additional features
Evolution of menu section: from not even having a profile area to how the menu looks compared to other landing pages.
The final design of menu sections tested on low, medium and high feature markets.
What about dashboard cards?
In the existing design, all the dashboard cards have exactly the same template (image, title, and subtitle), but different features required an adjusted display of the content.
What is a product design case study without some post-it pictures? We looked at the different content that we got from the back-end for each of the features. After it, we have examined how to create several different dashboard card types that would be adjusted to that content.
We have created 6 different card types, that included some common elements across all of them (either Title and Description or Section title).
Looking at how to scale the image on different dashboard card types with different aspect ratio. If we decide on the image to have a locked ratio, it can bring some inconsistent image sizing between the carousel and non-carousel dashboard cards.
With a bit of calculation, we came to the solution. Firstly, we calculated x and y to limit the 'image area', then we can calculate the width of the image for different card types (single image, big carousel or small carousel).
Show it to me baby, aha aha
The new design had to be made scalable, so we have applied the same principles and scaled up dashboard cards as well to the desktop version.
Even though the initial requirements and scope did not include the connected car platform, we tested our design there as well, to make sure they could be scaled up if needed.
But the title said that the redesign failed
Even though the new design concept ticked all the boxes (doing only front end changes, improving navigation and refreshing the look), the project got canceled. In the end, the effort to finish this project was too high and would not bring enough value to users and business.
Nevertheless, it laid down some groundwork for a new project that is expected to be revamped. One of the main learnings of this project was, that with the existing architecture of the app was over complicated, as it included too many different features and integrations. Majority of features do not bring any real value to users or business (like My Garage or News), or at least not enough value to justify maintaining them. Too many features as well distract users focus and that should be directed to locating Shell station, making a mobile payment and being a loyal customer.
