Urban Outfitters In-Store Pickup and Collection Points
In 2019, the in-store program at URBN was improved to also allow access to Collection Points (non-store locations) in the EU and the US. With this new initiative, the browse path was updated with new UI features, that would allow the user to understand the new feature.
As a URBN project, we worked alongside the Anthropologie and Free People’s design teams, as well as URBN’s team of UX designers and developers, to establish a simple user experience from the point of purchase to the point of pickup.
My role involved modifying wireframes and creating high fidelity screens based on UO's branding, as well as organizing assets and preparing them for production in both web and app platforms. The project also included creating new assets and defining icons for future uses of this feature.
In-Store Pickup and Collection Points was released in September of 2019.
Role: Wireframes, visual design, icon design, layout design, production, VQA, redline development
Art Direction - Andrew McQuiston
iOS App Lead - Courtney Reges
Web Lead - Chelsea Guerrera
Creative Direction - James Mackenzie
Executive Creative Direction - Matt Owen
In collaboration with URBN's UX design teams, App Teams, Anthropologie's and Free People's UI teams and URBN's development team.
Product Display Page (PDP)
Store Availability Accordion
The biggest change to the PDP was the addition of an accordion to the product information. This feature is merely informational as any decision from the customer is triggered in checkout.
The purpose of the accordion is to let the customer know what options are available for the item currently being viewed. The information is displayed in numerous messages where color varies according to availability.
Grey: no information available
Green: item is available for pickup immediately or within a short time range
Blue: item quantities are limited or item is unavailable
The modals in PDP offer information about Collection Points and In-Store Pickup. The first modal educates the customer about what the feature is and what the steps are to make a purchase through it.
In case a product isn't available, a modal will display the reason why the item can't be bought through in-store pick up.
The store availability modal lets the user set a store as a default address for future purposes or shipping information. However, the option to choose the store to pick up an item is done at checkout and this works as an overview of product availability.
In the iOS app, the store location modal also offers a page dedicated to the store view, where you can get directions to the stores, call and even see what the stores featured products are.
The UO logo is also included next to the stores to have a visual difference to collection points.
The checkout process is where the user makes the decision of whether the items in their cart are going to be shipped or picked up.
The checkout process was one of the most complex parts of the design, since we had to account for all possible scenarios that would happen when combining in-store pickup, collection points, shipping and flat rate shipping. All while making it as easier and understandable to the user as possible.
Some examples of these scenarios include:
1. All items are available for pickup in store or at a collection point
2. Some items are available for standard shipping, while some items are only available through flat-rate shipping
3. Some items are available for pickup in store or at a collection point, while some items are only available through flat-rate shipping
4. No items are available for pickup in store or at a collection point
Another feature included in the checkout process, is the ability to send wish list items to the recipient, while at the same time being able to pick up items from your own order.