Duration
OCT. 2024
Bloom Rebranding Project
Role & Responsibilities
UX | UI Designer
Build a design system
Product UI Consistency
Design Quality Control
Usability Testing
Bloom Rebranding:
Enhancing User Experience with Design and AI
The Bloom Rebranding project aimed to transform the financial app by improving its usability, introducing new features, and creating a more visually engaging experience for users. By focusing on visual clarity, seamless task flows, usability enhancements, and incorporating generative AI, we reshaped the app into a smarter, more intuitive tool that empowers users to manage their finances effortlessly.
Design system
Our brand identity is defined as a trustworthy financial assistant, emphasizing reliability and confidence. To align with this vision, our design and marketing teams work closely to ensure cohesion in all aspects of our brand identity.
We’ve created a unified design framework that combines functionality with aesthetics, ensuring a seamless and engaging user experience.
Colour system
We’ve chosen a monotone palette for both dark mode and light mode, creating a serious yet smart tech vibe. Additionally, we’ve introduced multiple colour palettes to enhance visual clarity and add an active, engaging personality. This balanced approach ensures both professionalism and visual attraction in our design.
Dark Mode and Light Mode Integration
Our colour system is built to seamlessly switch between dark mode and light mode using the same colour IDs across both themes. This approach ensures consistent branding, reduces complexity during implementation, and enables an effortless toggle between modes for users. From design to development, this integration simplifies workflows while delivering a polished and consistent experience across all platforms. This structure keeps each section focused while maintaining a logical flow.
Header
A seamless navigation experience starts with a well-structured header. As part of the rebranding effort, I designed a versatile header system that adapts to various use cases, ensuring consistency and clarity across the app.
Components: Button
Buttons are a core component of the Bloom Finance App, designed to drive user actions with clarity and purpose. They provide intuitive pathways for navigation and interaction, ensuring users can complete tasks seamlessly. Every button is thoughtfully crafted to align with the app's design principles, combining functionality with an elegant aesthetic.
Two Types of Buttons
In the Bloom Design System, buttons are categorized into two distinct styles based on their functionality:
Square Buttons: These are used for primary actions and critical tasks, such as navigating app flows or completing essential actions. They guide users through focused, one-task-at-a-time scenarios, ensuring clarity and consistency.
Round Buttons: Reserved for secondary actions, subtasks, or utility features. Their softer, approachable shape provides a visual distinction, signaling less critical or supplementary interactions.
Icon Buttons
Icon buttons are a compact and versatile component of the Bloom Design System, designed to provide quick access to utilities and supplementary actions. By focusing on minimalism and clarity, icon buttons enhance usability without overwhelming the interface.
Use Cases: Utilities
Icon buttons are ideal for utility functions where space-saving and efficiency are key. Common use cases include:
Accessing settings or preferences
Performing quick actions like search, delete, or refresh
Navigating to secondary features or tools
Welcome to Bloom, the ultimate financial assistant and budgeting app that revolutionizes the way you manage your finances! Unleash the power of streamlined financial management with Bloom - the app that allows you to keep track of your accounts, build your credit history by reporting your rent payments, access powerful budgeting tools, and manage your expenses all in one place.