Skills: Sketch, Adobe XD, Invision, Figma, Photoshop, Illustrator , Flowmap, Uxpressia, Xtensio, Constant Contact
Role: UX Designer, User Researcher, UI designer, Visual Designer & Interaction Designer
The Problem
The existing experience was complex, inconsistent, had hidden options, and had clumsy UI mechanics preventing users from finding what they needed, specifically on their mobile devices.
The Result
By redesigning the entire digital experience, reconstructing the AI and content strategy, users are now able to easily find answers on their mobile devices as well as desktop. This has resulted in reduced call volumes alleviating the frustrated users and exhausted staff.
The Solution
Final Mockups
Empowering users
Offering an accessible mobile-first experience where they easily find answers. An inviting homepage that’s accessible and has an advanced search feature helping users find information immediately.
Improved User Interface
Mobile-first design making it easy to find desired information.
Easy access to important information
Reduce long wait times and decrease call volume by giving users instant answers to commonly asked questions.
The Design Process
Design and Iteration
User Interface – mobile headers
After a few rounds of sketches these were the top four chosen. Through anonymous voting option D was the most popular.
User Interface – mobile menu
Surveys showed that users could only find part of the information they were looking for. There was also comments about the mobile menu being hard to navigate. These show the top 3 favorites.
A/B Testing – mobile menu
To help narrow the options for menu design, these two prototypes were tested on 9 users. Option A was the clear favorite over Option B. (click on respective link for prototype).
Initial sketches – desktop home
To simplify the home page layout and make it easier for users to find information and answers to their questions. The prominence of search function played a major role in the decision making.
Initial sketches – desktop flow
Once the layout for the home page was decided, I created a few flows to see explore how to minimize clicks.
Information Architecture
Sitemap
The goal was to distill complex information architecture into a simple user-friendly solution. The challenge was to consolidate over 100 pages of information into more concise and mobile friendly format. Starting first with content strategy and establishing four major categories; Account, Loans, Services and About the Credit Union. Secondary objective was to allow users to execute following actions from any page; log-in to their digital banking, search , locate branches/ATMs, make an appointment and being able to contact us.
Wireframes
Home page
Accessible clean layout empowering the user. The design is driven by data of most popular pages visited, heatmap to know here users click the most and event click tracking. Based on human centered design, it’s mobile-first but not mobile only. Users can log in to their digital banking and quickly find information they need.
Inside page
This template is designed for the majority of inside pages including loans and accounts. The main features are, section for promotions, highlighting of the service/ product and answers to most frequently questions asked.
Contact page
Designed to answer most commonly asked questions such as routing number and encourage users to submit queries via email form. Implement SaaS tools to improve member experience to provide answers based on previous user queries.
Landing page
This page is predominantly designed to introduce users to new product and/or services. It will be used as a landing page for external advertising including social media and organic search.
The Research
Quantitative Research - Survey
To get better insights as to the user experience of our existing members, we conducted an internal survey with five questions.
Frequency of Visits
Majority of users visit the LAFCU website on a daily basis, about one quarter visit it weekly.
Finding information on a desktop device
When surveyed majority of users say they find only part of what they’re looking for.
Finding information on a mobile device
When surveyed an overwhelming majority of users say they don’t find what they’re looking for.
Compared to other companies with similar services
All of the users surveyed feel the LAFCU website is average or below average when compared to other companies offering similar products or services.
Purpose of Visit
Most of the visitors visit lafcu’s website to log into their account. Of those who do not, the main purpose is it to get contact information.
When asked which device they use most when online
Majority of users browse the web on their mobile devices.
The Roadmap
Status and Timeline
Currently in the iteration phase and will hand off for implementation on or before Sept 15th, 2020.
Summary
- Mobile-first (not mobile-only) experience
- Enable user to search across all devices
- Self-automate where possible
- Easier to access important information
- Content driven by consumer need
- Designed for all devices
- Eliminating unnecessary UI patterns
- Encourage email as a means of contact
- Accessible (ADA compliant)
The Appendix
Current Site
The Competition
Direct and Indirect Competitors
As technology is driving more self-service options (in- branch and online), both direct (other credit unions) and indirect competitors (banks) must be a considered for the overall digital user experience and customer interaction.
The User
Qualitative research was conducted to gain insights and empathize with our user. Key insights were the difficulty of finding information and the uncertainly of what the process looked like before applying. This left them feeling apprehensive about applying online so they chose to call for help. They were placed on a long hold and after 10 minutes of waiting they hung up.
User Journey
This user journey eliminates the unnecessary ui patterns in the current experience. It helps identify the different ways we can enable the user to achieve their goal as quickly and easily as possible.
Key Insights
Strengths
- Offer tangible benefits to members
- Trusted in the community
- Great reputation
- Captive Audience
- Large % of online user
- Stable platform
- Secure platform
Weaknesses
- Long wait times on phone
- Slow turn-around
- Outdated technology
- No funnel for onboarding
- Lack of continuity in digital experience
- Not mobile-first
- Not optimized for Accessibility