MIDFLORIDA Credit Union
MIDFLORIDA Credit Union
Embedded Files
Case Study: Website Re-platforming & Redesign
Redesigned MIDFLORIDA’s banking website to improve navigation, empower content teams, and enhance user engagement.
Timeline: Jan 2024 - Aug 2024 (8 months)
Explore the redesigned live website: MIDFLORIDA.com
Role
Role
UX Designer | Information Architect
Cross Collaborators
Cross Collaborators
UI Designer, Digital Strategist, Business Analyst, Technology Lead, Developers, and QA
Tools
Tools
Figma, FigJam, Miro, Screaming Frog, DynoMapper, Excel
The Challenge
The Challenge
Their existing Kentico platform was restrictive, making content updates cumbersome and limiting digital growth. Our goal was to migrate their website to Sitecore, modernize the design, and create a lead-generating, conversion-focused platform—all while ensuring their small marketing team could independently manage content updates without relying on IT.
What Wasn't Working?
What Wasn't Working?
Poor Navigation & Search – Users struggled to find relevant information quickly.
Limited Lead Generation & Engagement – The site wasn’t effectively driving conversions or customer education.
Lack of Self-Service Features – Users faced difficulties accessing tools for seamless support.
Restrictive CMS – Kentico was non-intuitive, making content updates inefficient for the marketing team.
Unclear Content Governance – Inconsistent content management led to inefficiencies and outdated information.
How Might We…?
How Might We…?
Redesign the site architecture and navigation to improve discoverability and usability for users.
Incorporate interactive and conversion-driven elements to make the site a more effective business tool.
Enhance self-service features to allow users to find information and complete tasks without requiring customer support.
Implement a more flexible and user-friendly CMS (Sitecore) that empowers the marketing team to manage content independently.
Establish clear content governance to maintain consistency and efficiency in site updates.
Before: Home Page, Search Results Page
Before: Product Overview Page and Product Detail Page
Before: Auto Listings Page, Resources Landing Page
Discovery
Discovery
Stakeholder Interviews
Stakeholder Interviews
To uncover business needs and user challenges, we interviewed stakeholders across departments, including Retail, Lending, Mortgage, Marketing, and Business Intelligence. These discussions helped us identify key pain points with the existing site, align stakeholder expectations, and define opportunities for future enhancements. Our focus was on improving site navigation, content management, and governance while ensuring the new platform supports business goals and a seamless user experience.
Key Takeaways
Key Takeaways
Engage and Connect
The digital experience should be engaging and accessible to users of all ages. A visually dynamic and thoughtfully structured interface will make content more inviting and digestible.
Guide and Enable
Users should effortlessly find what they need—whether through intuitive navigation or robust search functionality—allowing them to self-serve with ease.
Empower and Govern
With a lean marketing team, MIDFLORIDA needs a user-friendly content management system that allows for seamless updates while maintaining governance over site changes.
We expect the website to function like a sales funnel—allowing users to self-service just as they would inside a branch.
– MIDFLORIDA Stakeholder
Affinity notes from stakeholder interviews
UX Audit
UX Audit
The audit involved reviewing the sitemap, evaluating core experience attributes, and identifying areas for improvement. While gathering stakeholder insights, I conducted a UX audit to assess the current state of the website, focusing on
Site structure & navigation
CTAs & wayfinding
Page hierarchy & purpose
Search & filter functionality
Components & UI elements
Visual design
Mobile responsive design & accessibility
Component Audit
Template Audit
UX Audit Recommendations
UX Audit Recommendations
Content & Navigation
Conduct a qualitative and quantitative content audit to assess relevance and effectiveness (Keep/Kill/Edit exercise).
Define Jobs to Be Done (JTBD) and behavior archetypes to inform page hierarchy and navigation.
Implement Conversion Rate Optimization (CRO) strategies to improve engagement and conversions.
Conduct tree testing post-MVP to validate and refine website navigation.
Messaging & Copywriting
Refine content hierarchy based on user priorities, ensuring clarity and relevance for target audiences.
Improve CTA microcopy, which is currently too generic, to enhance conversion potential.
Page Structure & Hierarchy
Prioritize audience needs when structuring content.
Address missed conversion opportunities caused by low visibility or ineffective placement of CTAs.
Improve content organization to make information more accessible, clear, and useful.
Visual Design
Enhance page structure and content hierarchy to improve visual prominence.
Incorporate video content to create engaging learning experiences.
Ensure consistency, diversity, and inclusivity in photography across the site.
Update photography style to feel more authentic and personable.
UX Features & Enhancements
Implement decision-making tools to assist users in finding relevant products and services, e.g.,
An interactive quiz to guide users to the right pages based on their needs
Product comparison charts and tables for easier evaluation.
Enhanced calculator interface to support financial planning and decision-making.
Improve hand holding features, particularly for youth accounts, by providing:
Clear guidance on what users can and cannot do.
A support dashboard to encourage self-service and streamline customer assistance.
Resources for financial literacy.
Deliverable: Capstone Presentation with insights and recommendation
Deliverable: Capstone Presentation with insights and recommendation
Discovery & Research phase concluded with a capstone presentation summarizing key insights from stakeholder interviews, the UX audit, technical interviews, and audits, as well as the feature matrix, timelines, and roadmap. I played a key role in this phase by leading the UX audit section, where I presented critical findings and actionable recommendations to enhance the user experience.
Below are a few slides showcasing my presentation skills and UX audit findings.
Understanding Audience Groups and Their Jobs To Be Done
Understanding Audience Groups and Their Jobs To Be Done
Information Architecture: Sitemap
Information Architecture: Sitemap
With research insights in hand, I mapped out an optimized site structure using Screaming Frog, DynoMapper, and client analytics.
Result:
A streamlined sitemap with clear user flows, improving wayfinding and content discoverability.
A logical, user-friendly site structure that set the foundation for design and development.
Tools/Resources Used:
Screaming Frog Crawl data
Dynomapper
sitemap.xml
Spreadsheet
FigJam
PDF
Deliverable: Proposed Sitemap in PDF format for client collaboration
Deliverable: Proposed Sitemap in PDF format for client collaboration
Approved Sitemap
Client Feedback and collaboration
Old Sitemap Audit
Design Phase
Design Phase
Batch Plan
Batch Plan
To manage the tight timeline, we implemented a batch plan—breaking down templates and components into structured design sprints.
Reason why this approach worked:
It helped balance stakeholder feedback while keeping development on track.
Prioritized pages, incorporating a mix of high impact templates and some lighter-lift pages, ensuring steady progress without overwhelming the team.
Streamlined the handoff process, ensuring a smooth transition from wireframes → UI design → development.
Insights from UX audit, and approved sitemap informed batch plan for design and development phase which was reviewed with internal team, BA, technology lead and client team for final approval.
Design Direction
Design Direction
While I focused on developing UX Batch 1 templates and components, the UI design team worked on defining the design direction and finalizing style guides based on the client's established brand guidelines.
Establishing a strong design direction is a crucial step in the UX/UI process. It involves creating initial visual concepts that define the aesthetic and tone of the website, giving stakeholders an early preview of the style and user experience. The client plays an active role in this phase by prioritizing key pages for design explorations and style boards.
By presenting two distinct yet cohesive directions to MIDFLORIDA, we provided the client with options, fostering a sense of collaboration and choice. Our design directions typically showcase color palettes, typography, button styles, icons, and sample components, along with page layouts to help the client visualize how these elements come together in a real-world context.
Since UI Designers were not part of the discovery phase, I collaborated closely with them, providing essential context, including the page flows and initial wireframes for selected pages.
Brief Overview of Discovery Phase
Audience groups & behaviors, stakeholder interview insights, and business goals.
Trend Scraping – Product Pages
Our stakeholders provided a list of competitors, highlighting preferred and disliked features and design elements. In addition to reviewing these, I analyzed best practices from leading national banks. These insights informed my approach throughout the UX wireframing phase, ensuring that we incorporated industry standards while aligning with stakeholder expectations.
User flow and page structure
Quick way to help UI designers understand page structure and hierarchy of the shortlisted product pages to guide design direction. The pages for design direction were prioritized by the stakeholders.
UX Design: Bringing it all together
UX Design: Bringing it all together
Once the sitemap & batch plan were approved, I led the wireframing process.
Defined Jobs To Be Done (JTBD) and content priorities.
Got client alignment using Page Description Diagrams as they are easy to digest
Collaborated with stakeholders to refine page structure.
Created low-fidelity wireframes and iterated based on client feedback
UI Hand-off: Wireframes
UI Hand-off: Wireframes
Wireframe - Header Navigation (Desktop)
Wireframe - Header Navigation (Mobile)
Wireframe - Footer Navigation
Wireframe - Homepage
UI Design
UI Design
The final template and component designs aligned with MIDFLORIDA’s brand guidelines while incorporating UX best practices.
Final Deliverable: UI Designs - Navigation (Desktop & Mobile)
Final Deliverable: UI Designs - Templates (Desktop)
Final Deliverable: UI Designs - Templates (Mobile)
Outcome & Impact
Outcome & Impact
Optimized Navigation – Content was reorganized to make key information easier to find, improving overall usability.
Refined Content Hierarchy – Structured around user priorities, ensuring critical information was prominent and digestible.
Faster Content Updates – Empowered the marketing team to update pages independently, reducing reliance on IT through site structure, templates and components.
Improved User Experience – Streamlined navigation and enhanced CTAs led to higher engagement and better user interactions.
Stronger Lead Generation – Integrated industry best practices, including clearer CTAs, strategic content placement, and improved visual hierarchy.
UX Features & Enhancements – Introduced product comparison charts to support informed decision-making. Enhanced self-service support by refining the resources
Challenges
Challenges
MVP Scope
MVP Scope
The MVP scope primarily focused on replatforming, with user experience considered as a secondary priority. Managing client and technical team expectations around user experience was one of the biggest challenges.
Tight Timeline
Tight Timeline
Due to a tight timeline, there was no dedicated wireframe presentation for the client. Instead, we reviewed wireframes internally, aligning them with client requirements before each batch. Wireframing and UI design progressed in parallel, and UI designs were presented to the client.
This approach often led to additional client requirements emerging later in the process. Accommodating these changes within the compressed timeline was a significant challenge, but as a team, we successfully navigated it.
Loss of Resource
Loss of Resource
We lost our Business Analyst (BA) mid-project. As a UX lead, I stepped in to take on BA responsibilities—leading business requirement-gathering sessions and collaborating closely with the technical team throughout the development phase.
Key Contribution
Key Contribution
Led UX audit & contributed to stakeholder interviews to inform design strategy.
Created an optimized site architecture for better content discoverability.
Designed page structure, content hierarchy, and wireframes to improve user experience.
Aligned UX, UI, and development teams through structured batch planning.
Next Steps
Next Steps
The site launch was just the beginning—ongoing data tracking and user feedback would drive future optimizations. Our team identified additional features that couldn’t be prioritized in the MVP phase. Moving forward, personalization and Customer Data Platform (CDP) integration were key milestones to enhance user experience and engagement.
Proposed Features Post-MVP
Proposed Features Post-MVP
Regional Hub Pages – Boost local engagement with location-specific content.
Customer Review System – Display user-generated reviews to enhance trust and credibility.
Publix Presto ATM/Branch Locator Enhancements – Improve usability and accuracy of the branch & ATM finder.
Product & Blog Recommendation Features – Personalize the experience by helping users discover relevant products and resources based on behavior.
Interactive Quiz – Help users navigate to the most relevant pages based on their financial goals.
Proposed UX Activities Post-MVP
Proposed UX Activities Post-MVP
Tree Testing – Validate and refine the navigation structure based on real user behavior and feedback.
Conversion Rate Optimization (CRO) Framework – Define and implement testing strategies to improve site performance and engagement.
Final Thoughts
Final Thoughts
This project was more than just a CMS migration—it was about transforming MIDFLORIDA’s digital experience to serve both users and business needs. By aligning UX, content strategy, and development, we created a modern, scalable, and user-friendly banking website that empowers both customers and content teams alike.
Other Case Studies
Other Case Studies
Google Sites
Report abuse