Brief

This product is a web platform that allows businesses to reward customers for recommending them. My role as lead designer included ideation, prototyping and producing high fidelity wireframes ready for engineering.

The Challenge

The client wanted to build a platform that maximized customer value for improving businesses reputation. They also wanted to be unique from other incentivized reward systems. This meant not adding another “card” or process just for customers to receive their rewards. The client wanted rewards to happen “automatically” based on their regular purchase history. We needed a platform that allowed customers to seamlessly shop normally and get rewarded for doing so.

 

Research and Analysis

I started the project off with a meeting with stakeholders to get a clear idea of the audience they were marketing towards, make sure we were making a product that addressed real pain points, and gauge how success would be measured for the product.

 

Next was a completive analysis of other products on the market offering similar services, and how they approached “cash back” to customers. One of the main things we noticed was that these services didn’t really make using earned cash back practical. It involved purchasing through a certain 3rd party application, or requiring that you reach a threshold before being able to use the cash back. The client was able to survey businesses and users and could confirm these pain points. These were pain points we could capitalize on to make the product stand out.

After having a better understanding of the company goals and product, I started creating user flows so we could get an idea of the user journey. From there I started sketching, coming up with a number of variations in design. As usual, I spend most of the time during the sketch phase, as it allows me to focus on full user experience without being distracted by visual elements. Having a detailed sketch/wireframe template makes the visual design so much easier.

 

Design

The client didn’t have any branding, so I had to create it as we went, with the mindset that we would change it once official branding came along. During the visual design process I constantly kept in mind the engineering limitations for the first version of the product, and produced designs that made the experience easy for the user, but also practical to development to implement.

There wasn’t a budget for a native mobile app at the time, so it required me to really think mobile first, especially since there were some user actions that would need to be performed at a seconds notice. The web application had to be designed responsively so that all of the core functions were still available on mobile, while at the same time keeping the experience fluid.

Key Learnings from this project

  1. Familiar doesn’t mean “standard” It can be tempting to just use familiar design patterns from competitors with the assumption that users will adopt the product quickly. However after examination, it was clear that just because something is done a “common way” doesn’t make it the right way. Trying to make a unique product meant doing things differently, coming up with unique solutions that users could understand even if it wan’t the “usual” way.
  2. Thinking carefully about Mobile Web UX is crucial Often when we think “mobile”, the design elements just need to adapt to a screen, providing the same experience on desktop. With this project, some of the elements needed to be “rethought” for mobile. The experience would need to be similar, but different to perform well on a mobile device. This included things like tables and graphs for showing cash back and bank transaction history, and adding additional buttons for scrolling through wallets.
  3. Keep it simple There would be some complex functionality, but I try to remember that the user doesn’t care about complexity, they just need to accomplish the task at hand. Keeping things simple meant constant collaboration with development to see how much of the “complexity” can stay on the back-end instead of bringing it before the user.