Revamping the app’s design to improve it by 30% using the AARRR framework.
Quick story🐉
As someone with no prior experience in trading, I find it overwhelming to research and understand which trades might succeed. I often rely on friends or family who are experienced traders to guide me through the process, which can be quite hectic.
I truly enjoy staying informed about global events, and upcoming movie releases, and predicting winners like those in the Oscars or Formula 1. These are areas where I feel passionate and knowledgeable.
This highlights the need for an app like Kalshi, where I can leverage my interests and predictions to make informed trades on events that matter to me without extensive trading knowledge.
Understanding the problem🤔
Kalshi is a platform where you can trade on the outcome of real-world events, like predicting the weather or election results. It’s unique because it is regulated by the CFTC (US Federal), making it a secure and legal way to trade predictions.
To learn more, I tried using the Kalshi web app. I found the layout confusing and hard to navigate, with some glitches. While the app provides resources for trading information, the actual trading process isn’t clear. It does show trade volumes effectively. However, navigating using the bottom bar is confusing because the icons and text are unfamiliar.
PS: I couldn’t access it fully because I can’t log in since it’s not available here.
I explored the company founder’s views on Kalshi and their vision, and I also read reviews from the App Store and Play Store.
Here are the findings:
- In an interview, Tarik Mansoor, founder of Kalshi, stated: “Traditional trading is often driven by events indirectly, but Kalshi makes it direct. Our challenge is introducing users to various trades and keeping them engaged. My vision is for Kalshi to become a marketplace where anyone can trade on anything of value over time.”
- User reviews highlighted issues such as confusing bidding displays, unclear tier-level requirements, and vague help tabs, which create friction for users.
Getting to know the users😶🌫️
I started by defining the demographics of the users and creating personas.
- Persona 1
Alex Johnson Alex Johnson, a 35-year-old financial analyst from New York, follows the news closely to make informed trades, hedging funds by understanding people’s beliefs and predicting market trends. - Persona 2
Jack Thompson Jack Thompson, a 20-year-old college student from Austin, TX, loves to bet with friends on various social and cultural events like football games, the Oscars, or whether the climate temperature will be high this year.
Problem Statement
Revamp the Kalshi app to create a user-friendly prediction market platform for event betting and trading.
Finding Solutions Through Competitors🔍
I explored Polymarket and Probo, both event trading platforms, along with Coin, a traditional trading app. Specifically, I examined their onboarding flow, home page, trading page, and help section. Here’s what I found:
Polymarket
Homescreen
- Effective use of proximity principle for readability.
- Engaging gamified theme.
- User-friendly bottom navigation with familiar icons.
Onboarding Flow
- No clear value proposition.
- Too much negative space.
- The sign-up area becomes empty after login.
Trading
- Missing volume bids and caution alerts.
- Lacks detailed trade information.
Help Section
- Located under ‘More’ on the right, the section appears on the left. It can be hard to find.
Overall feels more like a gambling app than a trading platform. Lack of information affects trust, but icons and trade layout are good.
Probo
Homescreen
- The white theme enhances readability, and the convenient burger menu is on the top right.
- Low-resolution images, icons, and no bottom bar or search bar, which is unusual.
Onboarding Flow
- Clear proposition splash screen: “Samachar (News), Vichaar (Views), and Vyapar (Business)”.
- Smooth two-step mobile number verification process with language selection for better accessibility
Trading
- Detailed trade and event information with graphs and stats changes based on Yes/No trade choices.
- No caution alerts or additional information.
Help Section
- Labeled as “Care,” which is confusing and creates friction.
- Only context and images, no direct customer support.
Overall it has a great copy, splash screens, and onboarding flow. Clean but somewhat empty design, leading to trust issues.
Coin by Zerodha
Homescreen
- Clean, simple, and shows your investments and market trends.
- Easy access to buy/sell mutual funds and view notifications.
Onboarding Flow
- Easy steps to set up your account and link your bank.
- Guidance and tips were provided during setup.
Trading
- Detailed trade and event information with graphs and stats changes based on Yes/No trade choices.
- No caution alerts or additional information.
Help Section
- Articles and videos to understand mutual funds.
- Help section and customer support via chat and email.
Overall, the Coin app by Zerodha offers a smooth experience with all the essentials for mutual fund investing. It prioritizes strong security measures and is particularly user-friendly for new investors to grasp and utilize effectively
Solution Proposal
User-Friendly Interface
• Simplify navigation with clear icons.
• Use engaging splash screens to communicate value.Detailed Information and Transparency
• Provide comprehensive event details and real-time statistics.
• Include caution alerts and educational tips for informed trading.Trust and Security
• Implement transparent trading practices.Educational Support
• Develop tutorials and FAQs for users.
Mapping and sketching my ideas📌
I began by gathering inspiration from Mobbin and sketching out sitemaps to organize my ideas.
First, I wanted users to easily understand event trading, so I designed a fun, game-like educational flow. One idea was a quiz where users answer simple Yes/No questions and see potential earnings based on their predictions. After planning this out, I moved on to creating wireframes to visualize how everything would flow in the app.
Next, I focused on improving the onboarding experience after analyzing how other apps handle it. I noticed areas where our app could be more user-friendly, so I made notes and started sketching new wireframes.
I also tackled a common issue with adding funds to accounts, which I found was causing frustration.
Additionally, I worked on refining the home screen and navigation. Through various wireframe iterations, I tested different layouts to ensure everything was intuitive and easy to navigate.
Bringing my ideas to life🦋
The Kalshi app had established branding for typography and colors, but these elements weren’t being used effectively to create engaging emphasis and clear hierarchy. When I started, I focused on optimizing typography, colors, and layout to enhance the overall design.
Homepage
I began by redesigning the Home page, which was central to all other user flows.
- Addressed issues with repetitive sections.
- Enhanced the news section with images for improved visibility.
- Improved icon familiarity and functionality in the Navigation Bar.
Onboarding Flow
Next, I crafted a gamified and engaging onboarding experience for new users.
- Implemented carousel splash screens for a smoother introduction.
- Added a hide and view password button for enhanced security and convenience.
- Provided clear instructions for ID verification and terms and conditions.
Quiz Flow
I integrated a quiz flow to educate and help users on contract trading without disrupting their trading activities.
- Created component sets for easy selection and feedback.
- Designed animated backgrounds to maintain user engagement.
- Created a status bar component to display progress.
Add-fund Flow
I didn’t recreate the Add-fund Flow because I was close to my deadline and couldn’t access it. I also read that their recent update from reading reviews had improved.
Design System
As I designed each user flow, I simultaneously created icons, elements, buttons, and components. I iterated on these as I built different flows. These elements were crucial for every screen. Using Figma’s auto layout and component set features saved a lot of time.
And that’s all folks. Oh, wait!!🃏
I also considered whether this design needed A/B testing. Unfortunately, my time was limited and I had already missed my deadline. So, I conducted a quick usability test with my 10K folks. Here’s their feedback:
- The onboarding page had a dark theme that didn’t align well with the rest of the light design.
- Users preferred to drag interaction over delay in the Carousal.
- The Demo quiz was found to be ineffective in helping new users understand the product.
Based on the usability test findings, I made the following improvements:
Onboarding Improvements
I balanced the hierarchy and integrated the light theme to create a consistent design.Created a Trading Flow for activation
I used competitive research insights to create a more intuitive trading process with clear alerts and confirmations.Interactions
I created interactive components for onboarding and trading flows to enhance user engagement.
What I Learned for Future Work🔮
- Align with Timeline
Designing three new flows, conducting usability tests, and researching in two weeks was a challenge, especially as a newcomer. - Tool Mastery
I learned how to create animations and interactions using auto layout and component sets in Figma. - Focus on Execution
Starting with detailed ideas in wireframing saves time in prototyping. - Test Parameters
Clear usability test parameters are crucial for meaningful insights.
Thank-you note🫂
I’m grateful to my 10K community for their support throughout this design journey. Special thanks to Dheeraj, Abhishek, Pandey, Manvinder, Jaret, and Divya for their time, participation in the usability tests, and valuable insights.
I’d love to connect on LinkedIn for any questions, suggestions, or collaboration opportunities. I’m currently seeking Product Design roles. Let’s create something amazing together!
If you found this case study insightful, please show your appreciation by long-pressing the clap icon👏
