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—
Target RedCard's online interface is clunky, uninspired and outdated. Straight and to the point! One of my favorite interview questions in UX is, "Do you feel like this design was made for you?" When I am on the RedCard site, my answer is "No". From my designer's point of view, hand-in-hand with my knowledge of coding, I can really tell how much the back-end is interpreted to the users. It's clunky and unnecessary.
Project Goals—
→ Modernize. I am inspired by Shopify and their online payment interface.
→ Consolidate information to reduce repetition.
→ Simplify. Provide a clear path and method to the thing that RedCard admin want you to do the most: PAY YOUR DARN BILL.
Login page progression: final, wireframe and original.
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.
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—
→ User testing for two sections to help make important user-guided decisions. The first: Payment ("One-Time" vs "Recurring" within "Manage Payment Accounts"), and the second: "Recover Username/Password".
→ Continue to challenge the "Manage Recurring Payment" placement. Does it make more sense to users have it closer to "Making a One-Time Payment"?
→ Online contact platform. I always have to poke around in order to call them and wait until the memo repeats two or three times before it offers to have me talk to someone. It would be nice to have the contact information in a clear place—even if the intention is that they don't want people contacting them! :)