Target RedCard

A lover of Target and discounts as low as 5%, I am a proud RedCard owner since 2018. Do I love my RedCard? Yes. Do I remember paying the bill? No. Why? Because of the interface. Not just a petty excuse, I have had so many negative experiences trying to log on to the site from lost passwords, roundabouts, confusion and general disatisfaction. My subconscious has actually blocked out that I even have the card, unless I'm at Target of course, and therefore I sign on as few times as possible. I cannot call their helpline asking for grace anymore! So, I did "something" about it. 

Date: Fall 2020
Client: Personal Project
Role: User Interface Designer

Problem Statement—

Project Goals—

Login page progression: final, wireframe and original.

Research

Approach—

Information Architecture
Digital Wireframe
Prototype with Adobe XD

Information architecture before and after of the site. 

Select, early stage wireframes made with Whimsical. This stage helped me to figure out which ideas were plausible. For example, on the Homepage, I had an idea to do a clicking module between the "Current Balance" and "Last Statement Balance" information groupings. After working it out, this concept didn't provide any more functionality and wasn't worth further designing.

Solution

Personal Constraints—

→ A few liberties here for the sake of User Experience. I consolidated the tabs to have content view on one page (rather than having multiple pages that branched out from each tab), eliminated the "Spend Analysis" chart (for which I would probably be yelled at for deleting if it were real life) and made pop-out boxes be the key form of saving new information/paying bills. 

→ Any and all small print information must stay. Even though it's not fun or pretty, it is legally necessary and would have to stay in final design.

→ Must be able to easily collapse and be more than suitable for mobile.

→ Stick with Target's fonts and colors. Branding can be slightly adjusted to fit "modern" feel, but Helvetica Neue & Target Red bust stay.

I departed from Target's fun illustrative style for the RedCard site. I introduced a gradient, comprised of the iconic Target red shades and tints, to the original logo in order to provide modernity and movement to the asset. I kept Helvetica Neue as the main font for consistency. 

Login page. First image shows login before scroll. I chose to keep all fine-print below the break-point. It's there, but it's not in the same visual space as the most important content. Instead of multiple banners, I made one giant one anchored to the right. It has more visual weight this way. I also imagine there to be a snap animation in the future for this. 

"Begin Your Enrollment" and the "Recover" pages would not occur in this order, but the gist is that they would display minimal information on a screen, and require users to focus their attention on minimal asks. Please note, I would advise user research needs to happen for this area in particular. I went back and forth on the email address to username/password recovery option, and there would need to be many trials to see if this would translate well!

Homescreen before and after breakpoint. I kept the same information on this page as the original, but the herarchy is clearer, because the visual chaos is eliminated. "Pay Now" would lead to "Make A Payment" pop-up. I eliminated the choice to set up recurring payments on the homepage because it is more of an edit rather than a task. Recurring payments would be made under "Manage Payment Accounts" in "Setting & Help". Banking apps helped to reinforce this choice, but it would require further consideration. On a different note, I created a new section called "Contact" in order to make getting help more accessible. Refer to "Further Considerations" at the end of this page for more thoughts about this. 

Transactions section expanded and then expanded further. It's important to keep "Transactions" quick and digestable, but by creating a collapse/expand option, users can make an easy decision if they want to see their transactions or not. 

Before, this information was in an information bubble by the cardholder name. I chose to keep it in a different column with more context as to what kind of support it will provide the user.

"Statements" reduced to a single page with the addition of the "Download Statement" button. Before, the statement download had a similar month-click-download structure, but it opened to a separate page. Disorienting the user by opening a new target window is unnecessary.

"Make a One-Time Payment" pop-up progression. Kept the same information and same flow, but made it more interactive and show progress in a recoginzable way.

"Transactions" page and "Filters" item expanded example.

This page underwent a huge overhaul. I simplified this page to emphasize what alerts the user received, which ones are new and how to set up new ones in a clear organization and hierarchy.

"Settings & Help" page.

Further Considerations—