How might we redefine paying bills on mobile?
Bill pay had been the same for almost 10 years, and the current design wouldn’t fit in the limited mobile real-estate. Bill pay needed a complete overhaul if it was going to be added to the mobile app.
1. My role
As the creative lead and experience architect, I collaborated closely with a dedicated team of professionals, including a researcher, visual designer, content strategist, accessibility expert, and product owner. This cross-functional partnership enabled us to create innovative and impactful user experiences.
Goals
Create a mobile-friendly payment experience optimized for mobile users.
Collaborate in defining a fresh brand identity and a cohesive design system for digital platforms.
Adopt a holistic approach to the digital experience, focusing on enhancing interactivity and the overall user journey, aiming to establish a best-in-class experience as envisioned by the leadership.
2. The planning phase
In collaboration with the product owner, we established a timeline and schedule that incorporated research and testing. We also discussed the capabilities and restrictions of the vendor's system. To explain the complexity of the system, I developed user journeys for each end-to-end experience. To assess the usability and effectiveness of our designs, I created wireframes for testing sessions.
Research
During the first year of designing this experience, we conducted testing with over 700 users. The testing process gave our team invaluable insights into our users' needs, guiding us in crafting every aspect of the experience with a user-centric approach.
3. The design phase
The team began with designing the landing page, which acted as a dashboard to prioritize bills based on due dates. We detected areas for enhancement during the pilot program with employees. Some enhancements were implemented immediately, while others were marked as high-priority tasks for post-release development.
Throughout the design process, our team iteratively tested and refined 24 use cases. We used a "hub and spoke" design approach, organizing information into specific screens and steps. This design was preferred by users, and the Move Money group adopted it as their primary approach.
4. Implementation Phase
The design team worked in parallel with the development teams, iteratively delivering finalized experiences. We encountered some challenges, most notably when the initial research results necessitated a pivot in our approach for the development teams.
One of our earliest testing experiences was a case of split decisions. During our first testing session, users were divided in their preferences, prompting us to revisit the design approach. Unfortunately, the second round of testing also yielded mixed results. We needed a solution that would resonate and scale with users enabling them to make informed decisions and take action. After revisiting the design a second time, the third round of testing proved highly successful, and we decided to adopt it not only for first-time users but also for subsequent bill additions.
Company award for the execution of the bill pay redesign work.
Closing
The introduction of this experience has generated favorable responses, leading to a remarkable improvement in satisfaction levels up to 79%. Over the course of four years, the experience has contributed to the growth of the platform's user base, increasing from 5 million to 8 million users. This release played a pivotal role in enhancing the overall rating of the mobile application in industry benchmarks. We have been continuously assessing customer feedback and identifying strategic improvements to enhance the experience.
Through frequent check-ins with executives, we were able to successfully expand our initial design team from two to ten members, fostering a deeper understanding of the intricacy and scale of our project. This strategic collaboration facilitated the redesign of the desktop experience, solidifying our commitment to delivering an exceptional user interface.
You may also like:
Discover Autopay.
Dig into how we defined the pain points with autopay.
Treasury Check? Yes, we do that.
Supporting treasury checks became a need overnight.
Unicorns and Robots, Humor in banking
Adding humor and whimsy to the banking experience.