Role: Visual design, information architecture
Personalized accessory recommendations
Problem: Design a flow for driving personalized accessory recommendations based on most popular devices (unauthorized users) and customer-specific devices (authenticated).
Approach: I enjoy AB testing because I can experiment, use my imagination and get feedback quickly. A great collaboration, this business team started with a strong premise and was open to different approaches.
Our flows included a personalized marquee and a landing page based on a customer's devices and accessories to recommend and filter by compatible offerings.
1 ) Personalized marquee
We explored several approaches to promoting personalized accessory recommendations, starting with a marquee.
2 ) Personalized devices landing page
Upon selecting from a list of their personal devices, the customer then goes to a recommendations page that offers a personalized carousel, filtered by device and accessory.
3) Consecutive page: Personalized device & accessory recommendations carousel
Having chosen from a lineup of personal devices, the consecutive page combines a personalized header and drop downs to filter various categories of accessories or select a different personal device to accessorize.
Deal promotion and sticky navigation
Problem: The business team sought opportunities to promote deals within a sticky navigation to follow page scrolling.
Approach: Besides the sticky nav and deals widget, I introduced several other possibilities for promoting deals, including floating carousels. View explorations.
Marketing promo tiles
Problem: The existing marketing tiles were getting no click-throughs; almost completely ignored.
Solution: I found an opportunity to apply existing responsive components from our upper funnel - our more colorful promo tiles (grey, green, blue - accessibility-compliant colors). The product detail pages were not part of the same RWD development effort or platform, but the layouts were based on the same style and grid, so I recognized that we could carry over the same components.
Result: The color promo tiles achieved greater than 95% click-through rates than the previously colorless marketing banners (see below).
Comparison: The original problematic, colorless marketing promo tiles: Below are the problematic, colorless marketing promos (inside the gray horizontal block) which were getting no click throughs.
Comparison: Color marketing promo tiles: Below are the successful colorful promo tiles (gray, green, blue) that increased click-through by 95% or more.
Analysis: Capone VS Citi online credit card payment
Role: Volunteer UX & visual design analysis & comparison
Problem: At AT&T, I received a request for a comparison of online transaction experiences.
Solution: I immediately thought of the contrast between my experiences in paying my two credit cards online, and detailed why CapitalOne provides a cleaner, more effortless experience and feeling.
Evaluation: CapitalOne online credit card payment:
Evaluation: CapitalOne online credit card payment:
• Payment flow contained in a short, narrow modal with a dimmed background
• Flow progresses through one consistent screen format
• Information relating to payment is focused and concise, with minimal verbiage
• Use of color / bold typography further emphasizes action, separates/focuses information
• Icons/color offer visual cues/indicators, feel intentional, like an app unto itself vs an auto-generated form
• Minimal calendar, compare with wider Citi version: The Citi calendar affords next month without additional clicks, but minimal is better overall
• Noticeably painless, simple, bold and colorful
• Sections posed in the form of a question, use of plain language
• Compare verbiage: Capone vs Citi How much do you want to pay? vs Select your payment amount: a guiding question inviting users to identify from multiple choice vs select which is rigid and burdensome
• Make a payment vs Setup your payment: make connotes immediacy vs setup sounds like you might want to bring a lunch
Evaluation: Citi online credit card payment:
• Make a payment vs Setup your payment: make connotes immediacy vs setup sounds like you might want to bring a lunch
Evaluation: Citi online credit card payment:
• Long scrolling, disconnected parts, feels like an auto-generated form
• Reads as busy, text-driven, and sprawling; nothing commands attention
• Minimal use of color for any purpose, emphasis or esthetics, and a nasty variation on green
• Header is a thin font, separated from action
• Wider format accommodates more text
• A lot to read, small text, harder to read, white backgrounds
• Confirmation screen changes format
• Possibly offers some additional info but overall feels busy
Conclusion: Capital One's online credit card payment experience is effortless and pleasant.
Screen comparison: CapitalOne (left) vs. Citi (right).
