MEC. Set Preferred Store
“Set preferred store” project was a part of a bigger MEC companywide initiative to increase the number and share of online orders with in-store pickup delivery method. Enabling customers to easily set up their preferred store while browsing on our website were supposed to lay down a foundation for further same-day in-store pickup promo as early within a purchase funnel as possible.
My Role
I’ve started as UX strategist at MEC in fall 2018 and joined “back of the funnel” product team to work closely with the product owner, senior backend engineer, frontend engineer, UI designer, data analyst, and QA analyst. The team was recently formed and aimed to focus on checkout, fulfillment, account management, order tracking, and post-purchase experience.
Project kickoff
When I joined the team the companywide initiative “Buy online pickup in-store” (BOPIS) for 2018 has been already defined and store operations and capacity teams were already working on increasing the number of orders that can be fulfilled in-store decreasing fulfillment time to 2 hours. Our team was asked to work on a plan to increase the amount of online in-store pickup orders during 2019 and lay down the foundation to promote a 2-hour pickup by the time stores are ready to meet this promise.
I’ve started my work on a project by reviewing member survey done in 2017 that defined BOPIS as MEC’s opportunity, conducting user interviews at the end of 2018 aimed to better understand user needs connected to company’s global initiatives, conducting competitor analysis, reviewing customer feedback (Opinion lab, live chat, and post-purchase survey) to collect main painpoints and user needs, and gathering information about technical limitation that might influence final solution. After collecting and synthesizing user data I worked on a list of user needs and job stories for the projects and together with the team defining project scope and roadmap. As a result, we decided to start our work with “Set preferred store” project first as a foundation for BOPIS project.
What do we know about MEC customers
40% of MEC members live within 20 minutes of a store
33% of MEC members what to be able to know what products are available in “their store” (from Member survey Oct/Nov 2017)
74% of MEC members what to see/feel a product before buying (from Member survey Oct/Nov 2017)
Identified user needs and job stories
I’ve gathered and synthesized relevant data from user interviews (end of 2018), Opinion Lab (feedback collection tool on our website), Lice Chat (chat tool with service centre representative), and post-purchase survey. As a result, I’ve identified a list of user needs relevant to having a preferred store location on mec.ca. To move forward I’ve outline 4 main job stories for the project:
Situation
When users choose to pick up or buy a product in-store
Motivation
They want to know the most convenient store location for them
Outcome
So they can efficiently plan a trip to a store.
Situation
When users are discovering and shortlisting products
Motivation
They want to see information about inventory and pick up time that is relevant for their preferred store location
Outcome
So they can efficiently make purchase decisions.
Situation
When users have a preferred store set up in their profile
Motivation
They want store location to be saved and persist throughout their journey on a website as well as when they return on a website next time
Outcome
So they don't have to choose store location next time and they are able to see relevant stock and pickup time information during their next visit.
Situation
When the user’s preferred store is not the store that is closest to their location
Motivation
They want to be able to easily change their preferred store settings
Outcome
So they can see relevant inventory and pickup time information.
Competitor analysis
After conducting competitor analysis of top retail websites like Bestbuy, Home Depot, Canadian Tire, Nordstrom, Walmart, Kmart, etc we identified list of common features and industry standard experiences related to setting a preferred store.
Use IP location as soon as user landed on website to set the closest store
Use geo-location for more accurate user location
Closest store information in a navigation
Visible store hours and store information easily accessible
Store selection carried over to the browse and discovery experience, as well as to a checkout
Map on PDP for store selection with available inventory for the closest stores
Filtering by store availability on PLP
Project limitations & scope
Limitations
After presenting our initiative to an information security department we identified some limitations related to our initiative. The current privacy policy and the wording of geo-location that we had in it were sufficient enough to implement a geo-location feature on mec.ca. However using an IP address location for the entire site was not covered by our privacy policy and would require privacy policy updates. The ask was to implement and validate minimum experience first that would not include IP location. Meanwhile, information security department will work on updating the privacy policy to include IP location usage for future experience enhancements.
Goals & scope
Based on the information I’ve gathered so far I decided to recap preferred store main project goals, map out critical touchpoints within a purchase funnel and sum up project scope and logic.
Flowchart and logic
Taking into consideration every critical step within a purchase flow where the user will need to have a store set in order to get more accurate information about product availability, stock level, pickup time and price I’ve started to work on a preferred store flowchart. As a result, I created an end-to-end flowchart with mobile and desktop logic for geo-location and "Set preferred store" functionality for the user that doesn't have a preferred store cookie. With a start I highlighted steps in a user flow where the user could set his preferred store.
Geolocation on landing and sitewide navigation change
To make it more easy for the user to get information or set his preferred store it was suggested to update sitewide navigation with new “my store” design component. Based on whether the user has preferred store cookie or not, different scenarios for geolocation pop-up were suggested.
If the user didn’t have preferred store cookie, then…
For mobile - we don’t activate geo-location modal on page landing as it’s too disruptive on mobile, instead, we activate it when the user clicks on “My store” design component. If the user ignores or blocks it we don’t activate geolocation and link “My store” design component to a store page where the user can manually set his store. If the user accepts geo-location - we set the closest store as user’s store and show preferred store in the navigation design component.
For desktop - we show geo-location popup on page landing. If the user ignores or blocks it we don’t activate geolocation and link “My store” design component to a store page where the user can manually set his store. If the user accepts geo-location - we set the closest store as user’s store and show preferred store in the navigation design component
Stores Page
If the user lands on a stores page and doesn’t have a preferred store cookie, then we list all MEC stores for him alphabetically. User can manually set his preferred store from the list and we update it everywhere on a website and add preferred store cookie. User can also choose to click “Use my location” link that triggers geo-location popup. If the user accepts geo-location then we set the closest store as his preferred store and sort stores list by proximity. If the user blocks geo-location then we don’t use it to set his preferred store. If the user already have his preferred store cookie and accepts geo-location, then we don’t overwrite his preferred store, but we sort stores list by proximity to his location.
PDP and Inventory Modal
If user lands on PDP and doesn’t have a preferred store cookie, then in order to see the relevant inventory we ask the user to choose the store where he wan’t to shop from first. If the user has preferred store cookie then he goes directly to inventory modal. The user also has an option to change his preferred store once on inventory modal and this change is applied everywhere on a website.
Cart
Cart step was not within an immediate scope but more of a future functionality consideration. Since as a part of a BOPIS (buy online pickup in store) project we wanted to move delivery method choice outside of checkout to a cart, we also wanted to add possibility to set/change preferred store on that step. The logic for this step would be the following - if the user doesn’t have preferred store cookie, we’ll ask him to set pickup store if he decides to choose in-store pickup delivery method. Once the store is set we set it everywhere on a website. The user is also able to change pickup store an update preferred store from store list modal.
Checkout - Delivery Method
If the user lands in checkout on a delivery method step and doesn’t have a preferred store cookie and/or previously chosen delivery method then we default him to ship to address. If they decide to choose in-store pickup instead, set pickup location and completes the transaction then we set his pickup store location and his preferred store for future visits.
Wireframing, prototyping, and user testing
After the preferred store logic and scope was defined I worked on mobile wireframes and wireflow and prototyped the experience related to geo-location and setting the preferred store using new design components in sitewide navigation and well as new store page.
user testing
My colleague Tiff Lau (UI design at MEC) helped with prototyping, and I worked on a testing plan and recruited 8 user testing participants to gather feedback and validate our new preferred store experience. The user testing consists of 4 scenarios and approximately 20 questions that aimed to answer the following questions:
Does the user understand the concept of “My store”?
Does the user understand that he was geo-located and what’s his perception of geo-location feature?
Is it easy to set the preferred store?
Is it easy to change the preferred store on different steps of the funnel?
Each user testing session lasted around 20-30 minutes, we used Lookback app to record participants screen interaction, made audio recording to save their comments and answers and also made video recording of their facial expressions while they were interacting with our prototype. I was facilitating the user testing sessions and my colleague Tiff Lau was observing and making notes.
User testing results
After user testing sessions we collected all the user testing notes, went through the recordings one more time to add anything we’ve missed during the sessions, synthesized all the data and refined our wireframes based on the feedback and findings. Main changes included:
Geo-location modal on page load that overlays the whole screen and can’t be closed or ignored could be a huge disruption for mobile experience. As a solution we decided to activate geo-location modal on mobile when the user clicks new “set my store” link in navigation.
Also, once user ignores or blocks geo-location there was no second chance for him to activate it on our website. We decided to add “use my location” link on the stores page that will activate geo-location, or if it was blocked, add tooltip with instructions how to do it in your browser.
With only 22 physicals stores, stores search field might be unnecessary as it’s quite easy for users to identify preferred/closest store from the list. We decided to remove search functionality and save extra space for the list itself.
Based on user’s feedback we also made adjustments to the information we show in a fly-out, store hours in particular. The logic for store hours were changed to the following: before store opens we show “open today at X am”, during store work hours we show “open till X pm”, after store work hours we show “open tomorrow at X am”.
End-to-end experience
As a final step I updated the end-to-end wireflow and together with a product team we went through the “User story mapping” exercise, where we outlined a minimum implementation that will allow us to add value, get needed feedback and evaluate results. That implementation excluded map integration and search.
Next I sliced updated end-to-end experience together with a Product owner (Samantha Bahrini), so that each slice can be launched in production individually. That’s what we had at the end:
Slice 01
We introduce changes to sitewide navigation adding my store design component and store details fly-out. We also update stores page layout. No geo-location yet, but user can set his store manually on store page.
Slice 02
For slice 02 we introduced new step before inventory modal to show the list of stores with select a store functionality that will set preferred store everywhere on website for user. And we also added ability to either update preferred store within inventory modal, or close it without any updates in store settings.
Slice 03
With the 3rd slice we introduced changes to checkout, to make sure that is the user without preferred store cookie decides to checkout, picks up in-store pickup delivery method and completes the transaction, we set his pickup location as his preferred store for future visits.
Slice 04
Next slice included introduction of a geo-location into a preferred store setup flow. Main difference between mobile and desktop version was that while on desktop geo-location pop-up activated on page load if the user didn’t have a preferred store cookie, on mobile we only show geo-location modal if the user clicks on set my store link in sitewide navigation.
Slice 05
We introduce changes to navigation flyout for the scenario without store cookie. Instead of redirecting users to stores page we showed them a fly-out with the list of all stores and ability to select preferred store form the list without leaving the page they were on.
Slice 06
And in the final slice introduce geo-location on stores page. We add “Use my location” button to stores page that activated geo-location one clicked and reorder list of stores by proximity to user’s location.
Final UI and implementation
After completing wireframes for an end-to-end experience I passed them to our UI designer Tiff Lau to work on mockups that were further implemented by our development team. Here you can see how the final implementation looked like. This screen recording highlights how you would set your preferred manually on a different touchpoint or by accepting a geo-location.
Results
After we released slices 1-4 to production within a month we saw some great results for new feature. Conversion rate for users who interacted with set preferred store functionality on any step of the flow was 3.74% while conversion rate for those who didn’t interact with set my store feature was 1.32%. That means that conversion rate for user’s who interacted was higher by 183% percentage than for those who didn’t. That results showed that new functionality had significant impact on conversion rate and value for users who were going through a purchase funnel. Currently work is in progress for slices 5-6 and we are also considering further improvements of set preferred store flow.
