Nov 19, 2019 | 11 min read

UX Case study:
How to Blend a Free Service with Brand Promotion

After the company decided to shift away from its previous business model, the team started to think how to promote promote sponsorship in the DogSpot app. Balancing between smooth user experience and standout advertisement, I renovated the location card, one of the core app features, with some brand touch-up.

Disclaimer: This case study isn’t something we feel 100% certain, but to me, being through the whole journey is a great lesson in itself. I hope it could give you some ideas about ad experience design for a freemium service and my thinking process as a designer.

About DogSpot - A PetTech Startup

DogSpot is a young hardware start-up striving to solve an emerging problem — more people bring dogs along when shopping. We provide a dog sanctuary sitting by the storefront to give dog owners peace of mind while they shop. The product is an IoT system that includes a dog house, the DogSpot app, a chromium app for house screen, and firmware. How to give a dog a stay? Simply unlock the house from the house screen or your phone.

Photo credit: DogSpot

Problem - A Tug of War between UX and Brand Promotion

As soon as the team figured that sponsorship might be the way out to sustain a near-free service, we started to think how to redesign a core feature in our app that aims to optimize the user experience and increasing brand awareness at once, considering the limited resources we had.

Such an intricate problem statement, right? Yet it wasn’t that clear at the beginning. We jumped around from our sole single perspective (sponsorship) to another (end-users) and finally landed somewhere in between, the blended space.

Challenge: Dense Info with Slim Attention

The location card is the first few things that users encounter in the app. It’s a digital representation of a dog house. In other words, the card needs to carry both information on the location of the house and its status. More importantly, it should hint users the first step of starting the service. Aside from the information on using a house, the promotion of sponsorship should also display in the app.

The current location card design with different states.


Opportunities: Clear Context and Actionable Promotions

We know the context of how and where users use the app— they are either heading to the grocery stores with their dogs or physically inside the stores. If the app could hold users’ attention in these moments, then the promotion is ready to converge since they are just a few feet away from the cashier. Ka-ching!

Doesn’t that sound thrilling? (We all feel that too!)

Goals: Sponsorship Integration and Great User Experience

Since this was the first time implementing sponsorship promotions in the app, we considered the design as a pilot study to learn the following two things:

  • What does the sponsorship value the most in this partnership?
  • How do users react to other brands showing in the service?

Within that premise, there were two high-level goals:

  • Improve the user experience of the location card, especially focusing on the clarity and hierarchy of information about houses and location partners.
  • Seamlessly incorporate multiple brand sponsorships.

Team Setup

The team in this project included a product lead (CDO), a remote developer, and a product designer (me). Our account manager (CEO) was the outreach person that communicates with our sponsors. My role was to come up with a solid design based on product strategies the team is heading toward and iterate according to the feedback from both the internal team and a sponsor’s marketing team.

Research Process (Mingled with Design Process)

The reality of working at a small startup is that there’s no clear distinction between research and design. We ship fast and learn from our failures. Repeat. I tried my best to document the thinking process linearly while reflecting the messiness in reality.
So bear with me.

But Before, Background.

This project belongs to a larger rebuild, which is an entire user experience redesign. For that, I did user research and design exploration to help the product lead lay down the vision for our next rebuild from a fresh perspective. As I won’t go over the entire process of how I set up the vision (that’s a different story), I highlight the research insights below to help you understand the big picture of the project.

The design exploration. Time spent: 2 weeks.

Insight 1: Users get distracted easily from their phones while dog-walking.
To understand the behavior patterns of dog walking, I observed people on the street in an urban setting. I found that some of them check their phones with one hand. They can hardly standstill reading on the phones for too long because of their impatient dogs. The attention of our users at the moment (when out with the dog) is a sparse resouce. Therefore, the interface has to be easy to grasp within a few seconds.

Photo credit: DogSpot

Insight 2: Frustrations come from the uncertainty experienced in the service.
By reviewing notes on customers' (angry) calls, I put myself into users’ shoes to understand where users struggled, needed, or confused within the context. I found that many users were frustrated by not knowing what to do or afraid whether they were doing things right (e.g., not knowing what the next step is, unexpected asks from the service, or inconsistent performance of the machine to name a few.)

Insight 3: Almost all users consider dogs as their family member or best friend.
We, as designers, need to keep in mind the strong emotional bond when communicating with users. The language we used should be delightful and show an understanding of the intimate relationship.

Insight 4: Curate a sense of community by giving users meaningful purposes.
I reviewed comments across social media pages, news, and app store reviews to understand what values people/businesses see on the service, in other words, why they want it. As this is a new concept, a way to get more people to use the service is through creating a sense of community. An approach could be telling users that their engagement contributes a bigger picture — making their neighborhoods more friendly to dogs and dog owners.

Now Back to the Project.

First Iteration: Quick Mock-ups
The project first came to me with a super tight deadline — one day before the team pitched ideas to sponsors. I had to come up with four key mock-ups to give our team and the sponsor a visual aids for the meeting. Given the time I had, I made a few tweaks on ideas that the team previously had. Overall, the feedback was positive because it got the discussion going; however, both the product lead and I felt that there could be more, that was outside the current design.

The upper row is the original flow; whereas the lower row is a flow integrating promotions.

Second Iteration: A deep-dive
So I got more time (1 week) to take a deep dive. I took a step back and considered two questions:

  • How to seamlessly integrate not only one brand but multiple into our brand?
  • What kind of promotions do users want or are familiar with them in the context of grocery shopping?

I chose to do desk research on “In-app Promotion” to learn the best practice to approach it. My manager gave me a great reference to a reward system used by a grocery chain. With all the information, I summarize into four approaches to promotion integration in our app:

  • Mention exclusive offers in the service
  • Highlight / Track how much users have saved
  • Mention cash back
  • Create segments to provide customized offers

Considering the technical limitation and the bandwidth of our developer, I chose the first and fourth bullet points for this round of redesign. Pulling ideas from my previous design exploration, I sketched wireframe digitally and turned them into more high-fi prototypes.

Rough wireframes and more high-fi prototypes.

Explained: The Location Card

Location Info
The first went into users’ eyes is the location of the house, which aligned the conceptual model that they shared — the store name. As we haven’t yet implemented the navigation function in the app, so I kept the address as helpful information, acknowledging that it wasn’t ideal.

Exclusive Offer
I highlighted the exclusive offers with a date to indicate that it was updating, hoping to motivate users to use the house (which I later found that it wasn’t obvious).

Information about Usage
The number of stays tells users and store owners on how many people have used the house (however, it wasn’t a piece of compelling information for some houses).

Promotion Bar
A banner revealed the house sponsor with an assumption that users would tap on that (CEO: Can I click on the bar?). And a label indicated whether the house was available and how much users should pay.

Feedback from Team

Even though this iteration had a wow factor, there were a few comments received from my thoughtful team:

  • The buttons didn’t seem clickable.
  • The language of the promotion bar wasn’t clear on what users should expect.
  • What would be a good color for the banner that could potentially go well with many brands? Perhaps we could open up the design to our sponsors such that they could choose their own?
  • Should the “Unlock Button” (the most important button) be on the screens all the time?
  • Scan barcode is such a great idea! How feasible is the technology?
  • Should the “Unlock Button” (the most important button) be on the screens all the time?
  • What should users do with the bar? Can you click on that?
  • How do cards transition smoothly but still keep “Unlock Button” at the same position?

Great feedback isn’t it?

One Step Forward, Two Steps Back

That day on my way home, I realized how deeply I was rooted in the sponsor perspective — I didn't to advocate the users' need. I forgot the vision I originally had for the next build, due to the tight deadline, due to the laid-off situation, die to things that changed all of a sudden. Even though I was no longer a tenant employee, I was still curious to see how the original plan rolled out, even just a small part of it. Since we are going to do it, do it right!

On the next day fueled with ambition, I ran to the office and made a new design. I removed most of the colors and drew more attention to information architecture.

Third Iteration: The Muted Location Card

Back Button
I made the back button stand out to users so that they won’t get lost in the screens.

Labels
I separated the information for price and house status into two. Because they were distinct concepts and that in the admin system they were separate data points.

The Priority for Buttons
I prioritized “Book Ahead” button because I want users to get into the habit of reserving the house before using it. It was a strategy I defined in the service blueprint for repeat users. However, behind this decision is a whole debate in the team — should prioritize people in front of the house who were ready to use it or people who were about to head out to the store? Till now we still haven’t yet had a clear answer.

Button Design
Keeping the important button in the same position makes it more accessible to users. I expanded the button to a wider size because users could be using either hand holding the phone (from an a-ha moment I had in a workshop on Unconscious Biases). Adding an icon made the button stand out without reading the label. I use green as button color to represent the concept of "Proceed". Yet we hadn't resolved on this green.

Hint space
I reserved a space below each button for hints or error messages to build trust with users.

Fourth Iteration: The Hybrid Location Card

This time my manager jumped in. And it’s my turn to give feedback. Role changes! I gave it a thumbs-up on the right 1 & 3 mainly because it separated the information about the location from the promotion. It grabbed attention from users. The promotion was on a separate flow that leverages users a conceptual model of advertisement. It also gave sponsor a huge canvas to play around that didn’t necessarily need to blend in our brand identity. Check!

Based on this version, I made some small adjustments by pushing perfect pixels and systematically built the UI components. After that, I expanded the location card with different varieties (various house states, with/without promotions).

Voilà! We came a long way and finally landed this blended space.

Next Step

The new location card is currently under construction. There will be some adjustments to accommodate the technical side, but the overall design is set in stone. With the limitation of the team size, the next steps are to do internal testing on staging and then collect data when it’s on live. There are several things we want to learn from this redesign:

  • How long does it take users to make the first action on the location card?
  • What’s the first action they make?
  • What’s the clicking rate of the promotion?
  • How much time do they spend reading the promotion?
  • What are the places they click?
  • How does the promotion influence the number of in-store visits, in-store purchases, and purchase of the promoted products?
  • What’s the overall reservation rate comparing to the previous design?
  • What’s the reservation cancellation rate comparing to the previous design
  • What’s the overall house unlocking rate comparing to the previous design?

We are still figuring out a key metric to determine the performance of the redesign and ways to develop trackings to conduct user testings.

Reflections

One of the challenges in the whole process was to tick all the boxes for multiple stakeholders, especially ones that are traditionally conflicted. Finding that perfect blended space requires a lot of iteration swinging between one standpoint from another. We shifted our goal a couple of times during the process; indeed, it is something that takes time to experiment. Perhaps it is not the best way to approach it, but when your service is one-of-its-kinds, you got to pave your way and learn from your falls.

Another thing I found challenging is to design one feature without thinking about the whole context or user flow. I realized there could be two (maybe more) angels to consider a feature redesign: user flow and information architecture. I found myself jumping back and forth between the two, wondering if there’s a better process. If your team has a great way to approach it, please hit my inbox! I’d love to learn about your process.

Final thoughts

This project is more interesting than I first thought. It made me think deeply about the whole freemium/advertisement model and found the problem space challenging/exciting. I am skeptical of any promotions because they are usually designed with bad tastes or annoyingly disguise themselves. When putting my head down and design, I found it wasn’t that easy to find a perfect balance.

On thing I wish to do is to test the new design with users in person. There are some nuance emotions that couldn't capture from quantitative research. Unfortunately, our hands are tight. Perhaps your team have this bandwidth? That would be my dream place!

So that’s it!
Thanks for taking the time reading through. I hope you enjoy some part of it. If you are looking for a designer who constantly throws a lot of good questions, always be ready to jump in new challenges, love to raise the bar of the status quo, please inbox me! I’d love to learn with your team and craft great experiences together.

Since you're here...
Oct 29, 2019 | 5 min read

My First and Last Month at DogSpot

Jul - Dec 2018 (6 months)
Story2 Design System