Storefront V4

SaaS

SaaS

SaaS

React Native

React Native

React Native

The Project

The Project

The Project

How might we reduce friction in the user journey to improve order conversion rate?

The Team

The Team

The Team

2 Product Designers

3 Full Stack Developers

1 Tech Lead

The Tools

The Tools

The Tools

Figma

Power BI

Launch Darkly

Gleanly

MOBI is a SAAS company that primarily enables its clients to order digitally through a white labelled store front. The company is a B2B2C where they aren’t typically known to their users as their Storefronts are usually under the guise of its clients branding. MOBI’s Branded Storefront sits at the centre of the product ecosystem. Since the company’s inception it has undergone three major iterations, this project being it’s fourth. The project was split into two phases, the first of which focusing on platform, the second being experience. The platform change was needed to improve developer experience, enabling easier and faster shipping of features for our native and web apps. For the second phase we wanted to address major friction points in the user journey and improve average order value and conversion rates. For this project I lead the UI and experience design of the product. I also undertook the scoping, testing, market & user research. Post discovery I formed the team’s roadmap around the broad business strategy and OKR’s.

Main Tasks

Main Tasks

Main Tasks

Interface and experience

Data analysis

A/B testing

User research interviews

Problems Being Solved

Problems Being Solved

Problems Being Solved

Product Discoverability

Product Findability

Checkout Friction

Internal Tooling

Problems Solved For

Problems Solved For

Problems Solved For

Franchises

Franchisees

Consumers

Internal staff

Increase to Conversion Average

Increase to Conversion Average

↑ 2% pt

Decrease in Time to Convert

Decrease in Time to Convert

↓ 28s

Increase in Product Revenue

Increase in Product Revenue

↑ 10%

Design Process

Timeline

Success Metrics & Problem Areas

The two key metrics in measuring the success of our storefronts are Average Order Value and Conversion Rate. In the storefront’s previous version there had already been considerable work and success in improving our Average Order Value metric, and because that effort could be carried forward we decided to make Conversion Rate our sole focus for this next iteration. A key correlation we made early into the discovery phase was between time to convert and the conversion rate itself, we found that the longer a user spent on the storefront the higher the likelihood of then dropping out. Post this finding we broke out the problem areas in the user journey that needed to be addressed. The first major dropout point was when the user browsed the menu, the second was after they had added items to their cart. To solve for menu browsing we would need to address discoverability and findability. To solve for Checkout we would need to need to isolate and reduce any friction in that process.

The two key metrics in measuring the success of our storefronts are Average Order Value and Conversion Rate. In the storefront’s previous version there had already been considerable work and success in improving our Average Order Value metric, and because that effort could be carried forward we decided to make Conversion Rate our sole focus for this next iteration. A key correlation we made early into the discovery phase was between time to convert and the conversion rate itself, we found that the longer a user spent on the storefront the higher the likelihood of then dropping out. Post this finding we broke out the problem areas in the user journey that needed to be addressed. The first major dropout point was when the user browsed the menu, the second was after they had added items to their cart. To solve for menu browsing we would need to address discoverability and findability. To solve for Checkout we would need to need to isolate and reduce any friction in that process.

Discoverability

Product Suggestions

The Product Suggestions feature helps new users without an account to see the products that they are most likely to order at that franchise. For users who engage with this feature, they save time in browsing the menu and suffering decision fatigue.

Restructuring the Menu

We had both quantitative and qualitative data (user screen recordings) to support that the longer users spend on our storefront the likelihood of them converting decreases by the minute.
The largest portion of the time was always spent in the menu, with users either trying to discover what they want or find what they want. To solve our discoverability problem we opted to flatten the hierarchy of the menu that would reduce the user interactions by a third.

Navigating the Menu

Upon reviewing anthropometric data we found that hands in the male 90th percentile will struggle with navigational elements placed at the top of a screen (these were for 6.1” devices not the 6.7” Max and Ultra variants).

The Flattened Hierarchy will serve as a significant experience change for the user as it drastically changes the way they navigate. 
Whilst the scroll length of the page is increased, the new layout will also include a conveniently located navigation bar where anchor tags will be placed so that users may quickly jump from category to category. This non linear approach to category navigation is where users will find more convenience when browsing client menus.

Upon reviewing anthropometric data we found that hands in the male 90th percentile will struggle with navigational elements placed at the top of a screen (these were for 6.1” devices not the 6.7” Max and Ultra variants).

The Flattened Hierarchy will serve as a significant experience change for the user as it drastically changes the way they navigate. 
Whilst the scroll length of the page is increased, the new layout will also include a conveniently located navigation bar where anchor tags will be placed so that users may quickly jump from category to category. This non linear approach to category navigation is where users will find more convenience when browsing client menus.

Findability

Product Recommendations

Where Product Suggestions helps new users discover products, Product Recommendations help existing users find their favourites. If the user is logged in, they see recommendations based on their previous purchases and adjacent products from other users who have similar tastes.

Servicing Dietary Needs

For users who have dietary sensitivities it was imperative our solution moved far away from its real world counterpart. Our solution could not stop at simply displaying relevant icons on menu items because that outcome ran contrary to our goal of getting users to make the best selections as fast as possible.We found that it is far more efficient for someone with a sensitivity to filter out what they cant eat and see what they can vs scanning an entire menu to see the sum of their options by memorising the relevant items.

Enabling Repeat Purchasing

Through our data we were able deduce that our users fall into two major archetypes when it comes to there purchasing behaviour. The two archetypes we found were, those who explore the menu on subsequent purchases and users who are creatures of habit that love their favourites.
‍The ‘explorers’ are served by our discoverability initiatives, where as the users who enjoy their favourites were served by a feature we had on the Storefront’s previous version (V3) called Load Last Order. The feature as the name implies allows users to re-order the same products in one tap, it warranted another iteration due to its success in V3 (8% usage rate with a 69.7% conversion rate when used). For V4 we wanted to iterate on this feature by allowing users to edit their previous order before committing it to the cart. We also added the ability to bypass the cart completely proceed directly to payment.

Friction

Simplifying Sign Up

Through our observation of guest usage, MOBI's sign up/ in flow has always presented as confusing. The confusion is due to the non standard staging of input fields, coupled with this the call to action buttons also give mixed messaging around what what the button will do. Currently one button navigates the user and the other confirms their input. Across our storefronts about 35% of orders are made by users who are new to the storefront, which is definitely a sizeable enough opportunity for us to build features focused on new users for.Our qualitative analysis of user session recordings (100 session sample size) shows friction to be the second largest contributor of drop out. All of these dropout occurrences happened at the check out, which is where the user is always prompted to sign up or sign in to continue.Our Simple Sign Up feature aims to take out the guess work for the user by having MOBI check whether they have an account or not. SSU achieves this by presenting the appropriate fields to fill in based on the email check.

Guest Checkout

The Guest Checkout feature is an attempt to convert new/ first time visitors to a particular storefront who are tentative but willing to try a new brand for the first time. Guest Checkout aims to lower the bar of commitment required to convert, where the user is only required to provide a name, phone number or email to proceed.

Final Outcome

Discoverability

Flattening the menu hierarchy was the most significant interface change made in our upgrade from V3 to V4. Our hypothesis was that, by cutting out the categories screen we would improve discoverability by allowing users to navigate with less taps. We also added a Product Suggestions carousel that exposed the most popular products first time users were ordering. All this proved fruitful for us, as the conversion time was cut by 28 seconds.



Another key metric we were measuring for was our Added to Cart Rate, we chose this metric as it would provide us with a more accurate read on the success of the menu layout change. We found that our V4 menu layout had increased our Added to Cart Rate by 11% points over V3. An 11% pt increase is a big win for discoverability, as that increase not only helps overall conversion it also turns new users into return users.

Flattening the menu hierarchy was the most significant interface change made in our upgrade from V3 to V4. Our hypothesis was that, by cutting out the categories screen we would improve discoverability by allowing users to navigate with less taps. We also added a Product Suggestions carousel that exposed the most popular products first time users were ordering. All this proved fruitful for us, as the conversion time was cut by 28 seconds.



Another key metric we were measuring for was our Added to Cart Rate, we chose this metric as it would provide us with a more accurate read on the success of the menu layout change. We found that our V4 menu layout had increased our Added to Cart Rate by 11% points over V3. An 11% pt increase is a big win for discoverability, as that increase not only helps overall conversion it also turns new users into return users.

Flattening the menu hierarchy was the most significant interface change made in our upgrade from V3 to V4. Our hypothesis was that, by cutting out the categories screen we would improve discoverability by allowing users to navigate with less taps. We also added a Product Suggestions carousel that exposed the most popular products first time users were ordering. All this proved fruitful for us, as the conversion time was cut by 28 seconds.



Another key metric we were measuring for was our Added to Cart Rate, we chose this metric as it would provide us with a more accurate read on the success of the menu layout change. We found that our V4 menu layout had increased our Added to Cart Rate by 11% points over V3. An 11% pt increase is a big win for discoverability, as that increase not only helps overall conversion it also turns new users into return users.

Findability

To make products more findable for new and returning users we introduced three key features in V4, the first being Product Recommendations, the second Dietary Filtering and the third Order Again.



Of the three new features Dietary Filtering is able to improve findability for both returning and existing users. The improvement comes from changing the paradigm in which users are able to qualify products that suit their requirements. Instead of scanning, MOBI filters and omits everything that isn’t relevant, allowing users to immediately know what their options are.

Our Product Recommendations and Order Again features help returning users order products that are similar to, or the same as their prior orders respectively. We know that Product Recommendations are a contributor to the improved Added to Cart Rate as it has a 30% engagement rate. The Order Again feature has a significantly lower engagement rate (4.4%) however, the conversion rate of this feature when engaged is 67.9% (up 18% points vs its V3 counterpart).

To make products more findable for new and returning users we introduced three key features in V4, the first being Product Recommendations, the second Dietary Filtering and the third Order Again.



Of the three new features Dietary Filtering is able to improve findability for both returning and existing users. The improvement comes from changing the paradigm in which users are able to qualify products that suit their requirements. Instead of scanning, MOBI filters and omits everything that isn’t relevant, allowing users to immediately know what their options are.

Our Product Recommendations and Order Again features help returning users order products that are similar to, or the same as their prior orders respectively. We know that Product Recommendations are a contributor to the improved Added to Cart Rate as it has a 30% engagement rate. The Order Again feature has a significantly lower engagement rate (4.4%) however, the conversion rate of this feature when engaged is 67.9% (up 18% points vs its V3 counterpart).

To make products more findable for new and returning users we introduced three key features in V4, the first being Product Recommendations, the second Dietary Filtering and the third Order Again.



Of the three new features Dietary Filtering is able to improve findability for both returning and existing users. The improvement comes from changing the paradigm in which users are able to qualify products that suit their requirements. Instead of scanning, MOBI filters and omits everything that isn’t relevant, allowing users to immediately know what their options are.

Our Product Recommendations and Order Again features help returning users order products that are similar to, or the same as their prior orders respectively. We know that Product Recommendations are a contributor to the improved Added to Cart Rate as it has a 30% engagement rate. The Order Again feature has a significantly lower engagement rate (4.4%) however, the conversion rate of this feature when engaged is 67.9% (up 18% points vs its V3 counterpart).

Optimising Checkout

For previous iteration of the storefront, the mandatory sign up has been the biggest point of failure for the checkout flow. For Version 4 we wanted to do two things to improve the conversion rate, the first was to simplify the sign up and sign in flow, the second was to offer a guest checkout.



Through a simplified sign up process, where we removed the need for the user to determine whether they had an account or no. We were able to improve our overall conversion rate by 0.6% of a percentage point. After building our Guest Checkout flow and AB testing it, we were able to bump this result to a further 1.5% point increase over the Version 3 Storefront’s conversion rate.

For previous iteration of the storefront, the mandatory sign up has been the biggest point of failure for the checkout flow. For Version 4 we wanted to do two things to improve the conversion rate, the first was to simplify the sign up and sign in flow, the second was to offer a guest checkout.



Through a simplified sign up process, where we removed the need for the user to determine whether they had an account or no. We were able to improve our overall conversion rate by 0.6% of a percentage point. After building our Guest Checkout flow and AB testing it, we were able to bump this result to a further 1.5% point increase over the Version 3 Storefront’s conversion rate.

For previous iteration of the storefront, the mandatory sign up has been the biggest point of failure for the checkout flow. For Version 4 we wanted to do two things to improve the conversion rate, the first was to simplify the sign up and sign in flow, the second was to offer a guest checkout.



Through a simplified sign up process, where we removed the need for the user to determine whether they had an account or no. We were able to improve our overall conversion rate by 0.6% of a percentage point. After building our Guest Checkout flow and AB testing it, we were able to bump this result to a further 1.5% point increase over the Version 3 Storefront’s conversion rate.

Tooling

In order to making configuring storefronts more accessible to the wider MOBI staff and our customers alike, we developed an interface that lets users style and configure the feature set they would like to employ. In doing this we had to put protections in place to maintain a base level of accessibility incase our clients breached standards.





The tooling we developed for Storefront V4 was a massive shift in the scalability and maintainability of this product, in its previous iteration this level of control was reserved for users who had knowledge of CSS and Javascript.

In order to making configuring storefronts more accessible to the wider MOBI staff and our customers alike, we developed an interface that lets users style and configure the feature set they would like to employ. In doing this we had to put protections in place to maintain a base level of accessibility incase our clients breached standards.





The tooling we developed for Storefront V4 was a massive shift in the scalability and maintainability of this product, in its previous iteration this level of control was reserved for users who had knowledge of CSS and Javascript.

In order to making configuring storefronts more accessible to the wider MOBI staff and our customers alike, we developed an interface that lets users style and configure the feature set they would like to employ. In doing this we had to put protections in place to maintain a base level of accessibility incase our clients breached standards.





The tooling we developed for Storefront V4 was a massive shift in the scalability and maintainability of this product, in its previous iteration this level of control was reserved for users who had knowledge of CSS and Javascript.

Learnings

This project was one of considerable scale as it is MOBI’s core product and touches all of our clients as well the staff that support them. A learning we picked up from this project was power of tool building in parallel with feature building. We learned a lesson early in release that the ability to manage and scale features are as important as the features themselves, even when in MVP state. We now no longer leave the management of new MVP software in a state where that can only be done programatically, the tooling for support and implementations staff are built in parallel and not in sequence. 



Despite the teething issues we had in the MVP period we achieved a great result with our outcome, overall we averaged a 2% point increase in our conversion rate against V3, However some of our clients were able to see as high as a 6% point increase. 

The 2% point increase in conversion ultimately translated to a 10% increase in product revenue, with this being the company's core product the revenue bump was substantial and considered a big win for both our clients and the company as a whole .

This project was one of considerable scale as it is MOBI’s core product and touches all of our clients as well the staff that support them. A learning we picked up from this project was power of tool building in parallel with feature building. We learned a lesson early in release that the ability to manage and scale features are as important as the features themselves, even when in MVP state. We now no longer leave the management of new MVP software in a state where that can only be done programatically, the tooling for support and implementations staff are built in parallel and not in sequence. 



Despite the teething issues we had in the MVP period we achieved a great result with our outcome, overall we averaged a 2% point increase in our conversion rate against V3, However some of our clients were able to see as high as a 6% point increase. 

The 2% point increase in conversion ultimately translated to a 10% increase in product revenue, with this being the company's core product the revenue bump was substantial and considered a big win for both our clients and the company as a whole .

This project was one of considerable scale as it is MOBI’s core product and touches all of our clients as well the staff that support them. A learning we picked up from this project was power of tool building in parallel with feature building. We learned a lesson early in release that the ability to manage and scale features are as important as the features themselves, even when in MVP state. We now no longer leave the management of new MVP software in a state where that can only be done programatically, the tooling for support and implementations staff are built in parallel and not in sequence. 



Despite the teething issues we had in the MVP period we achieved a great result with our outcome, overall we averaged a 2% point increase in our conversion rate against V3, However some of our clients were able to see as high as a 6% point increase. 

The 2% point increase in conversion ultimately translated to a 10% increase in product revenue, with this being the company's core product the revenue bump was substantial and considered a big win for both our clients and the company as a whole .

Let's Connect

Would love to hear from you, so give me a yell.

Contact Me

Matthew Thomas

Let's Connect

Would love to hear from you, so give me a yell.

Contact Me

Matthew Thomas

Let's Connect

Would love to hear from you, so give me a yell.

Contact Me

Matthew Thomas