B.Layer
Revamping an in-app message builder for effortless, code-free customization
Overview
B.Layer, crafted by Phiture, is a dynamic in-app message builder designed to empower mobile apps' CRM teams to craft custom-designed in-app messages effortlessly, without needing coding skills. It integrates seamlessly with Braze, facilitating the export of messages as zip files or inline HTML, which minimizes reliance on additional developer resources and reduces time and budget constraints.
Challenge
B.Layer's original interface and user experience was outdated and difficult to use, lacking intuitive flow. Separating template creation from message editing made the user journey cumbersome. Adding multiscreen and multislider in-app messages worsened navigation inefficiencies, as these templates couldn't be edited directly in the editor.
❌ Previous Editor
My Role
As the lead product designer, I was tasked with a comprehensive overhaul of the user experience, which included managing a design team and collaborating with developers and product managers. My responsibilities expanded to remapping the user journey to simplify and enhance the user interaction, particularly with the introduction of multiscreen and multislider functionalities. Additionally, I led the rebranding efforts to create a distinctive sub-brand for the UI and templates that aligned well with the Phiture brand while maintaining its unique identity.
✅ Updated Editor
Solution Approach
Our solution comprised a strategic overhaul of the user journey along with several enhancements aimed at addressing the challenges:
Integrated and Refined User Journey: We redesigned the workflow to unify template creation with message editing, enabling users to adjust formatting directly within the message editor. This integration was critical, especially for the new multiscreen and multislider messages, allowing for a smoother creation process across different message types.
Design System Overhaul and Sub-Brand Creation: A new comprehensive design system was implemented, which included updated visual elements tailored to enhance both aesthetics and functionality. The rebranding focused on establishing a unique visual identity that would make B.Layer stand out yet remain cohesive with the Phiture brand.
Enhanced User-Centric Features: The addition of multiscreen and multislider messages was a response to user needs for more dynamic and engaging content capabilities. We ensured that these new features were integrated into the user journey without adding unnecessary complexity.
Collaborative Development Process: We fostered a closer collaboration between the design and development teams to ensure seamless integration of the new UI components and functionalities.
Continuous Testing and User Feedback: Ongoing testing and the incorporation of user feedback were crucial in refining the solutions, ensuring that the redesigned user journey and new features met user expectations effectively.
Multi-slider Editor
Outcome & Results
The overhaul of B.Layer significantly improved user satisfaction and efficiency. The newly integrated user journey allowed CRM teams to create more engaging, visually appealing multiscreen and multislider in-app messages with ease. The transformation addressed the initial usability issues effectively, establishing B.Layer as a robust, user-centric in-app message builder that can meet the evolving needs of modern mobile applications. The rebranding not only enhanced the product's identity but also reinforced its position in the market as a cutting-edge solution for mobile CRM, earning it a spot as a 2022 App Growth Awards finalist for innovation.
Checkout
