Back to homepage

Context

I designed the mobile website, as well as the iOS and Android apps for smallcase, which are now live. 50% of the user base now transact on the apps. I was in charge of both the experience and the interface.

smallcases are investment products for a new generation of Indian investors. They are basket of stocks that reflect a theme or idea, and can be bought via multiple stock brokers across India. See the website here.

Role
Product Designer
Year
2018
Live app

The challenge

It was early 2018, and smallcase was just rolling out a brand new website. The only other platform it existed on was Android, which would now become obsolete.

The challenge was to design both the iOS and Android apps, as well as a mobile website which didn't exist back then, that feel like part of the same family. The experience was to be familiar, consistent, and reliabile no matter what platform they were accessing it from.

It wasn't just a re-skin. The whole mobile experience and its features needed to be thought of again, as the platform was evolving rapidly. The apps had to increase value, and be usable by millions.

Points of Input

During the process of building the mobile experience and UI, I made design decisions after by taking the following things into consideration.

Reviews & Support:
I went through numerous customer service complaints to figure out patterns, and also talked to the team to figure out the common and uncommon pain points faced by customers.

I also went through the reviews of the old Android app to figure out the same.
Metrics
I checked click heatmaps, screen recordings and quantitative data to find out more about how users behave differently on web and mobile, and tried to design for that.
User Interviews
I talked to users to understand pain points across different aspects of the app.
Developers
I had regular talks with developers since the beginning of the project about the feasibility of what I was designing.

Pain points

1: Hard to find a smallcase

One of the biggest pain point we found from user interviews that beginners had a hard time finding a smallcase to invest in. The Discover section had too many options and did not help in making a proper decision.

Old Discover section
2: People were unsure of what to do when they signed up

Newcomers to smallcase had a hard time knowing what to do next. Since a lot of the user base came directly from broker websites, they landed on smallcase without really knowing what it was. There was a lack of right information and confusion on what to do once they arrived.

3: Confusing empty and error states

A lot of customer complaints were regarding error states. The language was too technical and people did not understand what they meant, and reached out to support to understand what was actually wrong.

Empty states were also non-existent or unclear, and led to the people being confused as well. This was extremely distressing for users when an order went wrong and they couldn't understand why.

4: Old UI and legacy features

From the company's point of view, the UI and experience of the website did not match up with the old Android app, and the features on the old Android app were clunky and were not in sync with the website.

5: Missing iOS and mobile web experience

The company also wanted to create a consistent mobile experience across iOS, Android, and mobile web. iOS and mobile web did not exist yet, and Android was 2 years old, which is a lot in the life of a young, fast moving startup.

The outcome

700,000+
Investors that use smallcase
4.5
Rating on Play Store
50%+
of overall transactions are on mobile
1: A consistent feel

The iOS, Android apps and mobile website went live around the same time, with a brand new experience, which was consistent throughout.

The apps had consistency in icons, illustrations, language, error states, and empty states with the web platform to provide a seamless experience, whichever platform the user is transacting on.

A design system was also put in to place to keep UI elements similar all across the board. The navigation and native patterns were unique to each OS, so that users could feel at home with familiar interactions.

A consistent but familiar experience
2: Helping people feel at home

To help people familiarise with the platform, there was an onboarding flow put in place to help users feel at home as soon as they land on the smalllcase platform.

Users are guided through how smallcase can help them based on their level of investing experience.

The dashboard acts as a "safe nest" where they can come back if lost, with handy checklists and reading material to advance their investing journey. These are customised for different experience levels of investors.

Informative onboarding with a checklist and reading material on the Dashboard
3: Focus on discoverability

To help beginners find their first smallcase, the Discover section was redesigned to make it easier to find a smallcase of your choice. People can now go through curated sections for all kinds of investors, and also filter through all smallcases to find one that you like, for more experienced investors.

Making the Discover section easier to understand
4: New empty and error states

All error states were made more descriptive, and the language thought together along with the customer support team to make it more human.

The empty states were completely redesigned with illustrations, and the communication was re-thought with the same team to also give it a more human feel, and reduce confusion on what steps to take.

This made a large difference during the order placement flow, where each step was clear, and the error messages were made mode transparent and human, so that users could understand what went wrong.

New empty and error states
5: Revamping old features, and adding some new ones

A large part of the new experience included re-thinking the "clunky" features like Creating a smallcase which weren't utilised well due to their current design. Another aspect was adding new features that didn't exist before, like strategising and implementing the Buy + SIP flow, After Market Orders, and helping users track their Investments better.