Simplify your financial journey effortlessly with Chrtter split expenses seamlessly, and get financial clarity
Chrtter
Time line
September 23rd -
Jan 24 th
Team members
Solo
Background
At a recent friendly dinner, I observed the complexity of splitting bills among friends with varied dietary preferences. This experience motivated me to create a user-friendly solution, leading to the development of Chrtter
Enjoying, going out, having fun
We in front of everyone
We are calculating money, which is very difficult sometimes
But, back of the mind
Problem statement
Young people often encounter difficulty in splitting their expenses, feeling embarrassed and hesitant to ask for owed money or return borrowed funds to others. This challenge creates a barrier to transparent and comfortable financial interactions among peers
Why have i followed the agile lean ux, here
Since the very beginning, I was fortunate to collaborate closely with the development team, enabling me to work concurrently. This stroke of luck is why adopted an agile lean UX approach
Principles to follow throughout
Minimal user input, Maximum value
Human-Centered design
Consistency
Used user stories, empathy maps, and personas for an emotionally resonant design, addressing genuine needs and emotions of users
Human-Centered UI design prioritizes user needs, behaviors, and experiences. It aims for intuitive, user-friendly interfaces to enhance the overall user experience
Established a standardized design language, ensuring consistent button placement, color usage, and overall visual elements throughout the app
Proto persona's
We organized a collaborative dot voting session with 8 potential users, where everyone strategically placed their dots on the most relevant 'How Might We' considerations, shaping our strategic direction
Selected HMW's
All potential solutions are strategically crafted for high impact and feasibility, with emphasis on those showing both qualities
Detailed UX stories are crafted to enhance clarity on identified issues, emphasizing the highlighted points mentioned earlier
User experience stories
As a college student, I want to effortlessly track past trip expenses for a well-informed financial journey
As a father, I want my app recognises and remembers my shared groceries, saving me from repeated typing
As an introvert, I want my friends to easily know when I've covered expenses, fostering smooth financial understanding
As a projects leader, I want to facilitate fair expense splitting, promoting financial equity and transparency within the team
As a user, I want my app carefully handling owed money reminders, fostering serene friendships
As a driver, I want to click a picture or scan the bill with my phone camera allowing ease of access
Now that I've looked into all those points, I'm all set to share the hypotheses I've come up with
Hypothesis
“we believe that making simple and intuitive money splitting app for our target audience will achieve engagement with the app through minimum input to the maximum value, we will know this is true when we see Task Completion Rate”
The journey begins as we embark on crafting the user journey map for a competitive app
User journey map of Splitwise
Loopholes, I found in splitwise
"Users are uncertain about who they owe"
"Direct path ways should be there"
"Wants to split money as soon as possible"
"Wants to avoid manual information input"
User journey map of Chrtter
As we transition into the development of our MVP, let's delve into the essential Information Architecture that will serve as the structural backbone for our innovative and user-centric product
Some of the Low fidelity iterations
These served as foundational low-fidelity elements, forming the basis for expressing my ideas and thoughts in my UI design
Task flow
As we proceed with our MVP, let's carefully design the task flow to ensure a seamless and intuitive user experience
Conducting a low-fidelity usability study with potential clients helps identify necessary UI changes early, preventing wasted time and energy in the future
The task:
Frustating and time consuming experience
Upon doing early stage usability testing, we noticed that users were feeling a bit frustrated and confused it took them around (~6 mins ) for the completion of task, they were quite stuck in the splitting ways (unequally, equally, shares, split by bill)
We figured out this problem
Most users prefer an equal split, so we made it the default. You can still adjust it at the end for a smoother process and improved overall flow
In the usability study, people got confused with the 'split by bill' option. They asked, 'What does it mean?' and 'Why is it here?' This shows we need more clarity and context
Solution
Setting an equal split as the default eliminates the need for manual selection, ensuring a clear and confusion-free start to the app
Opting for a seamless user experience, we've chosen to prioritize neglecting this screen and setting equality as the default
Icons construction
I've embraced the art of Keyline construction to achieve impeccable icon alignment, meticulously ensuring pixel perfection for a visually stunning and harmonious design
2 px centred stroke, 2-4 px rounded edges with spacious counters.
Why keyline grid?
In designing, I incorporated a meticulous keyline grid for symmetrical balance and pixel-perfect precision in every icon
Typography
Color style
Defined rules for selecting and applying colors to maintain visual consistency in design
Figma's color style facilitates swift and intuitive color selection, streamlining the design process for seamless creativity
Utilizing design tokens for seamless design-to-developer collaboration
I prioritize pixel perfection, that's why I've implemented a precise auto layout for simplicity and perfection in all design
I've carefully employed even-numbered spacing to achieve pixel-perfect precision in the design, ensuring a visually harmonious layout
Crafting borders for design tokens not only enhances visual consistency but also simplifies the handover to developers, ensuring a seamless transition from design to implementation
Brand colors
Crafted a user-friendly design that is both simple and visually comfortable. Ensuring accessibility for everyone, particularly those with close-range lower vision, our app promises a hassle-free experience
a11y
17.24:1
18.80:1
Buttons in a design system are interactive elements representing specific actions, providing consistency
Textfield Structures
Dictates the layout and styling of input fields, ensuring a cohesive and user-friendly design in UI
Button Structures
Define the layout and styling of interactive UI elements, ensuring a consistent and user-friendly experience
Design tokens structure
Unify design choices for consistency in UI, bridging designers and developers
Components
Using components streamlines the handoff process, making it easy for designers to share design assets with developers for smooth collaboration and implementation
Confirmation card
Presented here, are the several mockups showcasing the user interface for my case study, reflecting a commitment to precision and thoughtful design considerations
In the development of a money-splitting app, the challenge was to seamlessly merge user-centric design while balancing simplicity—an integral obstacle encompassing interface optimization, friction point resolution, and the maintenance of a secure user experience
Future proof
Since we will be MVP-based, there are still features we may consider adding later on, such as money management or payment functionalities like Google Pay or Apple Pay, which we will tailor according to the evolving needs of our users.