Customer ordering and support app
PROJECT TYPE
UX Design
MY ROLES
UX Research, Architecture, Wire-framing, Prototyping, and Design
Tools
-
Figma
-
Jira
-
Confluence
-
Illustrator
-
Photoshop
-
MidJourney
BACKGROUND
Performance Food Group is a family of companies that provide critical services to the food service industry in North America. With only a web experience for account management and order submissions it was determined that their expansive customer base would benefit greatly from a mobile app that would enable the ability to expedite the ordering process and open up access to account and product information from anywhere.
GOALS
-
Create an app that is fast and easy to use.
-
Simplify the ordering process.
-
Allow users to manage multiple locations.
-
Provide basic access into other features such as invoices.
RESEARCH
When I started on the project, the existing team had already gone through an exhaustive process of research and feature prioritization. Competitive research was provided and many best practices were identified. I was able to review this work and then step into the wire-framing process already underway.
USER FLOWS
To build out a comprehensive wire-frame of the product, I started by developing high-level and detailed, feature-specific user flows. This allowed the team I was embedded in to confirm navigation and functionality as well as a critical opportunity for the development team to review the proposed functionality and provide feedback.
Example of user flow diagrams showing a high level diagram of the app (top) with the highlighted section broken out into detailed interactions and processes (bottom).
Wire-framing
Despite wanting to create a very simple app for ease of use, it was decided that the wire-frames would need to be comprehensive of all flows and scenarios the user may experience. This included error states, warnings, modals, fringe use cases, offline scenarios, and more. Much effort was put into these wire-frames and they were reviewed and discussed by the CX team multiple times as further refinement took place and functionality discussions developed.
Example of wire-frames for a portion of the ordering process.
PROTOTYPING AND Testing
Prototyping was a part of both the wire-framing and design stages. Due to the level of functional detail that was included in the wire-frames we were able to build fairly complex and complete interactions for review. Our team and testers could experience what it would be like to create orders, review delivery information, receive alerts, and update account information.
These prototypes allowed our internal stakeholders to take the work out into the field and test with real users for direct feedback. This testing was invaluable as we were able to hear directly from those for whom we were designing the app and understand at a deep level how they would use it, what they wanted to do within it, and what features were off target.
Design
With refined and final wire-frames, we were able to hand them off to the development team. This enabled them to begin building the framework for the app while we moved into UI design. Performance Food Group (PFG) already had a thorough design system and brand standards that were established for web and email development. The app provided opportunities to further refine and update that system with new components. This was done alongside UI design and resulted in an updated design system that serviced all digital product needs.
As UI design progressed, we scheduled checkpoints to ensure there was adequate review and conversation happening along the way in order to keep the design tight and consistent. In doing so we also surfaced a lot of helpful conversations to help iterate certain aspects of the design and navigation for a better final product and further certainty around development capabilities.
As we finished up the UI, we made sure to provide comprehensive and detailed hand-off documentation for the development team. This included carefully crafted requirements, expectations, motion graphic examples, and styling specification.
Example of hand-off files for development including developer notes, ticket numbers, and links to Jira tickets and confluence requirement documents.
Examples of design system specifications provided to developers. Details include such things as type styles, color hex codes, dimensions, alignment, padding, and spacing.
Next Steps
With the delivery of the file for the first release of the app, we began working on features for the following release. Stepping directly into these features helped ensure visual and functional alignment and sensible evolutions from the first release. At this point the team felt very confident with the established functionality and the capabilities of the design system. They anticipated many of the new features going forward would be possible to develop without high-fidelity designs.