Role: Visual designer & information architecture
Background: I enjoy AB testing. Experiment, use imagination, & get immediate feedback.
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: A great collaboration, this business team started with a strong premise and was open to all kinds of approaches.
Our flow included:
1 ) Personalized marquee, links to list page with personalized device and accessory filters.
2 ) Personalized devices featured on the landing page, links to carousel of accessories filtered by their device and accessories.
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 recommender page that offers a personalized carousel, filtered by device and accessory.
3) Consecutive page: Personalized device & accessory recommender carousel
Having chosen from a line up of personal devices, the consecutive page combines a personalized header and drop downs for filtering various categories of accessories, or for selecting a different personal device to accessorize.
Deal promotion and sticky navigation
Problem: The business team was looking for opportunities to promote deals within a sticky navigation to follow page scrolling.
Approach: In addition to 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 compared to 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.
Product detail pages: Collapsable tables and scannable iconography
Role: Visual designer
Problem & solution: Create layouts in alignment with our responsive grid, apply iconography to complement copy, and reduce sprawling device details to collapsable, scannable tables. Part of several product detail page redesigns, used for displaying devices and accessories.
Analysis: Capone VS Citi online credit card payment
Role: Volunteer UX & visual design analysis & comparison
Problem: At AT&T, I received a request for 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 the 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 dimmed background
• Flow progresses through one consistent screen format
• Information relating to payment is focused and concise, minimal verbiage
• Use of color / bold typography further emphasizes action, separates / focuses information
• Icons/color offer visual cues / indicators, feels 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 click, 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 user to identify from multiple choice vs select which is a 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, sprawling, nothing commands attention
• Minimal use of color for any purpose, emphasis or esthetics, and a nasty variation on green
• Header is 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: CapitalOne's online credit card payment experience is effortless and pleasant.
Screen comparison: CapitalOne (left) vs. Citi (right).
