all case studies
Orange, a leader in developing curriculum for children and youth ministries nationwide, envisioned a transformative update for their legacy mobile app, Lead Small. Seeking to streamline the delivery of small group curriculum directly to leaders, Orange turned to Black Airplane. Our collaboration aimed to simplify and rejuvenate Lead Small, leveraging our expertise to make it a more efficient, user-friendly tool for ministry leaders.
Facing a tight deadline before Orange's annual conference, we had to work swiftly to revamp Lead Small without disrupting its current users. Our goal was a smooth transition for a large, active community, balancing quick development with careful planning.
Vision
- Design a simple, reliable, and intuitive mobile app with a familiar but clarified user experience.
- Lay a stable foundation for future expansion of the app to serve new user types and deliver other content.
- Allow for more cost-effective enhancements to be made in the future by building in a cross-platform framework.
- Complete the design, development, testing, and launch phases within a tight 4-month deadline, aligning with the 2024 Orange conference timeline.
Victory
- Seamless app launch on a platform with hundreds of thousands of existing users.
- Delivered a minimalist, easy-to-use mobile app design along with a robust design system to speed future design of additional features.
- Built in Flutter, allowing for 99% of codebase to be shared between Android and iOS.
- Successfully launched the Lead Small mobile app MVP on time and within budget.
- Helped the Orange team ideate additional features for future versions of the Lead Small app.
Vision
Mission Brief
In 2018, the Lead Small app was launched as a vital resource for church volunteers, aligning with Orange's goals to support youth ministries. After six years, technology and user needs have evolved, prompting a significant update. Partnering again with Black Airplane, Orange set out to revamp the app—streamlining its functionality, enhancing user experience, and preparing it for future content avenues, all within the pressing timeline of their 2024 national conference.
Our redesign focused on maintaining the app's core purpose for existing users while simplifying its interface and expanding its potential to adapt to changing trends in church attendance. By rebuilding the app with Flutter, we not only improved its maintenance efficiency but also positioned Orange for sustained growth and innovation.
Challenges
Three primary hurdles defined our journey with the Lead Small App:
- Functionality Overhaul: Integrating new features without disrupting service for a vast user base was critical. Our goal was to enhance the app's functionality while ensuring compatibility with existing backend systems.
- Tight Timeline: The project's success hinged on our ability to prioritize effectively under a tight deadline, distinguishing between essential updates and future enhancements, all while keeping stakeholders aligned.
- Outdated API Documentation: The existing Lead Small App backend had API documentation that hadn’t kept up with 6 years worth of product enhancements.
These challenges demanded precision, clear focus, and unwavering collaboration to navigate successfully.
Why Black Airplane
Black Airplane's long standing relationship and track record of success with other flagship Orange products like their E-commerce storefront made us the ideal partners for this project. Black Airplane's experience using Flutter to develop cross-platform apps from a single codebase was critical in delivering the product on a tight deadline.
Flight Plan
Design
To succeed with our client during the design phase, we learned the ins and outs of the existing product and worked with Orange to understand their goals for the redesigned MVP: a polished and modernized user experience that foregrounded the curriculum content. To achieve this goal, we prioritized consistent communication, syncing weekly (often more frequently) to review designs. Continuous iteration and refinement helped us ensure stakeholder alignment.
Discovery and Wireframes
The design journey began with an immersive exploration into the visual identity of the Lead Small brand. Our aim was to craft a visual language that would resonate throughout the design process, allowing us to compress our design phase into a tight timeline.
Working from basic brand guidelines, we presented Orange with three unique interpretations of the Lead Small identity across multiple screens in the app. Orange selected a minimalist approach that was further refined over several design iterations as additional screens were built out.
To further aid in rapid deployment, our design team made use of some restyled components pulled from Google's Material design system alongside several bespoke design elements.
In shaping the design, our team actively guided the development of business rules and requirements. We provided several options for the app's structure, helping to clarify decisions and ensure all stakeholders were in agreement. This collaborative effort was key to aligning the app’s design with its functional goals, demonstrating our commitment to a unified vision and user needs.
High Fidelity Visual Designs
With the app's feature set, information architecture, and visual language established, we moved to create high-fidelity designs and a detailed design system. Our approach prioritized organization and scalability, utilizing tokenized variables for colors and spacing in Figma. This groundwork not only prepared us for future enhancements but also ensured a consistent and precise handover to the development team.
We designed each screen to adapt seamlessly across devices, with tokenized dimensions allowing easy shifts between tablet and mobile views. This adaptability ensured a fluid experience for users on any device.
To bring the app to life for Orange and its stakeholders, we developed a fully-interactive prototype. This prototype showcased the app’s flow and microanimations, offering a tangible preview of the redesigned experience and facilitating early feedback and alignment.
Development Support, Handoff, and Documentation
At Black Airplane, seamless collaboration between designers and developers is paramount, ensuring every project detail is communicated and feasible from the outset. However, recognizing the complexity of digital products like Lead Small, we enhance our design handoff with detailed annotations for each of the 100+ mockup screens. These annotations provide essential context and specify the functionality and behavior of features, ensuring comprehensive understanding and alignment.
This meticulous approach underscores our belief that excellence lies in the details. Even with engineers involved throughout the design process, our methodical documentation guarantees that no crucial aspect is overlooked. It's this dedication to capturing every nuance that enables us to deliver experiences that are not only functional but truly resonate with users.
Development
Streamlining Development
The Lead Small project faced a challenge with its API—limited and partially outdated documentation. To navigate this, we employed software tools to capture and inspect network traffic, effectively mapping the latest API version. This proactive step was crucial in aligning our development efforts with the app's actual capabilities.
Simultaneously, our Product Owner at Black Airplane meticulously prepared development tickets throughout the design phase. These tickets detailed the new app's requirements, incorporating user acceptance criteria, design references, and links to the updated API documentation. This comprehensive preparation was key to facilitating a smooth development process, ensuring that our team had all necessary information at their fingertips.
Accelerated Development with Flutter
Leveraging our expertise as a leading Flutter developer in the Southeast and our strong partnership with Flutter, we harness its capabilities to achieve rapid development without compromising on the user experience. Flutter's cross-platform nature allows us to write over 90% of the codebase once, effectively serving both iOS and Android platforms. This approach not only reduces initial development costs but also significantly cuts down on long-term enhancement and maintenance expenses, compared to using languages like Swift and Java.
With the design phase complete, our development process kicked off with two-week sprints. Daily standups kept the team aligned, ensuring smooth collaboration among all stakeholders. This framework also allowed us to adapt quickly, providing design support to address any challenges that arose during development.
Learn more about our Partnership with Flutter
Above & Beyond
Due to our diligent planning, focus, and prioritization, we successfully implemented every functionality envisioned for the MVP. This achievement enabled us to go beyond our initial scope and introduce an entirely new set of training features that were originally slated for future development.
Ensuring Privacy and Security
In redesigning the Lead Small app, protecting user privacy was crucial. We ensured sensitive group data stayed on-device, avoiding online transmission. By integrating offline features for these data types, we safeguarded user information while also providing seamless access to server-based features like curriculum and settings. This balanced approach kept user data secure without compromising the overall app experience.
Training and Video Streaming
A significant addition Orange hoped to include before the conference was a suite of features enabling Administrators to curate and stream training videos directly within the app. Leveraging our expertise in video hosting and streaming, we seamlessly integrated with Mux, a premier provider of video encoding and streaming technology. This solution offers secure storage for Orange’s uploaded videos and optimizes streaming quality for users based on their network speed. Importantly, it also grants us complete control over the user experience of the video player interface, ensuring a seamless and engaging user interaction.
Victory
Final Results
Our enduring partnership with Orange and the Lead Small team has been a cornerstone of this project's success. Their unwavering support and collaboration were instrumental in meeting our ambitious objectives within a tight timeline. As we reflect on the journey of revamping the Lead Small App, we take pride in the robust foundation we've established for its future evolution.
Launching the app in time for Orange's annual conference was a significant milestone, achieved through strategic planning and a commitment to excellence. Transitioning to Flutter not only expedited the development of new features but also allowed us to enhance the app beyond our initial scope—all while adhering to our budget and timeline.
Importantly, the transition to the new app and backend systems was seamless for users, underscoring our ability to execute significant updates without disrupting user experience. This project stands as a testament to the power of meticulous planning and flexibility, resulting in an outcome that not only meets but exceeds expectations.
