Designing the new Thanx App


We’ve redesigned our app. Read about the process.

In May 2014, I received a life- changing email in my inbox. Mark Bult from Thanx wanted to interview me to possibly join him as Designer #2 at the company. To get a sense of their design challenges, I immediately downloaded the app, and started redesigning 2 of their screens as an exercise.


We’ve recently launched Thanx 3.0 for iOS and Android. This was an incredible project for both Mark and me, and we thought it would be useful to share our entire design process.

Thanx is a mobile app for automatically earning rewards from your favorite merchants — like that sandwich place you go to every Tuesday, or that pizza place you always end up at after game nights. You register any credit or debit card with the app, and then every time you use that card at that merchant, you earn progress toward a free thing. It could be cash back, half-off a large pizza, or free beers. Almost anything! If you haven’t tried Thanx, you should download it now


“Make the app flat.” — Some Guy

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.

Screens from Thanx App 2.0

Design research

We wanted this redesign to look completely different from the previous app, and accompany the look and feel of our new logo. We created moodboards using Niice for illustration styles, UI, and transitions. A takeaway from Mark’s rebranding project was that people thought of the Thanx brand as friendly and fun, yet smart. The redesign needed to retain these qualities.

Designing

Constraints

Designing for the user and audience is only part of the picture. It’s important to keep in mind engineering and time constraints that will affect the overall delivery of the app. We made the decision prior to wireframing to avoid heavy use of animations or visual features that would impair engineering’s ability to ship the app on time. As a result, Thanx 3.0 is simple yet very functional, and our engineering team doesn’t hate me (I hope).

Wireframing

We used Adobe Illustrator for wireframing because Mark and I knew we could rapidly crank out simple designs—Illustrator being a tool we were comfortable in. With Illustrator’s large and multiple artboard capabilities, it was easy to drag around screens and organize them according to their flows. Looking at the Illustrator canvas now, however, it could have been much more organized. Noted for next time.

Photoshop

This was our design tool of choice. We wanted to start designing right away and Photoshop was our go-to choice. A challenge we had early on was figuring out at what resolution to design in. iPhone 6 and 6 Plus had just been released, which presented new resolutions and asset sizes (@3x).

We decided to design on an iPhone 6 canvas (750 x 1334 pts) and adjust padding and UI elements to accommodate for the 6 Plus or 5s and below. Some people might prefer designing on the smallest supported canvas (which could mean iPhone 4/4s at 640 x 960pt) and making sure all important elements fit at that size, before scaling upwards to larger screen sizes. We considered this as well, but our data showed that iPhone 4s users only accounted for 10% of people on Thanx. Our decision was to focus on the largest group of users, who were on iPhone 5/5s. Since length and width ratios are the same between iPhone 5/5s and iPhone 6, it made most sense for us to design for the newer model and scale downwards.

With the exception of photography, all design assets including icons and logos were created in vector format, so scaling from @2x to @3x to create production assets was not a problem.

Prototyping

InVision became our new choice for prototyping designs. Its UI is intuitive and I love being able to easily view the prototype on my phone. What’s more useful though, is being able to have conversations and see feedback on specific parts of a screen design.

Creating Design Specs

This part was certainly a learning experience for me. Being the first major iOS project I’ve worked on with the engineering team at Thanx, there was a lot I needed to figure out in order to make my designs comprehensible to code out.

A major challenge I had early on was learning how to provide measurements to the engineering team. Since we designed for the iPhone 6 screen, all our measurements were in @3x. When creating the specs, was I supposed to give sizes in @2x and @1x as well? Fortunately Xcode scales images automatically for different screen sizes, using a single measurement for a UI element.

Creating design specs took a lot of time. Measurements for every part of each screen had to be clearly labelled. Also special considerations such as cutoff areas for iPhone 4/5 sizes had to be identified. It took me about 3–4 weeks to complete specs for all the screens we had designed.

Eng Support

In the several weeks after delivering the design specs, Mark and I were on-call to provide any support to the engineers. This included providing any design assets that we missed, clarifying on the specs, and most of all, addressing any edge cases that we missed during the design stage. We also made several adjustments to the design to further accommodate and simplify the implementation (coding) of the app. This goes back to the engineering constraints mentioned above — as designers we need to be respectful and flexible about this.

At Thanx we’re extremely lucky to have an engineering team that is really good at thinking about our end users. The result of this is a lot of collaboration between Eng and Design to ensure that we really nailed down creating a great user experience.

To Conclude

Redesigning Thanx was truly an amazing experience. Be sure to check out Thanx live on the App Store and Google Play Store. Over the next several months we’ll be collecting user feedback and iterating on the app to make it even better. Stay tuned!

We’d also be happy to explain any of our steps in more detail. Hit us up on Twitter @imjasonli and @espd.

Appendix: Helpful resources for mobile UX design

We found the following tools and sites extremely useful — even vital — during our work.

Tools

  • Niice — Great moodboard web app.
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe Bridge — No better way to organize and view snapshots of hundreds of PSDs, PSBs, JPGs, and PNGs.
  • Confluence— Vital for team communication, collaboration, and capturing goals and requirements.
  • InVision — Super useful to prototype and demonstrate interaction and flows.
  • LiveView — For visualizing what your design will look like on your phone.
  • ImageOptim— Great free app that crunches JPG, PNG, and GIFs better than Photoshop defaults.
  • iPhone 6 Screens Demystified— Super helpful analysis of resolution issues.
  • iOS 8 Illustrator Vector UI Kit — Useful kit by Mercury Interactive.

Sites we used for inspiration


By the way…Thanx is a pretty legit place to work. We’re always hiring so drop us an application at any time. Feel free to reach out to us directly at design@thanx.com.

Check us out on Dribbble to see what we’re up to. Be sure to hit that 💚 to let us know to write more of these.