Project Deco

A style of visual arts, architecture, and product design

Introduction

Imagine you’re in a new restaurant browsing through the menu, craving your perfect scoop of ice cream to finish your meal. Where would you typically find those ice cream flavours on the menu?

It’s usually tucked away on the last page, nested under the dessert section, isn’t it?

Now think about your experience when you land on an app’s homepage or landing page. Just like how the menu is the gateway to your food, the homepage serves as the entry point to access everything your app offers.

In this case, the menu card is like your homepage and the food categories are the different sections of the homepage. The easier it is to find what you’re looking for, the higher the value of your products.

Context — Why homepage?

You must have heard of the Angel One Super App. This was a transformation done a few years ago to make Angel Broking a power-packed app that caters to multiple investor and trader requirements within the same app. The Super App was built to offer products like equity, mutual funds, commodities, futures and options.

To realise the vision of the SuperApp and to support the needs of our growing user base, new business lines and products are being launched. We have now built the tech capabilities to introduce these business units on our platform, thus giving us a definite goal.

The Goal

Apart from equity, futures & options, and mutual funds, our roadmap accounts for Loans, Insurance and a few more products. To accommodate the new business units, we need to:

• Make the homepage structure more scalable
• Enable easy discovery of features
• Make the experience intuitive for all user types
• Enhance cross-pollination of our offerings

Now that we have a specific direction, the question we should ask here is, does our current structure accommodate this ?

The current structure

To set the context, let’s break down the first fold. The first fold is the front door, which introduces users to new features, offers and critical communication. The structure has banners on top to cross-sell our various products.

Next, we showcase market and portfolio updates to guide users in their trading journey. Finally we have a list of our top offerings such as IPO, MF and Gold bonds in the form of icons and text to increase recall value and accessibility.

This seemed ideal so far. But, when we tried designing the new features and searching for the ideal real estate, we realised some elements in the user experience that could be improved.

Limitations of the current structure

1. Limited visibility for products

This structure does not allow more than 3 features at a time. If we stack new features below the 3 listed now, it will prioritize them. In smaller devices, it will move to the second fold, reducing the likelihood of discoverability and clicks.

2. No room for new entry points

New features like news, onboarding journey, options dashboard, MTF product page and more are already struggling to find entry points. Fixed layout of widgets gives less room for scaling up.

3. Restricted value for the end user

Banners tend to become a blind spot for regular users. Which leads to the under-utilization of key screen real estate. Visibility of non-trade features is prioritized over trade-related features (MTF, basket order, FnO)

4. Unclear grouping of information

We have a navigation widget but for distinctive product types, for investors andtraders coupled in one. We have the black card, an entry point for pro-traders, which also requires segment activation. Between the two, we have a promotional widget and, a bouquet of trade calls without clear categorisation and context.

5. Loss of value for our core users

Most of our revenue is driven by traders, and trading-related visibility is very low. Key information like global indices, options strategies, insta trade, charts and third-party tools are nested in sections and hidden on the third fold.

We can safely say the old Super App had reached the brim, and adding features one after another started bloating the app, resulting in a lack of structure and loss of value. This structure even compromised the visibility and knowledge of key features that users will benefit from.

This created a huge opportunity to revamp our existing homepage and align with our roadmap. To achieve this, we started something called Project Deco!

Project Deco

Project Deco, is an initiative to explore a new navigational structure. We derived Deco from the Art Deco movement, a prominent design style that emerged in the 1920s–30s characterised by geometric shapes, sleek lines, and ornate motifs.

This is the direction we wanted to set for our restructuring — a hierarchical structure top down, symmetric organization of information, and an elevated yet simple visual language.

As designers we realised, there isn’t a one-shoe-fits-all type of solution. We should be willing to rework on our old designs to support the more significant cause of the business. Initially it may come at the cost of adaptation for existing users, but by using the right UX tools like FTUX and nudges, a redesign will prove to be profitable in the long run.

So, how do we find a solution?

Direction to achieve this goal

Before we set out to find a solution, we had to keep 3 non-negotiable conditions in mind:

• Rethink how we offer new products while retaining for our core business
• Rewiring the navigation without breaking established mental models
• Provide more freedom to highlight core features within each product bracket

The core structure

1. Product Visibility

The first and foremost problem to address was the visibility of all our product offerings. Keeping the above non-negotiable conditions in mind, we came up with 4 viable options:

a. Icon Repository

A dedicated “landing” or a “welcome” page for all users with links to all our products.

Pros:

• Clear segregation of offering
• A front page for our app can be used for several contextual marketing objectives
• Tailored experience for each asset class

Cons:

• Extended navigation adds friction to UX
• Repeated use or ineffective use can lead to users having a blinded outlook for the homepage
• Jumping between categories can be painful
• The learning curve for each category can induce more use of cognition for simpler tasks

b. Hamburger Menu

A dynamic menu with a list of all our offerings for handy navigation

Pros:

• Easy access to all asset classes from one single view
• Scalable to 10–15 offerings at a given time
• Known mental model
• Good for nested links

Cons:

• Lacks discoverability — easy to miss the offerings
• Requires maximum cognition power
• No room for cross-pollination of offerings
• Restricted marketing features
• Feels old-school and might add to our persistent issue of being a “legacy brand”
• Might still need a common homepage

c. Bottom Nav Entry

A dedicated drawer of all our offerings grouped in a “more section and pinned on bottom nav

Pros:

• Highly scalable to cater to up to 15 new offerings
• Easily works with new NBUs (presuming they’ll all be TWA)
• NBUs are not dependent on primary navigation patterns

Cons:

• Not easy to switch between offerings
• Nested navigation leads to difficult discovery and navigation
• Can’t be personalized based on user type
• Can’t have “last active” state

d. Tabular Structure

A dedicated homepage for each asset class for easy navigation and personalisation

Pros:

• Flatter navigation helps quick context-switching
• Aids discovery of other offerings
• Cross-pollination of services is still easier and contextual
• Home on L1 makes more room for dedicated features at L2

Cons:

• Good to cover up to 4 primary asset classes and upto 4 secondary offerings
• Not scalable beyond 8–10 offerings
• Business offerings will have to be categorised as primary and secondary
• Each asset class will have to have its own IA for primary flows

On auditing, we went ahead with option d, the Tabular Structure as it gave both the user and the business owner full autonomy — each product will get its dedicated page, each business unit can set its own priority of widgets within their product, all business verticals get the same level of importance as they do in a horizontal structure and users are made aware of all our offerings upfront and can go to their tab of choice.

Now that we have a structure in place, we had to find the best way to showcase the widgets inside the homepage. To figure that out, let’s go back to basics and see what an ideal homepage should be able to do. Right below each point, you will see how we tried to incorporate the same in our app.

The Ideal Homepage

Let’s draw a parallel between your homepage and your physical home. Just like an impressive entrance to a house can motivate you to explore the rest of the house, a carefully thought-out homepage must be able to do just that.

It must capture a user’s attention, encourage exploration of features and ultimately foster long-term engagement.

A high-converting homepage should ideally consist of the following in one form or another:

1. Visibility of key features

Users should easily see the various products offered upfront, promoting transparency and trust. This allows users to decide what they want from the app and conveniently access their desired actions or products.

Our approach:

• Retained core functionality at the global level — Search, Notification, Alerts and News.
• High-business-value products like IPO, Stock SIP, SGB, ETF, MTF accessed frequently by investors are segregated into tiles and placed right on top for distinct visibility and accessibility.
• The older Markets Today widget showcased 2 indices only. The new widget enables you to pin up to 5 indices across geographies. You have smart gestures like long press to rearrange the order to suit your portfolio and, live insights into the market.
• First fold gives access to the minimum information required to take action. You check how the market is performing through the Markets Today card, you check your portfolio and positions on your Portfolio Card, and then you take action through the top features or the bottom navigation.

2. Hierarchy

Arrange widgets intuitively, prioritising important features at the top and selective features on the way down based on relevance. This reduces the learning curve and makes browsing simple in knowledge-heavy industried like stock broking.

The left image shows the 2nd fold of Stocks, and theright image shows the 3rd fold of Stocks

Our approach:

• We created a feature hierarchy by arranging product verticals at the same level as tabs. Under each tab, we arranged widgets based on sequence of actions and feature relevance.
• The second fold has Popular Stocks which filters out the top stocks users invest in, Rewards and Offers that helps you make that first investment, and the Advisory that provides one level of filtration of portfolio advisory and single stock advisory for intermediate investors.
• The third fold has the Discover Stocks widget, which shares a third layer of information through tags, in addition to categorisation of top gainers, sectoral themes, etc.
• Now, novice and intermediate investors both have quick access to AngelOne Tools, eductaive tutorials on Trade buddy, internal blogs on the Learning Center, and External Services finds its way with investors who utilize it the most.

3. Personalisation by relevance

Tailor content and recommendations based on user preferences, behaviors, and demographics. This is crucial for apps with large user bases to build engagement, maintain satisfaction and avoid getting lost amongst the various products offered.

Images shown are after the common widgets of the first fold. Each image is the second fold under their own cohorts

Our approach:

• We cohortised our F&O segment users into 3 sections — novice, intermediate, and pro traders. There are so many types of traders and catering to each is difficult. Hence where time is the essence for traders, a broad cohortization helps us tailor the experience to a large extent.
• Novice — Users stepping into the trading space would require the most hand-holding and guidance. We have strategically placed our learning center, followed by an options watchlist that can be filtered out based on index and call / put, on the homepage itself.
• Intermediate — Users familiar with the workings can access watchlist directly followed by an advisory compiled by internal experts based on data.
• Pro Traders — Users who trade require information about indices’ expiries before trading, the status of their positions for the day and scanners with extensive filters of the market, LTP value and time.

Guided User Action

Incorporate a first-time user experience and time-based nudges to guide users through app usage, navigation, and features. Timely guidance reduces reliance on customer support and enhances user independence.

Our approach:

• Personalised widget in yellow, helps make the app truly your own. It guides you to actions specific to your use case. For example, if you haven’t placed an order yet, it will show you a banner with a CTA that takes you to your watchlist or saved orders directly.
• Persistent sticky nudge helps with urgent actions such as activating a segment, which is mandatory to invest in futures and options.
• Floating nudges are meant to grab users’ attention but are also dismissible by the user, it if they want to take action at a later time.
• Banners are mainly for promotional content used for cross-selling business verticals that are relevant for the user at that stage.

4. Responsiveness and Scalability

Design the app to adapt to various screen sizes and devices on iOS, Android, Web and iPad versions. Ensure scalability for future product expansions and updates over at least a two-year roadmap.

Our approach:

• We tailored the structure and design guidelines to be applicable for both iOS and Android, as well as light and dark modes.
• An extensive design system is in place for every atom, component, organism, icons, and illustrations a continued experience between devices and modes.
• We have utilized tokens to facilitate quick development, making it easy for developers across verticals to implement aligned designs.
• Angel One web works with the same principles and iPad is in the works.

6. Communicate Value Proposition

Clearly highlight the app’s value proposition upfront, to emphasize core benefits and unique selling points. This wil help users swiftly grasp the app’s advantages over competitors.

Fixing Discovery With Interaction

Our approach:

• The main verticals are in the tab structure, with the maximum number of eight verticals. As soon as the user lands on the app, he is shown a preview of the products through an automatic “Back to Front” scroll.
• To enhance retention, we keep the active tab in a fixed position, to always reveal one tab before it and two tabs after it. For example, when we click on Loans, it moves to the second position, showing the next two options in the first fold viewport.
• We also introduced a “Coming Soon” page to discuss the products in our pipeline, allowing users to plan their investments accordingly.

User Validation

We conducted a user research to for 3 reasons:

1. Discoverability — if users can find the entry point to their end goal.
2. Widget Effectiveness — If they know how to navigate the widget to achieve their goal.
3. Relevance — If the widget is relevant for the user on a scale of 1–10.

The intention of the research with users was to measure the impact and usability of new homepage IA of the Spark app and collect subjective feedback on each element to conclude how intuitive and usable those elements are for target user groups.

Some of the key findings were:

1. 95% of the users prefer the new IA over the old one and 5% of the users mentioned they are habituated to old homepage icons, names and locations.
2. 85% of the users identified the addition of 2+ indices on the new homepage IA and are happy about the addition.
3. 75% of the users liked the easy access to the investments overview on the portfolio tile of the new homepage IA.

This gave us confidence to roll out the new structure to our users!

Rollout Plan

We rolled out the new homepage to 5% of our users, gradually releasing it to 100%. This was to observe real-time user adaptation and pain points, patch-in the feedback in the upcoming releases and elevate the design for optimum user experience.

Here are some of the key numbers from the release:

1. Vertical scroll — increased by 14.89% — Shows potential increase in user interest leading to better engagement
2. Bounce Rate — decreased by 0.94% (around 1%)- Shows longer engagement and entry into modules.
3. Most bought stocks widget has contributed to 62% of orders driven from the homepage

Conclusion

This very strategic approach in our user experience allowed us to enhance the existing widget behavior and introduce entirely new widgets on the homepage, which users weren’t aware even existed in the app.

The trade-offs in every single decision and aligning with the requirements of all stakeholders were quite challenging, but the idea is to always have the end goal in mind while making a decision.

The goal is to enable users to achieve their intended goals by giving them autonomy to make quick and informative decisions, and execute the same through exceptional user experience.