OVERVIEW
Project
The Small Business page with all cards was too long and hard to skim, which resulted in fewer people clicking on cards lower down the page. To improve user experience, we need to simplify and shorten the page.
Role
Working alone with the Agile team to create a design similar to Pinterest.
2020
Timeline
2 months
Target Demographic
Small business credit card holders.
USER TESTING
Before becoming the lead UX designer, my initial design concept was given to another designer for usability testing. Results were mixed with 70% of users liking the simple design but struggling with icon understanding instead of words on the cards.
The designer wanted the website to be easy to scan, but users aged 35 to 45 preferred more info before moving to product details page.
I was asked to lead the project to address usability issues and collaborate with the marketing team for an improved user experience, based on what I learned.
First Step = Initial Action
When I began creating the View All Cards page in Agile Marketing Scrum, I researched other websites and found Pinterest's user-friendly design inspiring.
I sketched an idea inspired by Pinterest's design for a user-friendly interactive experience.
The tiles begin collapsed for easier scanning and to show less info upfront.
When users find a card they like, they can click to see more details before visiting the product page to learn about its benefits.
I started by working on the layout of the small card. Then, I looked at how it would look when small and large. I also considered if they should be in a row or adjusted based on text amount for a Pinterest-like style where users can expand cards they want to read before opening the full product details.
We reduced clutter by showcasing benefits before the cost. Higher price offers enhanced perks for small businesses.
First Try
Reviewed user tests, led new scrum as main UX/UI designer, collaborated with marketing, scrum, and product teams to improve Pinterest concept, created new version aligning with user and stakeholder needs.
Final Version
The VP of Marketing and the agile scrum marketing team liked the new design.
In this design iteration, we learned that involving developers earlier would have saved money because the design took too long to build.
The buildkit also includes a breakdown of the new elements and their functions.
During the meeting, we talked about making flags better for various screen sizes. Users were confused by the live flag on American Express' site, thinking it was a button and losing the welcome offer details when they clicked. The new flag design now clearly resembles a flag, not a button.
