The Challenge
BillCloud is an innovative platform that redefines payment management for individual customers and e-commerce stores by eliminating friction in the checkout process. With the mobile app, returning customers can enjoy a one-click checkout experience by simply providing their phone number, as their payment and shipping details are securely retrieved from the system. For first-time shoppers or those without the app, a straightforward manual data entry process is available, with details saved securely for future purchases.
The goal was to design a comprehensive, intuitive solution that streamlines financial processes and delivers exceptional user experiences tailored to both target groups, ensuring speed, simplicity, and reliability at every step.
Key challenges included:
- Identifying the diverse needs of two target groups: individual customers and online stores.
- Crafting an efficient transaction management system that merges functionality with cutting-edge design.
- Ensuring scalability and adaptability for future platform growth, with exciting new features coming soon to further enhance user experiences and functionality.
The Process
1. Business Analysis and Market Research
We began the project by conducting in-depth market research to understand the expectations and pain points of the target audience.
Through stakeholder discussions and competitor analysis, we identified the following essential features:
- A simple, fast payment process for individual users, independent of the payment methods available in the store and fully compatible with the store’s shipping options, with instant action facilitated by the mobile app.
- Advanced tools for transaction management and reporting tailored for e-commerce businesses.
- An intuitive admin panel enabling easy customization.
2. Stakeholder Workshops
We hosted a series of workshops with the BillCloud team, divided into three thematic sessions.
Business and Pricing Session:
- Evaluated the current business model and identified revenue opportunities.
- Defined pricing strategies aligned with user needs and market trends.
- Assessed competitive positioning to refine BillCloud’s value proposition.
Marketing and Branding Session:
- Conducted a deep dive into customer personas to align branding with target audience expectations.
- Defined key messaging and visual elements for consistency across touchpoints.
- Outlined strategies for market penetration and user acquisition.
Technical requirements Session:
- Mapped out technical requirements and system capabilities needed for scalability.
- Identified integration points with third-party systems to enhance platform utility.
- Reviewed security protocols to ensure robust data protection and compliance.
"Working with ScreamPixel was a game-changer for our startup. Their ability to translate complex business requirements into intuitive and visually stunning designs exceeded our expectations. The result is a payment solution that our users love and that sets us apart in the market."
Jacek Chochorowski
COO at BillCloud / Sales and networking specialist
3. Typography, Branding, Logo, and Color Palette Creation
To establish a strong visual identity for BillCloud, we focused on:
Branding and Logo design
Defined the core values and personality of the brand to resonate with both individual customers and e-commerce businesses and developed a modern and memorable logo symbolizing simplicity and innovation in payment management. As main text logo font we used Chillax font from Fontshare™.
Typography
Selected the Inter font for its clarity and modernity, ensuring readability across all platforms. Inter on Google Fonts.
Color Palette
Crafted a cohesive color scheme reflecting trust, efficiency with shopping vibe.
4. Establishing the Design System
Our UX/UI team developed a flexible design system that.
Design System characteristic:
- Provides a smooth handoff to developers and clear implementation.
- Ensures visual consistency across the platform.
- Delivers responsive experiences across all devices.
- Allows for easy scalability as the product evolves.
"ScreamPixel’s design system was a revelation. Its consistency and attention to detail made implementation effortless for our development team. The platform’s scalability and seamless user experience are incredible."
Grzegorz Możdżeń
CTO at BillCloud / Backend developer, Infrastructure architect
5. Mobile App, Admin Panel, and Payment Page Design
Using the design system as a foundation, we crafted.
Mobile App for End-Customers:
- A frictionless onboarding experience.
- Summary Home Page with budget tracking.
- Transaction history list.
- Real-time transaction notifications and notification center.
- Notifications for completed transactions.
Admin Panel for E-Commerce Stores:
- Robust reporting capabilities.
- Comprehensive customer and transaction management tools.
- Customizable settings and seamless integrations with external systems.
- A dedicated API documentation page with a clear, user-friendly design to facilitate developer access and third-party integrations.
Payment Page for unregistered Customers:
- A user-friendly interface enabling quick and secure payments.
- Automatic saving of entered details for future transactions.
- Full compatibility with various payment and shipping methods offered by the store.
6. Designing and Deploying Landing Pages
We created two dedicated landing pages.
For End-Customers:
- Clear, visually engaging messaging.
- Streamlined explanation and app download process.
For E-Commerce Stores:
- Highlighted business-centric features.
- Showcasing the benefits of using BillCloud.
7. Testing and Final Delivery
Before launch, the designs got documentation and underwent rigorous testing.
What we tested?
- Usability tests with target users to ensure intuitive navigation.
- Stress tests to validate scalability and performance.
- Thorough alignment checks against the functional requirements.
About handoff:
- Comprehensive documentation provided to developers
- Ensuring seamless handoff and efficient implementation of the entire project.
- Post-handoff support for development team.