When you purchase a product of Tiny Prints or Wedding Paper Divas, there is a service where a designer will do a ‘final check’ to make sure all dates are valid, typos are corrected and to make any design changes that were not possible on the front end.

The proof page is where updated designs are previewed, as well as the place where you communicate with your designer.

The business wanted to reduce support calls from confused customers, and make it more usable on a mobile device. The proof comes to the user via email, and a majority of users open emails on a mobile phone. The page was impossible to navigate on a small screen

Users have already paid for their purchase, and can’t get their merchandise without submitting approval through this page. The long page with oddly grouped sections make it difficult to know what to do.

Limited to front-end changes to the existing infrastructure, meaning I could not deviate from the linear workflow.

Additionally, every order is guaranteed to be processed within a certain timeframe, the redesign can’t slow down order processing of the production design team.

We chose a ‘hub-and-spoke’ model for our guided experience because it worked best for the mobile use case we were designing for. It also worked within the project contraints of having only front-end changes.

The ‘hub’ will show a thumbnail of all of the items in the order, and it is also where a user starts their proofing process. The ‘spoke’ is each individual item. Once a user has chosen either ‘approve’ or ‘request changes’ on each of the panel in the item, the user is taken back to the ‘hub’ to see the confirmation of their selection and to start on the next item.