Hai Le About Home

Shopkick

Making a cohesive content-browsing experience

Year

2018

Role

UI/UX designer

Timeframe

4-5 weeks

Results

8% increase in content views, new opportunites for revenue created

What is Shopkick?

Shopkick is an app (for iOS and Android) about earning rewards while shopping. Shopkick works with large retailers like Macy’s, Best Buy, Target, and others in order to provide “kicks”, which are points that can be redeemed for gift cards. Kicks can be earned through in-store actions (like visiting a store), online shopping at partner stores, or specific in-app activity.

The users are typically price-conscious middle-aged moms, due to their prevalence as the primary shoppers of their households across the United States. We also serve our customers, which are retailers and brands like Chobani or Pampers.

Why start this project?

This project was initially started through conversations with our sales team. One of our company goals was to increase revenue, so we gathered feedback from our sales team to understand what our customers wanted.

In terms of our in-app content, our customers didn't have a way to feature their content prominently. They had expressed interest in having this option, and a willingness to pay more for it. From that, we decided this was the perfect opportunity to find a way to give the customers that flexibility, as well as make changes to improve the user experience. In order to do that, we had to take a look at the existing experience below:

The existing experience, showing the Products tab, and some examples of content.

Through metrics, past user feedback, and our own intuition, we found the following problems with the user experience:

1. Users could only see 2-3 stories at a time, making it hard to browse quickly.

2. Users weren't tapping on the category sorting filter.

3. Users weren't sure why this content was valuable to them. There was no mention of kicks, the primary value proposition across our entire app.

Not mentioning kicks on the top-level meant a more disjointed experience. By having a common element tie this feature in with the rest of the app, it could produce a more cohesive user experience.

Our project then became clearer, as we aligned on the two high-level goals of enabling our sales team through our content discovery feature, and making user experience improvements where we could.

Collaborating across teams

With the alignment on our goals, we did a mini-design sprint, including a member from sales, content, product, engineering, and design. By having everyone in a room together, we were able to make each person feel heard and bring issues to light from our respective areas of expertise.

We approached design explorations by focusing on the user and the customer separately. That is, have a design exploration that maximizes the benefits for the user, and another design exploration that maximizes the benefits for the customer. The idea here was to see what the most extreme designs looked like, and hopefully gather some insights in the process.

The first one we explored was the user-focused direction. While we had multiple concepts, the one that stood out to us was one that incorporated the various types of content in our app into a single "story". This would be a unique way to display content that only Shopkick could, by including recipes, curated tips, and our kicks rewards in one place. It created a more cohesive experience for our users by tying it to the rest of the app, and made for more meaningful content than just a list of products.

The second concept we explored was the customer-focused direction. It was centered around different ways to feature certain pieces of content. We tried a seasonal/event-based method of organizing content, providing a reason to feature one piece of content over another. Customers could buy into a theme like the Super Bowl if they wanted to be featured front and center. Our sales team also indicated that the customers really wanted a place in the app that they could own, so we explored the idea of "Featured Brands", where a company's logo would link out to a page owned entirely by a brand and the content would all relate to it.

Ultimately, because these concepts were made without considering one side of our business, they wouldn't work in reality as designed, whether it was due to a bad user experience or a breach of customer contracts. But it was not a waste of time, because we were able to learn a few things about what worked and what didn't work, through some user testing. For this project, we ran focus groups in Sacramento, to get a more accurate representation of our users, who are not tech-savvy people living in the Bay Area.

Something we saw was that the idea of bringing kicks more into the fold made a lot of sense to users to create that cohesive experience across the app. Users download our app to earn kicks and get gift cards, so it makes sense to include that here. However, the user-focused concept wouldn't work in its entirety because our customers wouldn't always agree to share space with another brand. So combining bits and pieces from across our ecosystem wasn't possible.

As for the customer-focused concept, we were able to explore different ways to feature specific content and create premium placements that would help net additional revenue. But when we showed this concept to users, they didn't like or understand the "Featured Brands" section. Additionally, forcing ourselves to adhere to specific themes would potentially hide valuable content if it doesn't fit the current theme.

Iterating on the designs

We began to iterate on the designs, taking what we learned from the past concepts. One series of iterations we spent time on were around the brand-owned modules. In our past concept, we found that users didn't understand what the "Featured Brands" section was, but we knew that brands were willing to pay for it. So we tried creating modules on the top level that could give customers the prominent placement, but hide seamlessly in the user experience. We didn't want to harm the user experience, so we tried to aim for visual design that matched what we were doing for the regular content, but had some form of enhancement, whether that was through size, color, or layout.

The final product

The final product was essentially a re-structuring of the top-level tab. Due to time constraints, we did not alter the actual content itself. We merely re-organized them and presented them in a new way, and added some customer-focused content placements. The newly re-named Discover tab brought kicks to the forefront of the feature, making this tab feel more relevant to everything else in the app. It displayed the stories in a smaller format, allowing users to see more on the screen at a time and browse more efficiently.

And regarding the original reason this project was started, we were able to create two new placements for customers to buy into. This allowed customers to have more flexibility in choosing how prominently they want to be featured.

The impact we found during an A/B test with the existing experience was an 8% increase in views of our content. This proved that making each piece of content visually smaller allowed users to more easily get to content they were willing to tap into. It also proved that the new customer-focused content placements did not affect the user experience in a negative way.

While we weren't able to change the content itself, we were able to produce positive results for the business, and for the users in a short period of time.