Behind the scenes of the BAO website redesign

Rachel Lemieux, Art Director
Posted on Jul 21, 2022

Take a look behind the scenes at Imarc’s process for redesigning the new By Appointment Only (BAO) website.

Imarc redesigned the By Appointment Only (BAO) website to create a more engaging experience for users with a modern and timeless aesthetic. The design discovery was customized to support BAO's target audience by improving user experience (UX) and delivering content more intuitively. The updated website is designed to capture new leads, attract top talent, and convert customers and prospects with a revamped and simplified sales process.

Adjusting the process

Imarc began the creative phase of the project with a creative kickoff. During this kickoff, Imarc and BAO reviewed the current brand and explored benchmark websites. At this time, BAO expressed a desire for new photography, iconography, typeface, and brand color usage.

Imarc then hosted a strategic image discovery session to understand how BAO’s competitors utilize imagery and review image inspiration. We used these insights to determine a plan that would set BAO apart while aligning with industry best practices. These learnings also supported the next step of the process: image compositions.

Imarc developed three unique image directions, which were presented in the form of web compositions to showcase the images in action. Each design approach explored a unique take on the BAO brand and image styling for the new website.

Imagery approach one

The first option explored black and white photography mixed with color block overlay treatments. This approach provided a fresh, timeless look that was bold and crisp.

BAO - Imagery Approach 1

Imagery approach two

The second treatment utilized city skylines and motion blurs mixed with overlay treatments. This style emphasized action and energy while remaining practical for the end-user.

BAO - Imagery Approach 2

Imagery approach three

The third option, which was chosen by the client, explored cut-out photography techniques with shape overlays. This approach was energetic, bold, and created a connection with the audience by using people imagery.

BAO - Imagery Approach 3

A refined approach

Once the image direction was selected, Imarc began exploring an approach for the homepage design to support both desktop and mobile use. Solidifying the look and feel in the image exploration stage helped to execute rapid review cycles. It also ensured that the client and creative team were on the same page for the overall look and feel of the design.

Utilizing the new image approach, bold color blocks, updated iconography, and a new typeface, Imarc elevated the BAO brand while still maintaining its integrity.

BAO - A refined approach

Key areas of improvement

Along with enhancing the look and feel of the BAO website, Imarc focused on additional areas of improvement to further enhance the website.

Focus on accessibility

ADA compliance is paramount in today’s world – check out a recent blog post we wrote about making the web a better place. Imarc ensured that all colors used on the BAO website comply with WCAG guidelines, creating a seamless experience for all users.

Attracting top talent

A new careers section helps BAO attract top talent and showcase their on-the-job training opportunities and company culture. The new section enables secondary navigation, creating a seamless user flow through multiple pages. New branded imagery, iconography, and designed modules help portray the content in a clear, clean manner.

BAO - Attracting top talent

Clean user experience

The BAO site included some key UX elements such as a sticky navigation, animations on page load and on scroll, as well as robust resources and blog sections with filtering capabilities.

Featured work

See more behind the scenes details of this project on Dribbble.

Learn more about Imarc’s work here. Looking to update your website? Let’s talk!

More Thoughts