Goals of the app redesign

Update the aesthetic

Better integrate recently introduced features

Simplify the user experience

Update the aesthetic

On the surface, our v2.0 design looked outdated. After all, it was designed over 2 years ago. While it was lovely for an iOS 6 app, iOS 7 and 8 had since changed the aesthetic landscape — apps have become more flat, much less skeuomorphic. There was even some concern that someone who opened our app might think it was no longer maintained, due to it looking somewhat “old.”

Towards the end of 2014, Mark had completed an extensive rebranding of Thanx. We had a beautiful new logo and color palette, but an old app. We could put the new logo in the old app, but it would look out of place. When we began planning an app redesign early in 2015, we realized it would be the perfect canvas to debut the new branding, even if it meant postponing showing off our new logo for a few months.

Better feature integration and new functionality

Landing screens (left) are our large-form notifications — often used to inform the user of important events such as earning a reward. The NPS screen (right) gives our users a chance to provide feedback to the merchant on their recent experience.

Since the release of App 2.0 in 2013, we’d launched several new features including Landing Screens and NPS feedback (the cross-industry standard for measuring customer satisfaction). These features were added on top of the app, but they never really felt integrated with the overall experience. For App 3.0, we made these features feel more at home by integrating them in the flows better and by unifying them better with the overall aesthetic.

We’d also learned a tremendous amount about our users since App 2.0. Using these findings, we developed quite an extensive list of new functionality that we wanted to introduce to our app to better serve everyone. Some of these included enhanced NPS feedback, better status notifications, and a plethora of new types of rewards, special offers, and surprises for customers. We also let users send a photo of a receipt if they encounter a transaction question, and significantly enhanced the profile of user support throughout the app.

Simplify the user experience

Good experience design often means taking away, not adding more. While we had brainstormed all kinds of new functionality we could add to the app, and had added many great features over the past 2 years, it was time to ask what could possibly be removed.

Were there screens that could be reimagined as more minimal UIs? Were there flows that could be simplified, even deleted altogether? Turns out, there were.

While designing a more robust system of in-app notifications for things like transactions, reward status, and even errors, we realized we should make these statuses tiny and dismissible by the user, or even self-dismissing, so they get out of the way. We also allowed for some of the more urgent notifications — such as a reminder to update your credit card — to remain available in their own Notification Center screen.

Another example of simplification was the decision to remove a great deal of map functionality developed for the old app. While it was a great UI, it was overkill for our app’s size and current focus; we’re not a discovery tool like a Yelp — you’re really only using Thanx if your favorite merchant already does too.

Pre-designing

Understanding requirements

One of the first steps was to understand the bigger picture of this redesign. As an organization we need to respect and address three buckets of requirements in order to have a successful product launch: (i) Business Requirements, (ii) Technical Requirements, and (iii) Design/Brand Requirements.

I’ll give an example: A number of our merchants told us that they wanted their brands to be better represented during the sign-up flow of Thanx. This is a business requirement. To achieve this, our app needed to be aware from where a user is signing up (e.g. Are they physically at the merchant’s business? Are they at home, having just received a push notification or email?). A Thanx user only cares about the merchant they regularly visit; their experience of the app should be as if they are relating with that merchant brand, not Thanx’s. To the extent that we can tell what merchant the user prefers, the app should put that merchant’s brand at the forefront. The app should adapt to the user’s preference.

Technical requirements arise as a result of these sorts of goals. Design requirements are considered when we decide how to display the right balance between merchant and Thanx branding.

Personas and User Scenarios

Many different kinds of people use our app. Some are tech savvy, some are not. Some are very wealthy, some make a moderate income. Some visit many different Thanx stores, some visit one. They’re all over the USA. They use different types of phones. This list goes on.

It’s important to account for all these types of users, to create an experience that will work for the most people. The best way is to craft personas. User personas are created to identify real people’s needs, expectations, and wants, in order to design the best possible experience for them. During our rebranding project, Mark had already created three personas for each of our two audiences: merchants and consumers. To better paint a picture of these personas and events leading them to using Thanx, we created user scenarios. Working with user scenarios is extremely helpful because it allows us to consider for most use cases when designing the app.

Here are two examples:

“New User A is redeeming a reward for the first time.”

Let’s say a user has recently signed up with Thanx and has their first reward but is unsure how to activate it — before or after paying. How do we avoid this situation? The previous app required the user to take the leap of faith and activate the reward, before explaining to them how it works. For this redesign we wanted to avoid user uncertainty by communicating more clearly how Thanx works.

We addressed this issue by introducing landing screen notifications. These screens clearly communicate to the user when to activate their new reward, and covers the entire UI so that they are most likely to read it. Even if they dismiss this notification, we emphasize the message again on the Reward Detail screen. In addition, we added a Help button to the detail screen, so users can access our FAQ and customer support if they have any further questions about redeeming their reward.

“User B is redeeming a reward and Merchant Employee Z doesn’t know how to redeem it.”

Consider a brand new employee working the cash register of a Thanx merchant — let’s say a burger place. A customer approaches to pay, and shows this employee the Thanx reward on their phone. Does this new employee know how to apply the reward? How can we aid that consumer experience and lessen frustration if the employee doesn’t know what to do; avoid a delay at the register as s/he fetches a manager to help? Our solution was to include an “Instructions for staff” link on the rewards screen. As each merchant’s reward program may differ, the instructions are fully customizable —so the burger place’s employee might see “Select Special–COUPON on the register. Input code 0981 and amount of reward/refund.” Plus, our backend infrastructure allows any Thanx staff member to update the instructions on our servers and push it live to the app instantly.

These solutions were a result of us diving deeper into who our users are, and how they might interact with Thanx.

User research

It’s pretty difficult to launch a good product without talking to users. From our vantage point within the company, we often develop assumptions about how users typically use our product. Sometimes these assumptions are accurate, but without talking to and observing actual users, there will be outside perspectives we miss.

For Thanx App 3.0, we identified 3 buckets of users to research:

A) Users who have signed up and made at least one purchase (new users)

B) Users who have earned their first reward, but not yet redeemed (early-users)

C) Users who have redeemed multiple rewards (power users)

Early this year I reached out to a sample of individuals from each bucket, arranging interviews with a few of our users. There were lots of takeaways from these interview sessions, but a specific example I’d like to give was from a conversation with Steve. Steve used Thanx a lot — he definitely fit in bucket C. He earned about 10 rewards in the past year. However, Steve only uses Thanx at one merchant. His card screen looked empty compared to mine:

To Steve, Thanx was his Mixt Greens loyalty app. There were no other merchants on his home screen. This meant that every time Steve opened up Thanx, he was presented with a single card, which he then has to tap to do anything with his Mixt Greens rewards. For Steve, this “cards” screen in the old app was pointless. Imagine a restaurant that only serves cheese pizza. You frequent this restaurant twice a week and every single time, they present you with a menu that only lists one thing: cheese pizza. How pointless.

When we looked at the data across all Thanx users, we realized the vast majority of users were in this bucket — they only had one favorite merchant. For Thanx 3.0, we made the app smarter by skipping the list of merchants if you only use one merchant on Thanx. This is a user experience enhancement I would have never realized was necessary without looking at our data or talking with our users.

Screen inventory

Before starting the redesign, we gathered an inventory of every existing screen in the old app. This was very useful because it gave us a high level overview of all our user flows and screens. While we were refining some flows and completely redoing others, it was important to not overlook existing functionality we needed to retain. The inventory of screens also served as an outline for wire-framing.