Back Story
I was returning an item at Target that showed the item costing $20.00 on my mobile reciept, however they refunded me $14.00 and I had no idea why! I asked them why they didn't refund me the amount I thought I 'paid' and they didn't know why it didn't refund me $20.00 either (especially when the mobile reciept shows $20.00). I realized there was a crucial error in the UI for this to confuse not only the guest but also employees. I decided to take matters into my own hands...and design the solution to this problem.
On the right you can see how my reciept looked for the unfortunate predicament to occur.
Quick Look
Target's current mobile reciept has made it hard for users to identify how much they paid for a product. Target is my favorite app, and I loved learning about their design throughout this process.
How might we create a system that reduces a users confusion when referring back to their mobile reciept.
Who are the users that might run into the same problems as I did?
Numerator found that Target's typical shopper is a white suburban mother between 35 and 44 years old. They are likey to check purchases and returns on the target app the same way I did.
Understand
Why does Targets digitial reciept not reflect the same information as the paper reciept?
I brainstormed ideas for the re-design, using information that was already available for current users. My goal was to add a stronger signifier for the affordance. I didn't want to include information that Target doesn't already provide the users on a typical reciept.
Understanding the current design system
Target's Design System was created to provide centralized and consistent standards of visual language. I studied their design system throughout the app, in order to implement the new feature correctly.
Color Strategy
Design Solutions
Providing the user with more detail in the Purchase summary
I tried to implement the design system into the reciept.
For the Purchase Summary, I added information that was needed during the brainstarming process; discounts from sale or clearance items. It was neccessary to add this because it would allow users to see how much they saved over all and not just from coupons.
I used the term Deals instead of 'sale' or 'clearance' because Target tends to use those two words minimally. About 67% of the terminology used in the app were: Deals and Savings in comparison to Sale & Clearance.
Using red as the signifier...
For the individual items, I created two versions based on Targets original signifiers. Target makes prices red for items that have a special discount (sale/ clearance). One design was made to be super obvious (the upper branch) and the other was a more subtle signal (the lower branch).
A/B Testing
Since I had two different versions of my idea, I A/B tested on 6 people who use the Target app. The one on the left was found to be less intuitive for the user to understand why the item was red on their reciept. The sample on the right resulted in quicker responses pertaining to what purpose of the red number was for. All the users who were given the screen on the right could tell immediately how much they 'actually' paid for the sweater. While the users who were give the screen on the left noticed the cart in the nav bar, before the item itself.
Targets' signature red color worked for items on sale, but not in post sale. Users had no idea what I was signaling with a red price.
Final Outcome
I had to design a new and simple pattern to help users figure out what items were on sale when they made the purchase.
Thanks to A/B testing, I was able to accurately analyze the thought process of Target app users and create a final product that reflects them.
Users would also be able to identify if they were able to save more money through 'deals' that were seperate from Target's RedCard and Circle promotions.
Learnings & Insights
Through this process, I learned that signifiers help people of all ages instantly gain information. Color alone is not a good signafier, I had to provide users with more input. For processes that need clear information, it is important to be detailed in the interface. A/B testing is a great way to learn about users and where their needs lie in the UX/ UI. The user's responses also helped me layout the information architecture in the purchase summary.
I wouldn't have noticed this problem if I hadn't questioned the reason why Target refunded me less than what I thought I had paid...and I'm glad I did! Target is my favorite app, and I loved learning about their design throughout this process.