Falcon Wealth Advisors
Role // Graphic Designer | Client // Falcon Wealth Advisors, Hightower Advisors, LLC | Designed in // Figma
Falcon Wealth Advisors is a Kansas-City based financial advisory practice under the Hightower Advisors, LLC umbrella. A forward-thinking and modern wealth management practice, Falcon Wealth Advisors needed a site that matched their core values and brand atmosphere — all while maintaining a clear sense of accessibility and usability throughout the site.
As a Graphic Designer at Hightower Advisors, I was the primary designer on the Falcon Wealth Advisors web redesign project. Across the course of six weeks, the thirteen-page website was completely redesigned, using pre-existing brand guidelines and the powerful capabilities of Figma to craft a detail-oriented, usability-forward website.
Project Kickoff
This project initiated with a design kickoff, where a team of Hightower employees came together to discuss the project and set out on the same page. Katie Boucher, our Web Marketing Lead, had already facilitated a copy revamp with our point of contact from Falcon, and her, myself, and Hightower’s Senior Graphic Designer & Head of Visual Identity, Natalie Kirst met to review content and begin the process of translating a word document full of great copy into an effective visual representation on the future site.
To start off our process, Natalie made our original home page, and I later began working on the subsequent pages of the site. This project began in Adobe XD, but was later transitioned into Figma to take advantage of the more detailed prototyping capabilities and dev-mode opportunities to support our later web-team handoff.
Iterative Process
Iterative processes are critical on any design project, ensuring that the final product has been questioned, modified, and polished into the best possible end product. For Falcon Wealth Advisors’ rebrand, this process existed in the form of weekly iteration cycles.
Each week, our Hightower web design team and a representative from Falcon would meet, showcasing new designs by displaying the interactive prototype in Figma on video calls. Initial feedback would be gathered during this call, the pages to be completed by our next meeting were determined and agreed upon, and then feedback would come in from the overall Falcon team mid-week, after the new designs had been shared.
This process proved to be very effective in moving the project along in a timely and mutually-agreed upon fashion while still allowing for a great depth and breadth of feedback, ensuring their team felt supported, seen, and valued throughout the design process.
Throughout our meetings and design process, we tested different methods of making their new site showcase that they’re an innovative firm set apart from the rest — a core request of the team. At the finish, we decided that the best way to showcase their individuality was to use a design element that isn’t common on financial advisor practice websites, yet supported the overall brand feel of the team and did not detract from the usability or functionality of the site. Testing out a few options, we landed on using a “frosted glass” element throughout the site, utilizing a background blur layer to create interesting, differentiated designs that supported the visual aesthetic and functionality of the site. A first for the design and web teams at Hightower, this frosted glass element was a huge hit with the Falcon team, providing their site the individuality they desired without sacrificing design best practices or conventions.
Reusable Elements
To promote both efficiency in design and consistency on the site, reusable elements are critical in the design process. Whether this be via component assets in Figma for reusable elements like team member cards, buttons, and flip cards or via reused stylistic elements, like the Falcon “swoops” that Natalie designed to use as background elements, these pieces were a crucial part of our design process.
Reused elements: overlap blocks, “swoop” backgrounds
Reused elements: Falcon logo svg bullets
Reused elements: frosted-glass overlays on page summaries & conclusions
Web Handoff
While the web-team handoff happens at the end of the design process, it is a crucial element to consider from the very beginning. Matching the designs to the capability of the web team’s software is critical in ensuring that the prototype is pixel-perfect to the final product, and that promises made from design to the client don’t become problems for the development team later on.
Early on in the Falcon redesign process, the design and web team had scheduled a meeting to review the efficiency of web-team handoffs and how we could best improve this process. Shortly beforehand, I introduced Figma to the web design process, utilizing it in place of the company-standard Adobe Xd due to its more advanced capabilities and impressive interactive prototypes. During this meeting, we considered how we could make the handoff process smoother, ultimately discovering that the web team had to align all content to an 11-column or custom pixel grid. Afterwards, we designed Falcon and all future sites on these pre-set grids, helping smooth over the transition by preventing the issue of the development team having to re-align content to their column/grid system.
Additionally, when utilizing new design elements, we checked-in with our Frontend Developer, Mila Prokharava, the team’s resident expert in custom CSS and special design elements on our websites, for design viability before showing it to the Falcon team. This way, we ensured we did not promise anything that wasn’t possible, and also gave the development team a greater heads-up of complex designs on the horizon.
Ultimately, our web handoff went smoothly, with several team members working on the development of the site, and the design-stage team QA’ing each page before they were marked as complete. With minimal hiccups, the development of the site went smoothly and the overall project was completed on-time.
Completed Product
At the end of the Falcon Wealth Advisors redesign project, we successfully put together a thirteen-page site that incorporated design best practices and new-to-Hightower elements that brought their site to life with an innovative, stand-out feel. The Falcon site is now live, and both a video walkthrough and full-page views are available below.
