This project was focused on optimizing the form via which a customer can reserve a clothing item in-store from a company's website. The prototype was created in Axure.
The fictional clothing company, LNDN, needs to obtain the customer's store of choice, their first and last names, and their email address.
THE FORM Filling out forms on mobile is tedious. In order to minimize dropoff, I designed a form which would suggest the customer's most convenient store based on solely their zip code. Once the store choice is confirmed, the customer inputs their first and last names and email address on a virtual "tag" for their item. A progress tracker at the base of the form indicates where the customer is in the simple, three-step process to confirmation of their reservation.
IN CONTEXT As opposed to consisting of its own page(s), this form appears as a flyout panel from the RESERVE IN STORE button. The motion of the form flying out from the button provides a sense of confirmation to the customer that they have initiated the process correctly by tapping that button. Additionally. this display of the form indicates the customer is still on the page for the specific item they are reserving. They can easily exit the process midway and resume shopping via the X button on the form, without fussing with back buttons (which might lose their color and size selections, as well) on their browser or device.
THE SCREEN The initial screen of the prototype shows the "ADD TO BAG" and "RESERVE IN STORE" buttons disabled, to indicate that the customer cannot initiate those tasks yet. Once the customer has selected a color and size, the buttons are enabled, and the customer can add the item to their bag or begin the in-store reservation process.