Project Overview
The Maricopa County Treasurer’s Office website was in need of a modern refresh. The old design felt outdated and lacked engagement, so our goal was to create a more visually appealing and user-friendly homepage.
Project Goals
• Update the homepage with a modern and clean aesthetic
• Improve user engagement by introducing video backgrounds and motion graphics
• Provide multiple design options for stakeholder selection
• Maintain accessibility and usability for a broad audience
• Ensure the "Pay Now" button is highly visible for quick access
My Role
As the UI/UX designer on this project, I was responsible for:
• Conducting a design audit of the existing site
• High-fidelity homepage designs (Wireframes were already completed)
• Incorporating a video background and motion graphics to enhance visual interest
• Presenting multiple homepage styles for feedback and selection
• Strategically placing the "Pay Now" button for maximum visibility
Design Solutions
1. Video Background Integration
Added subtle motion to create a more dynamic experience
Balanced usability by ensuring text remained readable
2. Prominent "Pay Now" Button Placement
Given its importance, we made sure the button was:
Above the fold for immediate visibility
Styled with high contrast to stand out
Repeated in key areas for easy access
3. Modern Layout and UI Enhancements
Used clean typography and updated color schemes for a professional look
Improved content hierarchy for easier navigation
4. Multiple Design Options
Provided various homepage layouts to explore different visual directions
Ensured each option aligned with usability best practices and branding
Original Homepage Design
Final Outcome
The redesign successfully modernized the Treasurer’s Office homepage, offering a fresh look while maintaining clarity and accessibility. The "Pay Now" button was given a highly visible placement, ensuring users could easily complete their transactions. The video background helped make the page more engaging, and the multiple design choices allowed for informed decision-making.
Style #1
Style #2
Style #3
Style #4
Final Selection
With motion graphics added