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.
DogSpot is a young hardware startup 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.
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.
My role was to explore ways of incorporating brand promotions in our app experience and came up with a finalized solution based on new product strategies the team is heading toward. I communicated with my product lead (CDO) very often to sync on the scope of the project. I handed off the design with documentation to the product lead, and she would prioritize the design change and other tasks (like firmware bug fixes) for our remote developer.
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. We were adding addition information of brand promotion to the service. 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.
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 felt that too!)
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:
Within that premise, there were two high-level goals:
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.
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.
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.
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.)
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.
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.
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.
So I got more time (1 week) to take a deep dive. I took a step back and considered two questions:
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:
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.
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.
Even though this iteration had a wow factor, there were a few comments received from my thoughtful team:
Great feedback isn’t it?
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.
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.
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).
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:
We are still figuring out a key metric to determine the performance of the redesign and ways to develop trackings to conduct user testings.
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.
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.
