people on mobile

context

Divvy offers a financial management platform that combines corporate credit cards with software to help businesses manage and track expenses in real time. It provides enhanced control over budgets and integrates with accounting systems for streamlined financial operations.

team

Product Manager
Product Designer (me)
Dev Lead
Backend Developers (2)
Front-End Developers (2)
Mobile Developer (1)

Methods

Customer support chat analysis, site mapping, user journey mapping, wireframing, user testing, and prototyping

Empathize

Imagine Sarah, a project manager at a bustling marketing firm. She’s often in back-to-back meetings or traveling. When a new hire joins her team unexpectedly, Sarah needs to assign a corporate card quickly. Previously, this meant either waiting to access our desktop app or having the new hire use their own card—a cumbersome process fraught with delays and paperwork.

This gap became our focus. Users like Sarah were clear: they needed to manage team members and assign resources without skipping a beat or a meeting. As a Product Designer, alongside our Product Manager, Dev Lead, and a dedicated Mobile Developer, I was tasked to turn this necessity into a seamless feature on our mobile app.

define

I began the process by creating a site map of the web application and identifying relevant key features. This was crucial to identifying essential user tasks that needed support on mobile platforms, especially the ability to quickly add new personnel. My analysis revealed significant gaps in the mobile app's capabilities, including the absence of a people list, person details page, edit person functionality, and an intuitive “add person” flow.

To address these deficiencies, I created wireframes for these essential components and collaborated with my team to outline the development phases. We prioritized the implementation of a people list and a simple add person flow to meet the most urgent user needs rapidly. This strategic focus not only enhanced mobile functionality quickly but also set the stage for more complex feature integrations in future updates.

While our immediate goal was to resolve the specific user issue of adding personnel on the go, we also pursued a broader organizational objective to achieve parity between the web and mobile experiences. To this end, I designed and planned the development phases with an initial focus on urgent needs while aligning with the larger goal of comprehensive feature integration across platforms.

ideate & test

I designed a complete user experience upfront, creating a detailed sitemap and wireframes for all features. This comprehensive approach ensured coherence across the phased development. During the ideation phase, I explored various design options, refining and adapting our approach based on iterative feedback. These wireframes were then shared with customers and stakeholders, allowing us to rapidly integrate their insights and further tailor the user experience.

This collaborative process enabled us to quickly advance to high-fidelity prototypes, which were thoroughly tested with users to validate and fine-tune the functionality and usability. By continuously iterating and exploring different solutions, we ensured that the final product was not only user-centric but also optimized for efficiency.

High fidelity

Leveraging my deep understanding of Divvy’s design system, I carefully selected appropriate patterns and components for the essential mobile screens. A significant part of this development involved determining which elements from the web application were crucial for the mobile interface, given the limited screen space.

Phase 1: We introduced a people list and a basic person detail page. The people list featured critical information such as the individual's name and status, indicating roles like admin or bookkeeper. The person details page initially displayed just the name, role, and address, with more complex data like budgets and cards accessible elsewhere in the app to maintain a clean and simple interface.

Phase 2: We added a lightweight 'Add Person' page, addressing the primary user need identified in our initial analysis.

Phase 3: We expanded the person details page to align more closely with the web experience, enhancing feature parity between platforms.

Phase 4: We designed a more comprehensive 'Add User' flow. This included features to assign users to the appropriate budgets, provision virtual cards immediately, and initiate the issuance of physical cards as needed, streamlining the entire process for a seamless user experience.

Each prototype underwent iterative testing to refine usability and functionality, ensuring user-friendliness and meeting core needs effectively. Throughout these phases, we consistently improved our designs based on user feedback and testing, aligning well with user expectations and behaviors.

Outcome

The first phase of the project was successfully implemented by the engineering team, launched without any major bugs, and laid a solid foundation for subsequent development. This initial success proved the efficacy of our design and development approach, and it positioned us well to advance to the next stages.

Due to constraints in engineering resources, we had to adjust our project timeline, prioritizing the start of work on Phase 3 before returning to complete Phase 2 when resources allowed. This flexibility in project management ensured that momentum was maintained despite resource challenges.

During the implementation of these phases, I transitioned to a new role within the organization, which limited my direct involvement in the final stages of the project. However, I received feedback post-implementation indicating that the new features were very well-received by users. Notably, there was a significant decrease in customer support queries related to the issues we aimed to resolve. Furthermore, the enhancements contributed to a slight increase in user spending and a decrease in reimbursements, underscoring the positive impact of the project on both customer satisfaction and operational efficiency.

This project wasn't just about adding features; it was about empowering users like Sarah to manage their teams effectively, regardless of where their work took them. By listening and responding to our users, we transformed a functional gap into a robust feature that propelled our mobile platform forward, making financial management truly mobile and user-centric.