lucasmoreira.

The Hotmart app has been undergoing constant updates in its navigation structure and content display. With the release of a new version of the app's home screen, the home became very cluttered, displaying various carousels with different topics. These carousels ended up becoming the only access point to content on specific topics, making it difficult to group content and resources on the home screen. This led to the need to present many pieces of content using a similar component (the carousels).

Users can easily become overwhelmed when faced with too many options. When we present all the content in a similar way, everything visually becomes equally important, making it difficult for users to navigate the app.

The Tab Bar (also known as the Nav Bar on Android) is a simple way to group content and resources because each tab represents a separate section of the app. The Tab Bar is always visible and should provide users with easy access to the app's most important functions.

What is the purpose of the Tab/Nav Bar? A Tab Bar allows people to navigate between different areas of an app, such as Home, Marketplace, My Purchases, Communities, Profile, etc., thus providing easy and quick access to content on specific topics.

What are the pros and cons of tab navigation? Tabs offer many advantages, such as ease of navigation, space-saving, and quick access to content. Another benefit of using a bottom navigation bar is that it provides clear and consistent navigation cues to users, as they can always see the current and available options in the app. This reduces confusion and cognitive load and helps users form a mental model of the app's structure and functionality. However, it is important to keep in mind that tab navigation also has some disadvantages, including limited space for labels and, consequently, a limited number of categories that can be displayed.

1. By implementing the Tab/Nav Bar in the app, grouping the content and resources represented in a separate section of the application,
 a. We will provide users with easier and more intuitive navigation,
    i. offering greater and quicker access to content on specific topics
    ii. and increasing access to the marketplace.

Context
The Hotmart app recently underwent a brand transition, retiring the Sparkle brand, which was focused on communities, and is now simply called Hotmart. This encompasses not only communities but also the HUB (Consumer Central) and the Club (courses), in its vision for the Consumer.

However, the current navigation architecture of the app is outdated and obsolete, still using much of the legacy navigation architecture from Sparkle. Additionally, the legacy assumed by the Hotmart app does not align with the quality we want to deliver to the market in terms of visual design, usability, and micro-interactions. The app is unattractive, not interactive, and does not reflect the market leader positioning that Hotmart currently holds.

With the implementation of the Tab Bar in the app, the structural improvements create opportunities for the inclusion of new areas within the app and open doors for new monetization possibilities with the marketplace. This includes sales in the Club, whether they are courses or communities, as well as other formats like eBooks and Events.

In the last quarter, sales directly in the Club (Club Sales, Free Module, and Paid Extra Module) generated 12.9M in GMV (desktop and responsive), which can present a growth opportunity with sales attributed to the app (IAP or lead generation).

The app's home is a complex web of content related to the consumer user, providing a preview of access to purchased items, courses and lessons started and/or in progress, and communities to which the user has guaranteed access. To access all the content, user needs to scroll to find what they want to acesses.

Considering the extensive explorations and evolutions planned for the app's home in the coming quarters, the Tab Bar becomes the official guide to help users navigate the app.

‍

To access the communities they are entitled to, the user needs to scroll down the page, find the communities carousel, which only displays the ten most recently accessed, and click on "show all" to see the complete list of communities.

‍

‍

Here is where the user will access all content acquired on Hotmart, whether paid or free, including Clubs, courses, and communities, as well as eBooks and access to Events. Here, the user only finds the last ten purchases, and it is necessary to click on "show all" for the component to open with the complete list of purchases.

‍

Proposed SolutionWe will introduce a Tab Bar as the main navigation method of the app, offering a new UX that accommodates all the content offered by Hotmart and is aligned with other external areas.

‍

To measure the success of the hypothesis, we will track the following metrics:
● Access rate to Communities;
     ○ Current state: X%
     ○ Expected result: Y%

● Access rate to the Purchases;
     ○ Current state: X%
     ○ Expected result: Y%

Secondary metrics:
● Interactions with the nav bar;
● Session time in the app;
● Reduction in access and findability tickets;
● NPS/CSAT;
● App ratings/feedback (iOS and Android) in the stores;
● Access and interaction with the community listing and feed (if developed);
● App retention rate (MAU);
● Number of leads sent to the Consumer Platform and Club.

‍

● Prioritization of user stories for the next quarter;
● Development of the new experience and conducting PM/UI review;
● Implementation of events in Firebase and Datahub;
● Preparing CX operations for user support;
● Preparing a dashboard to monitor results;
● Progressive rollout to the base with operational monitoring;
● Building a go-to-market strategy using other channels and conducting tests;
● Tracking and sharing results with stakeholders.

‍

Reach: 11.8 million users [unique users in the app in 2023]

‍
Impact:
● High, brand awareness in B2C and better consumer experience as a sales argument in B2B. Possibility of expanding app functionalities more simply and quickly.
● 3.1M GMV generated by traffic sent to the marketplace (expected result minus current result with the fake door)
     ○ Current state: 6.3M/year (projected result with the current fake door, 10.02% banner conversion, 64.34% fake door conversion, 3% marketplace conversion, and AOV of R$189)
     ○ Expected result: 9.4M/year (projected result with improved banner conversion from 10.02% to 15%, 64.34% fake door conversion, 3% marketplace conversion, and AOV of R$189)
● Increased engagement in using Club communities through the community feed.‍

Confidence: 8/10.
● Confidence in this hypothesis is high. Due to the relatively small screen size of mobile devices, navigation is always a challenge. That's why a simple, well-structured information architecture with hierarchies to clearly prioritize content is crucial.

Effort: 7/10.
● The effort to implement this hypothesis is moderate. There is a legacy of a Tab/Nav Bar in the old Sparkle code. Therefore, a more accurate evaluation requires a deeper analysis of the code versus the definition of the new architecture.
     ○ iOS 8/10: May increase or decrease according to the points raised above;
     ○ Android 6/10: May increase or decrease according to the points raised above.

‍

Product Vision, Project Management, UX Design, Research, Interaction Design, Prototyping, Usability Testing, Visual Design.

‍

‍