Overview.
Beryl Labs (BL) is the first data intelligence startup within The Beryl Consulting Group that structures and enriches complex public and alternative data to deliver decision-making intelligence to hedge fund, private equity managers and institutional investors.
As a solo designer on the small but dynamic team, I developed the first foundational design system with visual guidelines, brand identity and component library. I conducted heuristic analysis on existing wireframes to re-design the platform's architecture for better user flow as well as own a new checkout feature from start to finish.
While we were preparing for the launch of our new platform for the following year, I developed an internal design system for use across all channels because everything was decentralised and not cohesive.
Well.. Where to even begin..?
Context.
A new marketplace platform in the making…
When I was dropped into the project, Beryl Labs was quite only in its baby stage of development without much of a project structure in place. I was handed a pretty ambiguous brief of basic functions along with a couple of rough sketches.
There was NO design system in place…
Early Findings.
Source: CreditCards.com
Newpoll survey of 1000 Americans
I first began to draw from statistics related to the target audience and their financial behaviors—
Studies show that as a young adult, you have an even higher chance of a bad experience with money settlement due to various factors such as limited financial experience and exposure.
Stakeholder Interview.
Breaking down into user segments ↘
I broke down the target audience into user segments based on the criteria given. Below are common situational groups so individual characteristics aren't too significant.
User interface at a glance.
Onboarding.
A way of visual storytelling...
These screens are the first things users see when they launch the app and is responsible for presenting the most important functions/aspects of Dutchee. I took this opportunity to paint a picture using fun illustrations and compelling captions.
User Research.
I wanted to hear from the users themselves.
Qualitative Data
I conducted interviews with 20 individuals from ages 18-28. I asked a range of open-ended questions to delve into their financial behaviors, as well as their preferences regarding bill splitting and expense management.
To get a better understanding of user needs, lets take a look at some insightful user stories shared ↓
Quantitative Data
I further collected measurable data from surveys to support my research with results that are quantifiable. ↓
+15 questions
Q: What is the biggest challenge you face when splitting expenses?
85% of people use apps to share costs and send money between friends and 60% of those have admit that they find it difficult to navigate the app’s interface.
Key findings & Affinity Mapping.
Affinity mapping helped me organize various concepts that emerged from user research. I visually grouped related ideas, pain points, and user needs, providing a clear and structured overview of the user-centric aspects. ↓
Efficiency & Time Optimization
Users want a seamless and quick user experience, minimizing tedious steps.
Frustrations & Challenges
Users struggle with complicated calculations and having to put in excessive effort to track expenses.
Needs/Wish
Users wish for intuitive tools for different occasions and want to stay updated with chnages.
Human/Social Factors
Users seek transparency and want to avoid confusion, potentially straining relationships with friends.
Competitive Analysis.
Hold on. First, what are others doing?
I analyzed the 3 most popular bill-splitting apps in the market to determine which features are most appreciated and to identify their shortcomings. Though each has its pros & cons, most lacked features that could easily accommodate to any situation given, causing users to resort to manual calculations. This presented an opportunity for a solution.
Information Architecture.
Design System.
Thinking about adaptability...
With various screen sizes and platforms being used, logos can't be designed with a one-size-fits-all approach anymore. Logos must be flexible in terms of size, intricacy, and arrangement to seamlessly adjust to their placement within different environments and contexts thus, I created three different responsive logos.
Responsive Logotype
Design/Brand library
Wireframe ⟶ Hi-fidelity Screens.
To help illustrate the user flow and navigation within the product, I visualized design solutions before they are fully developed.
+48 screens
Accessibility.
Being mindful about accessibility...
To allow accessibility upon all users, I followed WCAG standards for recommended text sizes, spacing, and contrast ratios using the help of Figma’s accessibility tools.
Takeaways.
If I had more time...
I would invest more time in comprehensive usability testing & A/B testing to fine-tune the app and validate design decisions. It would really add a sense of ownership and improved satisfaction for my app.
What I learned...
I learned the importance of thoroughly understanding users' needs and pain points, going beyond, by looking and listening through an empathetic lens to achieve user-centric design.
© 2023 Crafted with love by Emily Gayoun Lee