Snapp super app homepage revamp — a Case Study

Snapp super app was launched with the purpose of promoting a bigger marketplace for its users in Iran. The idea was to provide easier access to different currently available services and ventures such as getting rides, buying flight tickets and ordering food, and many more ideas to come in the future. We aspire to meet all daily needs of Iranian people.

The goal was to cater to all needs of the user in one single page. Our first challenge was to provide a level of familiarity and convenience through our homepage.

The homepage before changes

Problem Statement

Our problems differed into 4 sections. First, we found out the wasted spaces on the homepage were holding back our presentative abilities. Second, the irrelevant content on the homepage confused the users. Third, users couldn’t have a personalized look on the homepage tailored for them and finally, all of this could improve the overall user experience.

What were our challenges?

Like every transition, we had to acknowledge what challenges we had and what we were about to face. Through our observations, we found the items listed below:

1. Users are not using all services that are provided on the super app.
2. Users are not staying on the homepage enough to see everything.
3. Users are not familiar with the idea of a super app.
4. Users are not aware of clickable points on the homepage.

The problematic areas

Discovery

We focused on three subjects prior to the process:

1. What changes were needed and where did they come from?

When we went over our homepage, we understood about having too much wasted space on it. The problems were banners placing and unappealing content which made the users negligent and ignorant. There was a big green banner on the top which served no purpose and the design at that time didn’t allow much flexibility as to make any modification on the homepage. Some sections overlapped and led users to similar services. Snapp Club, for instance, had two sections and got the most CTR of the homepage among other elements.

2. What was distractive and irrelevant content on super app homepage?

Our goals were to lower the effort for the user to place an order, motivate users to stay on the homepage, and see our new and exclusive content or service promotions. We also wanted to make the users more eager and attentive to the banners and finally, increase orders from two or more super app ventures. None of these goals were achievable with only one static banner.

3. What are the areas to improve the experience for Snapp users?

When we had our problems on the agenda, we narrowed them down to know what to improve and how to improve this experience for our users. The first problem was with our color pallet being miscellaneous and confusing for users when trying to find services on the homepage. There were meaningless touch-points and messy presentation of data and content. Users’ unfamiliarity with all the services we offer went hand in hand with the mentioned problems.

Analysis process — Early stages

The Product/Design Process for revamping our homepage restructure

By knowing the details of a well-structured homepage that enables us to show our services based on users’ residence, we wanted to change our homepage structure and add dynamic cards to it.

The taken steps towards restructure

1. What’s going on across other super apps realm

During our research phase for the new homepage design, we focused on finding design-oriented solutions for each step we are required to take in our design process. We studied several articles which other similar businesses published in their blogs and then we started to find solutions to get the most out of wasted spaces on the homepage.

Simultaneously for having dynamic sections, we started benchmarking other popular applications, namely Gojek, WeChat, Alipay and Grab and analyze their strategies to find a solution for the increment of CTR, GMV, and user retention for super app and encourage Cab users to use more than one service on the homepage. During this research phase, we found that a combination of E-Commerce and Super app will be beneficial.

Benchmarking international alternatives

2. Homepage redesign

These steps were mainly designed sprint sessions between Fahim and Dana from the product team and Hooman and Ehsan from the design team to brainstorm ideas for the super app structure. For example:

• We wanted to have more than one visible row of Service icons/Sections on the homepage so we wanted more visibility.
• Better accessibility
• Importance of different sections for the business and users. Information organization throughout the whole page, and a new structure based on usage and hierarchical structure.
• And etc.

And then our designers started to design various alternatives with collaboration on each section during our design sprints and among all the alternatives, we picked the final design candidate with the expert review model to start our future tests and experiments.

We decided to dive deep into the prototyping phase earliest as possible and created/tested many of our alternatives.

3. Validating our hypothesis:

In order to:

1. Be super user-centered and have a dedicated empathy with our end users
2. Find our flaws and errors ASAP
3. Save time and have an efficient design process

Because the users have used Snapp before, if we don’t have a detailed high-fidelity, they might be confused when testing and distance us from our testing goals. “Protopie” was the app we used for this process.

Information architecture structure

4. Dynamic sections design

During this phase, We started our design procedure by designing different cards based on services we have on the super app after investigating all ventures in Snapp, we gathered all the similar cards design from similar applications and from our ventures homepage in one place. Later, in one design sprint session with Dana from the product team and Hooman and Ehsan from the design team, we picked every field for each card component from already gathered data to build our components.

For having a more hierarchical presentation of content and data on the homepage, we sought after Snapp group business model and came to the conclusion of presenting each product in three levels:

• Small deals for products or services,
• Medium deals for providers or middle vendors, and
• Big deals for service providers.

Our goal is to represent these offers in an apparent way, and as for our future plan, we want to have a recommendation system based on users’ behavior.

Three models of business

5. MVP

We wanted to test our hypothesis about having a Dynamic Homepage so we started to use our static cards as an MVP of dynamic cards.

We had two goals with our dynamic banner on the homepage :

1. Reduce the steps needed for placing an order for the user
2. Increase the number of clicks on the banner section on the super app homepage

The first step in using static banners as dynamic cards MVPs was to persuade our ventures to promote their most popular services, deals and campaigns on our homepage, such as top 5 food categories, top 5 hotels and flights, top 5 services from doctors, and so on. The banners have consisted of multiple colors which were confusing and messy as shown below:

Our dynamic cards

Right now, with our expert review method, we picked our winning alternative prototype to start testing it for the new homepage design and we are ready to validate our idea about dynamic homepage.

6. User Research

When it came to the testing stage, we went with our winning alternative, solely focusing on answering the questions below:

1. Since we replaced the bottom and top bar on the new homepage design, can users easily find icons in new positions?
2. By adding a floating bottom bar that contains Snapp’s most valuable ventures, can users easily find these ventures?
3. How easy it is for users to comprehend and find the “Icons inside icon” concept?
4. How easy it is to navigate on the Super app homepage?
5. What would grab the user’s attention to tap on banners?
6. What is users’ mindset over a super app?

New structure vs the old one

User Research Process

Same as all the UX research projects, UX research team defined the methods based on our questions. For answering the questions 1–4 We needed to find out about users’ behaviors and interactions with new designs and users’ mindsets, expectations, and thoughts over Snapp as a super app for the questions 5 and 6.

Choosing UX research Methods:

For the behavioral questions, we needed the usability test, and for the attitudinal ones, we needed the user interview. Nayyereh our UX research lead held the session with the product team and designers for planning the research. In the end, we came to combine the two methods.

Before starting the test, We interviewed users with a shortlist of questions in 20 minutes, and then we gave them the scenario for the usability test in another 20 minutes.

How we chose the users:

We chose the users’ segment based on their order behavior and interactions since Snapp became a super app.

After all, in a brainstorming session with our data team, product and design team we came up with these four segments:

1. Users who have requested Snapp cab in the last 6 months (5 users)
2. Users who have used Snapp cab and Snapp food in the last 6 months (5 users)
3. Users who have used more than 2 ventures in the last 6 months (5 users)
4. Users who have stopped ordering from any ventures since Snapp! becoming a super app

User Interview results:

• Around 85% of participants haven’t noticed Snapped becoming a Super-app and were not familiar with the word “super app”.
• Users attribute super apps with “all in one” and “availability” characteristics.
• one of the main reason of not ordering from other ventures was the demand and supply chain aren’t balanced especially in small cities.
• Users need to feel a harmonized experience when using different ventures.

The Usability test results:

• In all segments, 100% of users find cab and food easily.
• Users can find the bottom bar but they need time to get used to it. (we need A/B tests for measuring the learning curve)
• Users cannot differentiate vouchers from voucher centers and club sections.
• Users don’t tap on the banners/carts because they expect something specialized for them.
• Users didn’t scroll on the homepage because it is noisy.
• “Icons inside icon” is new for users and they don’t know there are icons inside each other, even the badges weren’t helpful at first.

Conclusion:

For the new homepage design, We decided to start the project if the test result was successful on above 70% of our users, bring it back to the design iteration loop if the success rate was between 50% to 70% to improve it based on feedback, and stop the project and check it from sketch if the rate was below 50%. Our result rate was reported 85%.

For the Dynamic section, The static banners MVP testing led to 20% improvement in homepage CTR.

Final design

Finally, after 2 weeks of running tests with our UX and Data team, we had our final design and we could start working on implementing the new functionalities and features needed in our new product.

As for dynamic cards, we wanted to increase user engagement by showing more relevant data to them.

The final design

New product definition

What we expected to work on:

• Get more attention on the homepage more than one service icon row.
• Show dynamic and relevant content to the users.
• Replace the bottom bar closer to the user’s thumb.
• Use the first fold of the homepage for showing the top priority of product and business.
• Make the homepage organized and professional.

What we decided to do

Using all potential spaces on the homepage

To improve the practicality of our homepage, we decided to present related services via an icon in icon feature. These new icons helped users to find and navigate easier on the homepage.

To get the most out of the available spaces on the homepage, we removed the green banner from the top of the homepage. As we are providing lots of different services on the super app, Color squares next to each title helped us with better presentation of services to users, such as pink for food. Combination of subtitles with titles to give more information about each section and improving our scrolling model to smooth scrolling in banner carousels to present more than one banner after each scroll.

Presentation of different services

Grouping of related sections on the homepage in one navigation bar on the top of the homepage, and grouping 4 of our most used service icons in one floated bottom bar on the bottom of the homepage to make it easier to see while scrolling and keeping them closer to users thumb. This structure helped us to find a better place for user profiles and wallets and features to be added in the future so that users can customize their profiles from the homepage.

Increasing user engagement in the super app

Through these changes we increased user engagement with super app:

• Dynamic Card: They change by each refresh and present users with attribute-based content.
• Campaign banners/icons: These are static banners or service icons that can be shown to a pre-defined bucket of users.
• Slider banners: We had only one static banner which the marketing team overused. We gave them the slider section to use so that we both could provide services with higher functionalities such as a faster scroll rate in which every five seconds showed a new banner with guidance dots to let the user know how many banners there are.
• Coach-mark: They were added to point the most used features for the user in the bottom-bar section.
• Adding an arrow button made the users curious to scroll to the bottom of the homepage.
• Location-based sections: Presenting available services selectively to the users based on their location to avoid spamming users in cities with unavailable services.

Improving user experience

UI Elements:

Knowing the problems we had, We decided to align our guidelines with the OS’s design system. In addition, we expedited the design process and development so that our users can interact with ease.

On the one hand, Google’s material design system comprehensiveness and documentation is very suitable for large and interwoven systems like Snapp. Day by day new ventures establish in the Snapp company, and the need for a detailed design system is in demand more than ever.

On the other hand, Material Design remains a fairly flexible design library; within the guidelines, much of the specifics of how to implement the design are left up to the designer.

We will tell more about the design system on the other document in the future but for now, let’s dive into some quick examples:

Our old typography system did not have a clean structure for titles and body texts; it was very hard to scan the components by the users, and it looked messy and out of order. Using Google Material typography system helps us to create a clean interface; all of our complex components such as dynamic cards got more readable and consistent.

We kept all of our main colors and used them again. But our old color system had accessibility issues and we changed their contrast. For the main color, which was our brand color, we used the darker green which was already defined by the brand; it meets the accessibility checkpoints and needs.

Furthermore, by checking color contrast, we defined all state colors which helped users to get feedback while interacting with components.

Color coding

Visual marketing assets guideline:

In order to have a coherent homepage and harmonize super app services, we wanted to align content, coloring, and design with each other. A guideline of hierarchy and design rules was needed.:

• Color spectrum for each venture
• The new homepage followed a new pattern to help users understand each category easier.
• Snapp’s identity is a balance between coolness and seriousness and this must be consistent through all items.
• Visual assets were not harmonized and they had to be revised to be in the same style.

Information Architecture:

Before the redesign process, we received many feedbacks about users’ issues in getting services on the homepage.

Also, based on the “Heatmap” and other user interactions and CTR on the homepage, we changed our old structure to the new one. The new architecture is exact user’s mindset and during the interviews, a higher percentage of our users mentioned the same structure by card sorting process. (marketing banners is an exception due to the business requirements)

Implementation and Delivery

During and after finalizing the design, we ran numerous checking and solution design sessions with our tech team to check the viability of our new structure. The process was rather difficult and stressful because it was a massive change and right before the re-factoring project and we were aspiring for smooth and promising results. The implementation was divided into 4 sections (1- Top header 2- The top navigation bar 3- Bottom bar 4- UI changes) and we wanted to achieve it in one quarter although it was a tight deadline.

Implementation timeline

Secondary research

A/B test method:

After the implementation phase was done, we started to work on a null-hypothesis statistical model test scenario for the A/B test of our newly released homepage structure with our In house A/B test engine that we built in Snapp called aBaaS.

Obviously, the first test result was very important to us so we wanted to run it meticulously, and aBaaS enabling us to pick our test groups categorically, we could get our hands over precise results.

We decided to choose our first Test group based on our user’s behavior. We were working on the RFM table to pick the suitable bucket, and we decided to pick the user group ids that have used Food and Cab in the last 60 days with at least 2 orders from them, Then we put them in a chart to see their abundance.

After the completion of the said process, we chose the group and we started the test.

A/B test result:

• Homepage CTR and clicks Increased during the test.
• The average daily CTR, Clicks, and Orders of Logistic Service icons(Cab, Bike, Box, and Van) and Food, Market, Hotel, and Fintech increased during the test.
• Whenever Clicks and CTR increased significantly, we faced a small percentage of the drop in Services CR as we have in this test too, yet The Cab and Market CR increased.
• The visibility on service icons increased as right now we have 2 main rows for our icons. The first row is the service section and the bottom bar.
• The Clicks and CTR on the Top Navigation bar including Home, Snapp! Club and Voucher center sections increased.
• With normalized sessions in both Test and Control groups, we are able to get even more CTR for Cab from our new design structure.
• The Test shows in the start, people have some difficulty in finding bottom bar icons but in later days this problem was lifted.

The icons

Transition benefits in numbers

• Increment of total clicks on the homepage by 2%
• Average CTR of banner section increased by 28% at that time
• On average CTR of icons increased by 12% (Cab, bike, box, van)
• CTR of navigation bar of homepage increased by 100%
• Order of logistic icons increased by 4%
• CR of our main services (Food, Market, Doctor, Trip and etc.) increased by 4%
• Number of users who click on the Homepage increased by 67%

Roll-out

First, we showed the new design only to 10% of our users for two weeks then we checked the result and as it was successful, then we rolled it out for 30% of our users and we checked the result again. After this, we rolled out the new structure for 50% of our users then after one month of constant checking every little detail with our tech and business team, We finally decided to roll out our homepage for 100% of native users on May 11th. (21 Ordibehesht)

Conclusion

This process seemed easy at first, but turned out to be an engaging journey in which many people were involved. It was one of the biggest and most profitable projects for Snapp, where details matter. The result of this collaboration between 3 main pillars of Snapp, namely Product Management, Design and Development team and seamless coordination between them led to brighter results than we hoped for. This project became a role model for our continuous improvement in our company in days to come.

Thanks!

Make sure to check out the visual presentation on Behance and Dribbble and the Farsi version available on Virgool.

The crew members:

Hooman Hatefi— Senior Director, Design at Snapp (Linkedin, Behance, Dribbble, Twitter, Instagram)

Fahim Akhter— Group Senior Director, Product Management at Snapp (Linkedin)

Ehsan Madadi— Senior Product Designer at Snapp (Linkedin, Dribbble, Behance)

Dana Ebrahimi— Product Manager at Snapp (Linkedin)

nayyereh afzali— UX Research Lead at Snapp (Linkedin)

Yazdan Javadi— UX Writer at Snapp (Linkedin)