Celcoin Redesign
Brazil, Full Time
Tools & Stack used
Figma, Jira, Zeroheight, Storybook, Photoshop, Illustrator, Hotjar
Project Summary
As a UX/UI Designer at Celcoin, a Financial API startup, I collaborated with another Product Designer to completely redesign the company’s apps and web platforms. Our goal was to create a cohesive and modern user experience for Celcoin's users across South America. This project was pivotal in ensuring that the platform not only met the evolving needs of its users but also aligned with the company's vision of providing seamless financial services across the continent.
The Challenge
The Celcoin platform was in dire need of a redesign, driven by critical issues in both style and accessibility. The existing apps and web platforms were not equipped with a unified Design System, lacked Accessibility Guidelines, and had outdated styling. These deficiencies led to an inconsistent user experience that often fell short of modern design and usability standards. The absence of a cohesive design framework also meant that maintaining and scaling the platform became increasingly difficult as the product grew.
Recognizing the urgency of these issues, our first step was to undertake a comprehensive audit of the Celcoin apps and web platforms. This audit was crucial in identifying all the pain points and inconsistencies across the user interface. We meticulously reviewed each component, interaction, and visual element to understand the platform’s current state and how it was impacting user experience.
In addition to UI elements, we assessed the platform's accessibility, ensuring it met the necessary standards for all users, including those with disabilities. This involved examining color contrast, navigability, text readability, and overall user flow to identify areas where the platform was not accessible to everyone.
The audit also included gathering insights from analytics data and user feedback to identify the most pressing issues affecting users. Armed with this detailed analysis, we were able to map out the entire platform, pinpointing the exact areas that required attention.
With the audit complete, we moved on to conducting thorough research and stakeholder interviews. These interviews were essential in understanding the business goals, user needs, and technical constraints, allowing us to align our redesign strategy with Celcoin’s broader objectives. This research phase ensured that our redesign efforts would not only improve the visual and functional aspects of the platform but also align with the company's vision of delivering seamless and accessible financial services across South America.
This detailed groundwork laid the foundation for a successful redesign, setting clear goals and priorities for the next phases of the project.
Goals
The redesign of Celcoin's platforms was guided by several key objectives aimed at transforming the user experience and modernizing the design. Our primary goals were:
Design a New Components Kit: One of our main objectives was to develop a new components kit that embodied a more modern design aesthetic. This kit would serve as the foundation for a cohesive and visually appealing user interface across all of Celcoin's platforms.
Evaluate and Improve User Journeys: We conducted a thorough evaluation of all existing user journeys to determine if they aligned with best practices for user experience. Where gaps or inefficiencies were identified, we proposed new user journeys based on comprehensive research and user insights. The goal was to streamline interactions and make the platform more intuitive and user-friendly.
Redesign with Accessibility in Mind: While accessibility was a major focus throughout the project, we ensured that it was integrated into every aspect of the redesign. Although we will delve deeper into accessibility considerations later, it was essential to keep these principles at the forefront as we reimagined the platform.
Complete Platform Overhaul: Ultimately, our task was to completely redesign all of Celcoin’s apps and web platforms, using the existing version as a foundation but making significant improvements. This comprehensive overhaul aimed to elevate the user experience, ensuring that the new platform was not only visually appealing but also highly functional, accessible, and aligned with Celcoin's vision.
Development
Redesigning the Onboarding Process
The onboarding process was a crucial focus of our redesign efforts for the Celcoin platforms. The existing onboarding experience was not only complicated but also suffered from a high user drop-off rate, which indicated significant friction in the user journey. Addressing this issue was essential to improving user retention and ensuring that new users could easily start using the platform.
To identify the root causes of the problem, we conducted extensive research, analyzing the onboarding processes of other banking and financial apps. This research allowed us to benchmark Celcoin’s onboarding against industry best practices, helping us understand where the existing process fell short. We discovered that the complexity of the required steps, lack of clarity in instructions, and overwhelming information were key factors contributing to the high drop-off rates.
Armed with these insights, we set out to completely redesign the onboarding process. Our primary goal was to create a smoother, more intuitive experience that would guide users through the necessary steps without causing frustration or confusion. We restructured the process to make it more linear and straightforward, reducing the cognitive load on users and making each step as clear as possible.
(App and Web, respectively)
A significant part of this redesign involved carefully considering the legal requirements for banking data. We needed to ensure that all necessary information was collected in a way that complied with legal standards while also making the process feel secure and transparent for users. We prioritized clear communication, breaking down complex information into manageable parts, and providing guidance at each step to build user confidence.
By combining legal banking requirements with a more user-friendly design, we were able to create an onboarding process that was not only compliant but also significantly improved user engagement. This new onboarding flow was designed to instill confidence in users from the start, reducing drop-off rates and setting a positive tone for their overall experience with the Celcoin platform.
Redesigning the Homepage
The homepage of the Celcoin platform was a critical element in the redesign, as it served as the user’s first point of interaction and set the tone for their overall experience. With the launch of the new update, it was essential that this page made users feel at ease and provided them with immediate access to the tools and features they relied on most.
Our approach to redesigning the homepage focused on creating a welcoming and intuitive space where users could quickly find what they needed. We carefully curated the layout to ensure that all essential features were easily accessible, reducing the need for users to navigate through multiple screens.
Key elements of the homepage included:
Quick Access to Most Used Features: We identified the features that users interacted with most frequently and placed them prominently on the homepage. This ensured that users could access their favorite tools with minimal effort, enhancing the overall usability of the platform.
Balance Overview: Understanding that checking account balance is one of the primary reasons users visit the platform, we made the balance display a central feature of the homepage. This allowed users to quickly view their financial status at a glance.
Navigation to Additional Tools: While the homepage was designed to provide quick access to key features, we also ensured that users could easily explore other tools and options through a clear and intuitive menu. This allowed for seamless navigation, enabling users to efficiently manage all aspects of their financial activities.
The redesigned homepage was not just a landing page—it was a thoughtfully designed hub that provided users with everything they needed right from the start. By balancing functionality with user comfort, we created a homepage that made users feel at home while offering a streamlined and efficient experience.
Redesigning the Service Center
The Service Center was the most essential tool for Celcoin users, particularly for Celcoin agents and pro users who relied on it to conduct daily transactions and manage customer services. This hub allowed agents to sell services, offer credits, process bill payments, and provide gift cards to their customers, making it a cornerstone of the Celcoin platform.
Redesigning the Service Center presented a unique challenge. Given the complexity and variety of tasks that users needed to perform, it was crucial to create an interface that was both easy to use and easy to understand. The goal was to design screens that minimized the learning curve and maximized efficiency, enabling agents to perform their tasks quickly and accurately.
To achieve this, we focused on the following key aspects:
Intuitive Design: We placed a strong emphasis on creating a layout that was intuitive and user-friendly. The design was organized around clear and concise visual elements, allowing users to navigate the service center with ease.
Clear Icons and Cards: Visual clarity was a top priority. We used clear, easily recognizable icons to represent different services and actions. Additionally, we designed cards that grouped related tasks together, making it simple for agents to find and access the tools they needed.
Streamlined Workflow: The service center was designed to support a streamlined workflow, reducing the number of steps required to complete common tasks. This not only enhanced the user experience but also improved overall efficiency, enabling agents to serve their customers more effectively.
Integrating Credit Card Transactions
One of the critical features we needed to implement in the Celcoin platform was the ability to handle credit card transactions, particularly for agents who relied on external hardware like credit card readers to process payments. This capability was essential for agents selling services to their clients, allowing them to accept credit card payments seamlessly within the app.
Integrating this feature posed significant challenges. The app needed to be fully compatible with a range of external credit card readers, which required robust and flexible design solutions. Our primary concern was ensuring that the user experience remained smooth and intuitive, even when interacting with external devices.
To address these challenges, we focused on the following key elements:
Seamless Hardware Integration: We designed the app to pair effortlessly with various credit card readers, ensuring compatibility across different hardware types. This involved extensive testing and adjustments to guarantee that the connection between the app and the external devices was stable and reliable.
Comprehensive Feedback UI: Given the complexity of credit card transactions, it was crucial to provide users with clear and continuous feedback throughout the payment process. We developed a series of feedback UI elements that informed users of every step, from card insertion and transaction processing to payment confirmation. This feedback loop was designed to minimize user uncertainty and enhance their confidence in the transaction process.
Error Handling and Recovery: We also accounted for potential issues that could arise during credit card transactions, such as connection failures or declined payments. The UI was designed to handle these scenarios gracefully, offering clear instructions on how to resolve any problems and complete the transaction successfully.
Ensuring Accessibility
Accessibility was a crucial and challenging aspect of the Celcoin platform redesign. We needed to ensure that the platform was usable by all users, including those with disabilities, and that it met the diverse needs of Celcoin’s user base, particularly in remote areas of South America, such as the northern and northeastern regions of Brazil.
Our approach to accessibility involved several key elements:
Contrast Ratios and Color Accuracy: We meticulously checked all color schemes to ensure proper contrast ratios, making sure that text and interactive elements were easily distinguishable for users with visual impairments. This attention to detail helped create a visually accessible interface that could be used comfortably by a wide range of users.
Screen Reader Compatibility: We made the platform fully compatible with screen readers and other assistive technologies. This involved structuring the app in a way that allowed screen readers to navigate the content efficiently, ensuring that users with visual impairments could interact with all features and services seamlessly.
Addressing Regional Language Needs: A significant challenge was ensuring that the language used in the platform was clear and accessible, particularly in regions where education levels might be lower. Celcoin had a strong presence in more remote areas of South America, where users often needed simplified language and clear instructions to navigate the platform effectively. We paid careful attention to the terminology and phrasing used throughout the platform, avoiding jargon and complex language to make the app as user-friendly as possible.
Accommodating Diverse Disabilities: Beyond visual impairments, we also considered other disabilities, such as hearing impairments and motor disabilities, ensuring that the platform offered features like captioning and easy-to-use touch controls.
Results
The redesign of the Celcoin app and web platforms was met with widespread acclaim, particularly for its modern, user-centric design. Both the app and the web platforms were praised by users and industry experts alike, highlighting the success of our efforts to create a more accessible and intuitive experience.
One of the most significant outcomes was the dramatic reduction in user drop-off rates during the onboarding process. The new, streamlined onboarding experience proved to be far more effective, leading to a substantial increase in user retention from the very start of their journey with Celcoin.
Additionally, the redesign had a direct impact on sales. The improved user experience, combined with the seamless integration of new features, led to a notable increase in transactions. This success was further supported by the feedback we gathered from users, which showed a significant rise in user satisfaction.
Overall, the redesign not only enhanced the visual and functional aspects of the Celcoin platforms but also delivered tangible business results, reinforcing Celcoin’s position as a leading financial platform in South America.
*This is just a brief overview of the project. If you’d like to dive deeper into the details or discuss my work further, I’d be happy to schedule a chat. Feel free to reach out!