Voucher List for Groupon Merchant Android App
mobile design, tablet design, wireframing, interface layout, user experience
About half of our live merchants are not engaged with merchant tools, and another 20% use merchant center or merchant mobile infrequently. One of the major reasons why merchants do not engage more with our tools is that our tools lack features that merchants want. An easy way to look at the vouchers that belong to a merchant was one such missing feature in the merchant mobile app. The purpose of this work was to provide the voucher list to merchants in merchant mobile, without having to go through the hassle of downloading an excel document. Today in Merchant Center, merchants have to download an excel file to get the list of vouchers they have sold. This does not give a good experience to the merchants who want to see the voucher list.
Through meetings with product leaders and user research we decided to break filtering down into three main sections: by voucher status (sold, redeemed, redeemed and refunded), time range and campaign. The solution I designed utilizes an advanced filter function to allow merchants to drill down a large voucher list to one that only shows the vouchers they need.
A Look at My Notebook
The initial sketches I made took into account a product ask for quick or simple filters along with a way to filter more thoroughly. Some of the designs show quick or simple filters with easy access to presorted filters we thought merchants would use. We ultimately decided to ship the mobile version with only advanced filtering however because we did not know what merchants would find useful. At the time we were only guessing what merchants would want for quick filters and didn't have the resources to user test a large enough sample size to get definitive answers. We launched this version with tracking so we could see how merchants were filtering with the idea to add in quick filters in the future once we knew which ones would be most helpful and used by merchants.
Below are the sketches I made when starting out this project. I shared these in planning meetings with product leaders and engineers so we had tangible ideas and flows to discuss before we got too deep into design and development. Many of the issues and key product elements were worked out through these sketches.
Initial Mockups
I experimented with exposed quick filters and using an advanced filter icon that would slide over to expose the full filter list. The mocks below also show various stepped filter explorations.
V2 Filter Flow
This flow shows the user entering the app dashboard and then navigating to a campaign card. The voucher list entry brings them to an unfiltered voucher list of all the vouchers for that campaign. The user can then filter by voucher status and time range to a smaller, more digestible list of vouchers. If the user wants to take any action on a voucher they can tap on one of the list items and will be brought into a voucher detail page. From here they can see all the details pertaining to that voucher, update bill and tip totals and redeem.
Advanced Filter Feature Prototype for Mobile
I built this prototype to explain how the advanced filter should look and act. It was especially important to show my idea for how to treat custom campaign selection. There was a big discussion about whether the radio button should take the user to a new page to display the campaign list or not. Also, if the custom campaign option should be differentiated and not a radio button at all. I felt that exposing the list of campaigns directly beneath the campaign breakdown selection was most efficient and took out an unnecessary extra step.
Added Search Capability
The ability to search by a specific voucher code is very important to merchants. This search capability allows them to quickly access information or take action on a particular voucher. The user taps on the search icon, if they have past searches those show up below in the content area. Once the user starts to type in a voucher code we are able to auto complete so the merchant doesn't have to type out a long voucher code. The search brings them directly to the voucher detail page.
Filter and Search Flow
Advanced Filter Feature for Tablet
The filter feature slides in from the right and gets layered on top of the voucher list. The user can easily "x" out on the top right or quickly filter down to a voucher list that is customized to their need.
