Flagstar.com redesign

View this project

At the beginning of 2017, Flagstar Bank embarked on a journey to completely redesign their website. They had recently undergone a branding overhaul, and needed a site to reflect the new image. As one of two front-end developers on the company’s internal web development team, I was very involved in the design process, working with internal marketing partners and a creative agency to flesh out the direction of the new site.

Every step of the way, I was available to answer any questions the designers had and give technical feedback before the development work even began. I was a huge asset to the designers in terms of creating responsive designs. I’d frequently create their designs in code and give demos on how they’d look from phones to big desktop monitors. From there, we’d be able to collaborate and talk out how they envisioned their layouts.

Another big concern of the project was becoming WCAG AA compliant. Previously, I hadn’t taken nearly enough time to understand the intricacies of creating websites that are easy to use for everyone, not just your average user persona. Over the course of the project, I’d learned that accessibility can’t just be a box you check when all is said and done. You have to be mindful of the many ways that people struggle to use the web (hint: it isn’t all just blindness). Things like color contrast, proper labelling, logical keyboard navigation and more are typically taken for granted by the average person, but they can literally be the difference of whether or not someone is able to access their financial information online. Moving forward, accessibility will certainly be at the front of my mind as I continue to build inclusive experiences for people of all types.

This project also coincided with a relocation, where I was lucky enough to be granted permission to work remotely. This transition was seemless, as two of our seven team members already worked from across the country, and the hired agency was from another state as well. We didn’t skip a beat, and found that I was even more productive when I made the switch.

Technologies, skills, tools, and more:

  • HTML5
  • CSS3 via LESS
  • Responsive web design
  • Adobe Experience Manager
  • WCAG AA Accessibility
  • Zeplin for creative assets
  • Full-time remote worker
Flagstar navigation on desktop
Desktop navigation
Flagstar navigation on mobile
Mobile navigation
Flagstar navigation with hero banner
Navigation and hero banner
Flagstar mortgage overview page
Mortgage overview page
Flagstar product card grid
Product card grid
Flagstar frequently asked questions template
FAQ template
Flagstar bookend component
"Bookend" component for related pages
Flagstar product comparison table
Product comparison table