bOnline
Web, App and CRM design


The bOnline ecosystem is a critical interface where clients interact with the product, their apps and dashboard and manage their services. The primary objective of the redesign and persistent updating was to improve user experience, reduce churn, and streamline the self sign-up process by optimizing the branding and navigation to create a consistent feel.
In addition to this, the project aimed to enhance overall usability and accessibility, ensuring that users of varying technical skills can efficiently navigate and utilize the dashboard features.
CLIENT
bOnline
ROLE
Senior UX/UI Designer
LOCATION
Cape Town, South Africa
The Challenge
The dashboard needed to address the diverse needs of bOnline's client base, which includes small business owners with varying levels of technical proficiency. The challenge was to balance simplicity and functionality, making sure that essential features were easily accessible while also offering advanced options for power users.
Key issues included:
Improving the self sign-up processes for various products to reduce churn.
Ensuring intuitive navigation and task flows.
Integrating a mobile-first design approach - which was not the norm at first.
Integrating 3 experiences into a working ecosystem.
Solution
The solution was developed through a thorough and iterative design process, beginning with extensive research to understand user needs and pain points. This included user interviews, surveys, and analysis of existing usage data to identify critical areas for improvement.

Approach
Our team conducted extensive research and discovery to gain insights into user needs and pain points. This included user interviews, surveys, and competitor analysis to benchmark against industry standards. We then utilized wireframing and prototyping techniques to visualize the structure and interactions, and feedback through usability testing sessions to refine our designs. Throughout the design development process, we emphasized design thinking user-centered design principles, while addressing technical constraints and aligning with business goals. Finally, we conducted iterative cycles of testing and refinement to ensure the final design was visually appealing and aligned with our brand identity.

Additionally
From the outset, processes that did not exist needed to be put in place - Design Systems, Standard Operating Procedures and Design Processes had to be developed in order for this new team to integrate. New Designers had to be onboarded and trained, existing teams needed training on handover documentation - and the Design System needed to be established and maintained. All the while, regular daily operations had to be resumed.


Statistics of bOnline impact:
-
62 Research documents
-
104 Tickets completed
-
12 User-facing team interviews
-
183 hours of Hotjar videos watched
-
14 Persona's fully developed
-
12 Team events coordinated
-
5 Courses completed
-
1 Brand overhaul
-
5 Full Design audits
-
3 Figma Basics Courses hosted
-
2 New Designers onboarded
-
4 New team members onboarded
-
4 Silos destroyed
-
8 Amazing friendships formed


Result
The redesign of the bOnline ecosystem successfully improved the user experience by simplifying the self sign-up and Buy Now processes and enhancing the overall usability.
Key outcomes included:
-
A more intuitive and user-friendly dashboard interface and signup.
-
Improved navigation and task flows for apps.
-
Increased user satisfaction, lowered support calls and reduced churn through best practices.
-
A mobile-first, zero-touch design that ensures accessibility across devices.
-
Integration between marketing website, customer portal and apps.
​
This project highlighted the importance of user-centered design and collaboration across development, business, frontend and design teams to deliver a product that meets both user needs and business objectives.



