Intro
How often can we order something for in-store pickup but not have the opportunity for it because of a lack of time or urgent plans? The product team also thought about this and decided to discuss it.
Problem
Initially, we wanted to discover options for adding more than one person for the in-store pickup option and delivery as well. It is a comfortable option for users who are not totally sure about the possibility of getting an order. So we started to think about a wider implementation.
How many people should we allow to be added? Does delivery truly need more than one contact/address? Can we take less personal data from the new ‘person for pickup’ (because they didn’t let themselves gather it by themselves)? Do we need to let use this feature just logged-in users or guests also?
The process
I wanted to refer to the UX research on this topic. Baymard hasn't conducted it yet, and I failed to find any similar research. So my next step was a competitor comparison. At first, I tried to find this feature or a similar implementation (or how others solve this problem) just among the competitors. But it wasn’t so easy because, for some reason, they didn’t have such or similar features. That is why I looked at other online stores. The main criteria was to find a general UX pattern for this feature. Because, obviously, this feature isn’t new in e-commerce.
Only customer will pick up the order
Competitors comparison
Bed Bath & Beyond
Bed Bath & Beyond has an additional panel for guest users at the end of the page after the product listing and contact information panels. It is represented as an optional checkbox.
From a UX perspective, I wasn’t sure about using the check box with toggle functionality (you can turn on and off additional content).
Also, is the additional in-store pickup person also a contact person or not? What kind of information will this person have about the order? On the Contact information panel, the user sees the check box "Get text alerts for your order on your mobile". The new in-store pickup person doesn't have it. Also, the new in-store pickup person has inputs for "First Name" and "Last Name". The customer doesn’t have it.
But the UI design looks clear and simple. Still, the user has small chances of losing the alternate pickup person feature.
Apple
Apple gives customers the choice of who will pick up the order: you or someone else. It looks like the customer can’t take the order because someone else's contact info is wider (name, email, phone) than the customer’s (name, email, phone). And it goes first.
Only customer will pick up the order
Only someone else will pick up the order
The user has a description of what kind of information another in-store pickup person can get (an email and a text when the order is ready for pickup) if you press a certain check box (send pickup notifications via message...).
Also, I liked the communication about the additional contacts for delivery: "Share shipping updates with someone else". But at the same time, do customers correctly understand that they can take delivery? Why is it the email, not the phone number?
The Home Depot
The Home Depot lets logged-in users add two in-store pickup person by pressing "Will someone else pick it up?". This isn’t very obvious because it doesn’t have any calls to action and seems like it will redirect you to another page with instructions. Also, there isn't any description there about having ID cards or what kind of information will be given to a new pickup person.
Kohl’s
Kohl’s mixed adding an pickup person with getting someone's text notification. However, it isn’t clear who will get this notification: the new pickup person or the customer? Because it looks like parts "Text notification" and "Add a pick up person" are separate. And why may the customer need to put their personal data, someone’s personal number for notifications, and the personal data of another person for pickup? But the description that the customer still has an opportunity to pick up the order is there.
BestBuy
BestBuy uses a pickup person panel where the user can add an alternative pickup person by pressing a button. Also, the wording of the call to action was really clear for native speakers on our team (certainly based on personal opinions, not UX research). Removing the alternative pickup person seems not so clear.
Target
Target contains all checkout data on one page and different blocks/pannels. The order pickup part is placed after the item list and delivery address. The user can add an alternate pickup person by pressing the button. But to remove an alternative person, the user needs to use a check box that isn’t pretty obvious. Also, any information about what kind of information will get an alternative pickup person, and they ask for email and name.
Some design iterations for pickup person
How it was
This e-commerce site already has the possibility to change pickup persons. It was realized through the CTA on the in-store pickup panel and Modal, with lots of inputs. So just one person could pick up the order. And also, as it could be several different stores for in-store pickup, the check box "Assign this person to pick up the entire order" may make it easier for the user.
1. Checkout, in-store pickup editing, default, ui
2. Checkout, in-store pickup, changing pickup person, ui
3. Checkout, in-store pickup editing, another pickup person, ui
4. Checkout, in-store pickup step is saved, ui
5. Checkout, shipping with one contact person, ui
6. Order confirmation, in-store pickup information, ui
Some versions
So as the user had an experience of using current interface, I and team wanted to try to modernize or rebuild it firstly. I wanted to figure out if I could make it acceptable from a UX perspective as well.
And at this point in the design, we still planned we needed to implement three people for in-store pickup.
Checkout, in-store pickup step, wireframe. The CTA was changed from “Change to purchaser” or “Change pickup person” to “Add pickup person”
Checkout, in-store pickup step, wireframe. The modal window’s title and CTA were changed
On this version, as it was previously, I left all interface decisions and flow. But I changed the CTA and added customer data (for logged-in users) in case it was outdated, so logged-in users could update it or check it, at least.
The next state was 2 or 3 pickup persons on the panel. We needed to let user to edit data and remove. There were some options. To have an “edit” button on the panel and the possibility to correct all data or remove it on the next modal.
Checkout, in-store pickup step, wireframe. Three pickup persons for one store and one pickup person for another store
Checkout, in-store pickup step. The modal window for editing all pickup persons’ contact information, wireframe
Or place Remove and Edit on the panel in front of each pickup person.
Checkout, in-store pickup step, wireframe. “Edit” and ”Remove” near each pickup person
Checkout, in-store pickup step, wireframe. Modal window with editing just one pickup person’s contact information
Conclusions:
At the same time, from a development perspective, we didn’t have the opportunity to edit customers' data there. So in both designs, it looks weird that the user can’t apply the same action to all similar subjects.
Also, I wasn’t sure about using modals for the form. Yes, it saved space. But still, it felt insecure and isolated from the user’s perspective.
Also, this panel with additional actions and information looked very compact, but I'm not sure about its comfort. Lots of them in a small space. And we still had concerns that users might lose this functionality.
After discussing with the team all our concerns, we decided not to pursue this idea by just updating the existing design.
Another possible option was to place pickup person under all information about each store. There were two options: to edit all pickup persons or to edit one by one. Also, I was in the UI design form searching. For me, the challenge was determining the correct visual information hierarchy. Because initially there were several rounds of it, I needed to add the new one on par with the store information and items.
Checkout, in-store pickup step, wireframe. Pickup person functionality moved under store information and purchases details. One alternate pickup person was already added on the first screen and the process of editing on the second screen
Also, I and the team thought about how many pickup people the user would theoretically want to add. How often do users really use the existing functionality? How often do users choose purchases for pickup in the different stores? So we thought about the form of the new functionality because it seemed very "heavy" and complicated for the cart page compared to competitors' functionality. I don’t want to say that other e-commerce was the best practice for our case. I thought about making our design easier, at least for the MVP, and with the next iteration, we can use user feedback, analytics data, etc. to improve this design.
From the analytics data we had gotten, we knew that users more then 95% of users making an order for pick-up from one store. And we made the assumption that we didn’t need to place a pickup person near each store; maybe it would be enough to have it for all stores.
So there are some next forms of design.
Checkout, in-store pickup step, wireframe. Pickup person functionality moved under all stores information and user can assign person to pickup all order. One alternate pickup person was already added on the first screen and the process of editing on the second screen
Also, we considered the option where the user would first check the store and purchases and then check the pickup person for each store.
Checkout, in-store pickup step, wireframe. Pickup person functionality moved under all stores information but the logic is old. User can pickup order by themselves or assign one alternate pickup person. On the second screen the process of assigning alternate pickup person
We left the logic but changed the functional design. This option is less universal for users who still want to pick up the order from different stores. If the user forgets which items they want to pick up from which store, they need to scroll up and check. Also, we force the user to make a choice because of the design of the radio button. Even if the user wants to pick up the order by themselves, they need to stop at this stage and think about it.
The final designs
For the first iteration, we decided to implement the option where a pickup person block is divided and placed under stores and items. For this one, I’ve made a little UI redesign. Also, we added a description of who can pick up the purchases and the possibility to remove and edit an alternate pickup person. We decided to let users add just one alternate person and see how it would work for them.
Desktop:
1. Checkout, pickup details, default, ui. Pickup order details located under in-store pickup information. Primary pickup person are already assined
2. Checkout, pickup details, alternate pickup person adding, ui. User wanted to add an alternate pickup person, the form is opened
3. Checkout, pickup details, alternate pickup person is added, ui. Buttons “Edit” and “Remove” appeared near the alternate pickup person
4. Checkout, shipping address, ui. Pickup details is saved and user moved to the next step
5. Confirmation page, ui. User fill all needed information and made a payment. The design of items ordered and pickup details changed. All pickup and shipping details located on the right side of the page
1. Checkout, pickup details, default, ui. Pickup order details located under in-store pickup information. Primary pickup person are already assined
2. Checkout, pickup details, alternate pickup person adding, ui. User wanted to add an alternate pickup person, the form is opened
3. Checkout, pickup details, alternate pickup person is added, ui. Buttons “Edit” and “Remove” appeared near the alternate pickup person
4. Checkout, shipping address, ui. Pickup details is saved and user moved to the next step
5. Confirmation page, ui. User fill all needed information and made a payment. The design of items ordered and pickup details changed. All pickup and shipping details located on the right side of the page
Also, as a possible design, we left this option for several contacts for shipping. But I decided to leave this one as a concept for now.
Checkout, shipping address expanded, ui. Concept of several persons for shipping
