Them Consulting
The Foundation Design System: A multi-brand design system created to ship products 4x faster
Multi-Brand Design System
Feb 2022 - Aug 2022 (ongoing project)
The Team
Me as Lead Designer alongside Experience Design Director, 2 Product Designers, 4 Product Managers and 5 Developers
Tools used
Pencil, paper, sticky notes, sharpie, markers & whiteboard. How can a designer even live without that?! 🤷🏻♂️ But also...
My Role
As the lead product designer for THEM Consulting, I managed the project and designed the end to end experience for Wave 2.0, a flagship product of 63 Moons (a client of THEM Consulting).
Product Envisioning & Strategy
Process & Scope Management
Sprint Planning
UX Architecture
User Flows & Journey
UI Design
Design System
Micro Interactions & Motion Design
Development coordination & Support
challenge
Due to outdated tools, brokers faced challenges in retaining customers in the shifting market
With the rise of many digital-first brokerage firms and start-ups offering more user-friendly platforms, traditional brokers faced a huge challenge in retaining and attracting customers in this evolving market.
Market scenario
New age start-ups and retail brokers had several strategic advantages
Digital-first brokers attract users with better tech, low fees, and user friendly apps, making trading easy and affordable. Their innovations and large user base give them an edge over traditional brokers.
THE BUSINESS OBJECTIVE
Brokerage firms were looking to build a competitive, future-ready mobile trading app with a focus on superior UX
To attract and retain users and compete globally with superior UX, brokerage firms partnered with 63 Moons, a fintech solutions company to build a cost-efficient, user-friendly, and adaptable mobile trading app to stay competitive and grow faster.
Enter wave 2.0
Wave 2.0 helped brokerage firms get a digital transformation in record time
63 Moons' Wave 2.0 is a versatile, white-labeled mobile trading app designed for brokers to rebrand and tailor the app according to their unique branding, strategic advantages and service offerings, enhancing their competitive edge in the market.
who are the end users?
Let's get a glimpse of the key users and their behaviors
understanding the brokerage market
We engaged with brokerage companies, traders, and 63 Moons sales team to understand the intricate brokerage market
These conversations revealed that traditional brokers needed to reinvent their brand image by delivering digital experiences to their customers. Given that this was a B2B2C product, it was crucial to define what constituted a Superior UX" in terms of the value brokers would derive, leading to increased transactions, engagement, and customer retention, ultimately benefiting 63 Moons.
BRAINSTORMING TO SHAPE BEHAVIOR
To understand what leads to increased trade behavior, it is crucial to understand the key motivations and triggers
After synthesizing the information from our research and conducting a product envisioning exercise, we identified several human factors that shape value for users to trade in the stock market. Here are the top 5 factors based on the envisioning exercise that was conducted:
The fear of missing out on opportunities
Users are driven by the fear of missing potential gains, especially during market highs or when specific stocks are trending. Social proof, such as seeing peers or influencers profiting, amplifies this trigger.
Confidence due to a better experience or understanding of the market
Prior positive experiences and gaining deeper knowledge builds confidence to initiate more trades. Eg: Getting more positive returns provokes users to initiate more trades.
Loss aversion
Users are more motivated to avoid losses than to achieve equivalent gains, leading to risk-averse behaviors such as holding onto losing stocks or hedging through diversified investments.
Personal goals and aspirations
Financial aspirations like wealth creation, retirement planning, or funding specific life goals drive users to invest and trade actively.
Receiving a large income
Receiving a large sum in their bank account triggers many users to invest money. The comparatively large value of returns through trading entices users to invest money in the stock market.
EXISTING PAIN POINTS & Opportunities
There were several gaps and opportunities in the market
Inefficient hand holding of users
Existing apps often do not align well with actual user behavior, leading to missed opportunities and frustration.
Demands users to recall a lot of information
Current designs across several competitor apps demand constant attention & vigilance. Which relies a lot on the user's memory and ability to recall. This can increase the hesitation to conduct trades.
Lack of contextual visibility of the market
Anxiety over order statuses, market updates, and quick decision-making adds stress for traders. By providing these information contextually where relevant, can improve market visibility and leads to informed decision making.
Several lost opportunities to transact
Users struggle to select the right stocks due to ambiguity and lack of guidance. Providing users with opportunities and recommendation reduces anxiety and increases trades.
Lack of contextual insights
Lack of clear guidance increases the anxiety of making errors. Learning with experience & informed decisions help reduce anxiety & build confidence.
Exhaustive and confusing app navigation
Less adaptive app and non-intuitive menu structures make it difficult to find desired information while performing sensitive tasks especially while jumping across the app to find relevant information.
DEFINING THE Product Goals
What did we aim to achieve?
Drive engagement & transactions
Acquire & retain more
Easy customization & modularity
Build trust through contextual guidance
New Paradigm for future & options
Improved discoverability & navigation
The design principles
Values that shape the product
Trust & Reliability
Consistent Design
Reliable app performance
Effective use of feedback
Error prevention & user control
Effective use of Social Proof
Power & Confidence
Simple & Humanized content
Reduce ambiguity & confusion
Enable informed decision-making
Provide positive experience
Enable learning & exploration
Fast & Actionable
Leverage time-sensitive opportunities
Make important actions more accessible
Intuitive & discoverable
Recognition over recall
Contextual & Personalized
Designing the app architecture
Designing an intuitive and discoverable structure that aligns more with user behavior and business goals
After evaluating the trade behavior across existing solutions, we compiled our findings in a 2x2 matrix that compares frequent and most important actions. The app should deliver an unparalleled user experience for these activities.
Growth strategy: Reducing the barriers for decision making
Investing made smarter and more actionable
Simplifying the experience of finding the right stocks to invest with curated watchlists
Readily available watchlists in multiple categories aids in faster onboarding & decision making. One of the major pain points users face initially is going through the cumbersome process of selecting the right stocks for their watchlist.
Easy to start
HIGHER INITIAL TRADES
inCREASE IN Confidence to invest
HIGHER ACQUISITION
Reducing constant navigation by contextualizing key decision-making factors
New events/opportunities are shown upfront, on the top, are curated from multiple watchlists. This reduces cognitive load and the need to constantly switch between different watchlists, driving more trade.
rECOGNITION OVER RECALL
Motor load
Faster decisions
Increase in Trade conversions
Providing clarity and building trust by simplifying trades and providing sufficient context. This made the app flexible towards diverse trading styles.
Users can trade directly from the watchlist and other key areas. The product fosters trust and reliability by streamlining trading journeys with clear context, minimizing ambiguity, and enabling seamless switching between modes and styles of trading.
Trade conversions
tRUST & RELIABILITY
eASE OF USE
Growth strategy: Increasing app engagement
Building commitment to engage
Dynamically curated content
Dynamically curated content such as watchlist, opportunities, recommendations, news & research, etc. serve as a variable reward to check new updates on the app.
Notifications & alerts provoking action
Surfaces crucial opportunities and insights. Builds excitement and behaves as a trigger to take action.
App widgets: Visibility triggers action
This surfaces crucial opportunities, screeners or aspects that concerns the users. The nature of improved visibility of app widgets trigger FOMO and demands users to take action.
Contextual and adaptive nature of the app
Contextually surfaced information makes Wave 2.0 uniquely stand out in the brokerage market. Additionally, the nature of the app to learn and suggest preferences aligns more with user behavior, making it the preferred choice. Reducing the chances of switching to competitor apps.
Catering to seasoned investors
Reducing the friction to research, thereby enabling more trades
Traditionally, researching the stock market is a cumbersome process. However, it is very time-consuming and exhaustive. The simple yet insightful nature of Wave 2.0's market research makes it more discoverable & actionable.
Discoverability
Ease of use
higher trades
Options trading more scannable and actionable
A new paradigm for options trading
Designing for easy customization & Modularity
The Moon Design System. 250+ components. 4x faster design. Multiple features for brokers to pick from.
Fast design & delivery
We built a design system for designers and developers to just drag and drop components to put together mobile and web screens. This is used even today to design and write code for new features at speed.
Modular structure. Future-proof designs that's also easy to update
The design system has a flexible architecture to easily adapt to future changes and additions. This also allows brokerage firms to customize any component as per brand requirements.
Auto adjusts colors, contrasts and fonts as per brand
As a B2B2C product, it is crucial to ensure that the design of the product caters to different brands needs. The design and development team devised a typography and color system that is super easy to adjust as per the brand.
Cross-platform framework
We leveraged the Ionic Framework for cross-platform development, aligning our design system with Ionic guidelines to improve developer coordination.
A Success story
The numbers surpassed our expectations!
The outcomes of this innovation have surpassed expectations, showcasing remarkable results that highlight the success of this product.
Apps created
Trades per day
Trades per year
Avg. peak user session
*The rise in numbers are an approximation based on the data from the period of 2021 - 2022.
The Process & Scope of project
How was this project executed?
Lessons learnt
Reflections & key takeaways
Maintaining a balance between fast-paced iterations and perfectionism
As I delved deeper into the product, I made constant crucial design improvements when needed. However, some challenges couldn’t be fully solved within the timeframe, and that’s okay—we achieved the best possible outcome within the limits.
Working with ambiguity
Initially, I was focusing on doing the research, constantly testing and seeking perfection. As I progressed, I learned that ambiguities may always exist. Sometimes it's OK to take a wild guess based on prior experience and strong intuition.
Design for value and behavior
It's an innate nature for product teams to bombard the app with multiple features. However, it's the pain point, context, and behavioral understanding that shape the value of a product. So do not hesitate to ask critical questions. Asking questions your super power.
Ownership and diligence
Being a lead Designer, strong ownership, diligence, and effective decision-making were some of my core responsibilities. However, it's the critical thinking and growth mindset, that facilitated me to do my responsibilities.
Work as a team to enable each other
one of the most important responsibilities of a team member is to understand each other's challenges and find ways to enable each other as a team. Creating a safe space for team members to share vulnerabilities enables a growth mindset.
Other work
Not enough? Here is more.
End of the page. But...
This could be the start of our journey!
Designed in Figma & built️ in Webflow with ❤ by Akhilesh! © 2024
