Logo of dubsado

Mobile app - invoice builder

Project Overview
Responding to users' longstanding requests for a mobile solution to manage projects from anywhere, we introduced our mobile app last summer. It includes foundational features such as a project list and project profiles.

Given the strong user interest in an invoice feature, it's become a top priority for our next update. I have taken the lead in designing the invoice builder for our mobile app from 0 -> 1.
My role
Lead Designer - Research, Interaction design, Visual design, Prototyping
    Team
    1 product designer
    1 product manager
    2 engineers
    Timeline
    2 months

      Context

      Prioritizing user demand: introducing invoicing in our next app update

      Last summer, we rolled out our mobile app, initially featuring only a project list and basic information. To identify the most desired features for our next update, we conducted a user survey.

      The results showed that 36.7% of users prioritized the invoicing feature above all others. Eager to meet this significant demand, we are now prioritizing the swift development and release of the invoicing functionality, enabling users to manage their invoices on the go.

      Goals

      Focus on the ease of use on mobile app, and attract more users to download

      User goals

      Make the complex features on the web easy to interact and use.

      Business goals

      Attract more user download the mobile app.

      Research

      Considering the complexity of the invoice builder, how might we refine our focus for the mobile app MVP?

      In the survey, we found for invoices, users generally want to viewing and sending invoice the most when on the go. Based on the survey, the product manager and I discussed what features we want to include in the MVP.

      Survey result

      Stakeholder workshop: aligning on feature prioritization

      I led a workshop with the 2 PM(mobile app PM, invoice PM), 2 Customer care lead to determine what functionality will be included in the mobile app

      Design challenge 1 - navigation

      How might we make the navigation quick and straightforward with the extensive content in one invoice

      Although the option 3 is the most ideal solution from a design's perspective. I heard feedback from engineers: "Render too much info in one page might increase loading time, and impact performance"
      Considering the efficiency, we landed on option 2 to ensure a better overall experience.

      Design challenge 1 - navigation

      The header area in the tab navigation currently occupies excessive vertical space, which detracts from the main content's visibility.

      I persuaded the engineers that the dynamic header can be used in many other pages, like all types of forms. And they are willing to try it here.

      Design challenge 2 - New component adapted for mobile

      Item card: modern and minimalist design

      Design challenge 2 - New component adapted for mobile

      Payment plan: regroup info to prioritize key information

      Final design

      Quickly create new invoices

      Ensure users are always updated on their invoices' status, allowing for immediate actions where necessary.

      Tab navigation

      In lieu of traditional scroll navigation, I designed tab navigation for the mobile. Given the potential length of this page on mobile devices, tab navigation facilitates quick access to desired sections.

      Dynamic header

      Optimized space for crucial content by introducing a dynamic header that smartly adapts as users scroll. On scrolling up, the header shrinks to display solely the invoice number, thereby expanding the viewable area for key information.

      Edit items

      Users can add, edit, or delete items in invoices and share them with clients while on the move.

      Payment plan & reminder

      Users can stay informed about the status of each installment and make any adjustments.

      ycui0801@gmail.com

      Contact

      LinkedInResume

      Know more

      Github