😀 Intro
The checking accounts landing page is a crucial component of our digital presence, and is often the first point of contact for individuals seeking information on basic banking services. A well-designed checking page not only provides clear and concise information about the bank's offerings but also showcases its commitment to customer service and innovation. A redesign will help enhance user experience, and align the page with our current re-branding efforts, ultimately driving customer engagement and satisfaction.
🤝 Role
User Researcher
Product Strategist
UI Designer
🛠️ Tools
Figma
Framer
Miro
Userlytics
📝 The Problem
The previous design was outdated, sparse and not user-friendly:
- Inadequate amount of content on the page.
- Checking account section did not highlight the unique features of each account.
- The language was confusing not user-friendly which I validated by testing.
- Basically, we’re lucky if anyone’s getting convinced by this page, I mean come on. 😉
🎯 Business Goals
- Increase number of CTA click throughs.
- Increase the time-on-page and number of number of events.
- ✨✨Pizzazz ✨✨
💻 Process
- Assess business goals and user goals
- User surveys (See UX Research section for details)
- Competitor analysis
- Design sprints
- Wireframe
- User testing phase l (See UX Research section for all the juicy details)
- Prototype
- User testing phase ll
🤓 Addressing User Needs and Business Goals
Getting users to engage with the content and ultimately open an account, required understanding their priorities, wants and needs. Using the data we had gathered during testing, I crafted each section to respond to the issues found on the page and the opportunities to improve.
- To keep language relatable I got rid of stuffy banking terms and added more descriptive phrasing.
- Users can take a quiz to help them choose an account. Testing proved this feature very valuable to users, so I made this very prominent on the page.
- I simplified the user journey by removing extra steps in the account opening flow and making this page a hub for exploring all the accounts have to offer.
- To decrease confusion and follow common design patterns, I reordered the accounts from highest to lowest monthly fee.
- In the content, I made sure to include the top features and details that users asked for (if we offered it of course). Now, our customers will have a better idea of what we offer and the benefits of opening an account with us.
👩🏾🔧Personas
How I use personas:
- I keep them based on real research, not guesswork. I take our interviews and surveys and create a persona out of the real people we talk to.
- I use them as a guide to keep the business goals aligned with the user goals.
After careful analysis of our research, I identified these two main architypes. One who prioritizes proximity as a factor in choosing a bank, the other who prioritizes the mobile and online experience.
Here we have Emily and Alex, encompassing our two major target users. As you can see, we have very different people going on here. The challenge was to make sure both of their needs and goals were represented in the design.
✏️ Wireframes
The early stages of the wireframes are focused on the account card interaction. It was important to get this part right, because it’s what the users engage most with. After starting with several options and sketches; we narrowed in on two final designs. These best showcased the account highlights and allowed for easy “browsing” of each card.
✨ High Fidelity
I used Framer for the prototypes so I could get these out rapidly to test with users. Framer allowed me to easily get the interactions on the account cards accurate and smooth. Our tester base was able to use the prototype with fully functionality.
🖥 Desktop
https://next-writing-430204.framer.app/
📱 Mobile