Case Study
Leaprr
Company
Leaprr
Industry
Finance - Trading
Role: 2022 - Present
UX UI Designer
Duration
4 Months
Platform
Mobile (React)
Website
The goal was to create a mobile app that simplifies the journaling process within a four month time constraint and minimal resources.
300%
surge in trading volume by retail investors in 2021, significantly increasing the demand for tools like trading journals.
3 most popular apps were analyzed in the space - looking at both the journaling experience, features, and the negative comments in the app store for patterns.
Discovery
Leaprr can improve its product design and user experience by addressing pain points such as manual input, insufficient coaching functionalities, and overly complex interfaces.
An interview was conducted with 8 retail traders who regularly use a trading journal. Here was one of the questions.
Fast journaling and user-friendly
Provide feedback, coaching, and alerts
Dashboard customization
Alex
Sales Manager
USA
Alex has a long-standing interest in trading. Last year, he became serious about improving his skills and now uses a trading journal to track progress and build confidence.
Challenges
Struggles to maintain discipline and consistency in trading.
Struggles to use the journal to inform decisions effectively.
Goals
To improve his trading performance and consistency.
To refine trading strategies based on past performance.
Synthesizing the interviews into user-centered, clear, and actionable narratives.
Create the initial flow diagram that outlines the app's key functionality.
After iterations of the wireframe, it was time to define the fonts, colors, and components.
Color Palette
Primary, secondary, accent, feedback, background
Typography
AaBbCcDdEe
SF Pro - Heavy, Semi-bold, Light
I validated my prototype with 5 users by assigning them the task of adding a new position. I focused on the overall difficulty of the user experience and measured how long it took each user to complete the task. This usability study was done in-person.
Study Result
80% or 4 out of 5 users had difficulty finding the 'Add Position' button, which caused them to take longer to complete the task. I quickly realized that a more prominent button was needed to better guide new users.
Prototype Update
I added a larger button near the thumb zone to enhance reachability and usability for frequently performed tasks. Subsequent testing with 3 previous users and 2 new users demonstrated that 100% of participants completed the task efficiently.
Large values, such as formula results, large-denomination currencies, large prices, and quantities, were causing the layout to collapse.
Framing the problem
How might we design the trading journal to accommodate stocks, crypto, and futures while effectively managing large numbers and decimal places within the layout?
Exploring Solutions
Auto-scale font size according to the column width.
Limit characters and max amount for inputs and results.
Decision
We determined the best approach was to set character limits for the trading instruments, formula results, and add rules in specific inputs. For solution B, auto-scaling the text size was too complex and time-consuming, and it affected overall readability for users.
Further research was needed, including identifying the stock markets with the largest denomination notes, the most expensive stocks in each instrument, maximum decimal places across trading instruments, and average account sizes for large-scale retail traders.
Additional rules were applied for entering the price and quantity of each trade.
A two-column layout was used instead of three to provide more white space and prevent columns from shifting. Buy and sell tags were added to indicated transaction types.
The column width was precisely adjusted based on character limits from the research.
Due to limited space in the calendar for displaying daily PnL%, an icon is shown when values exceed 99.99%. The full PnL% is displayed at the bottom of the calendar.
We addressed traders' pain points with a user-friendly, analytics-driven platform. Through research and testing, the design met users' needs and supported their trading goals. Positive feedback was attributed to the intuitive interface and continuous iterations.
Users continued to provide valuable feedback, which significantly contributed to the app's success. By actively listening to our users, we were able to effectively prioritize future usability improvements and app functionality updates.
This project was an eye-opener and reinforced the importance of listening to users and delivering a product that benefits them without bias. Even the smallest design change, like a simple button, can have a meaningful impact on user experience.