BDA Website
Project Overview
As a ten-year-old website, BDA’s corporate website was both outdated and off-brand. So much had changed for the company during that time, from updated branding to new high-profile clients to expansion into EMEA markets. We needed to build a new website that both reflected the company’s growth and displayed all the information for potential future clients in an attractive, user friendly experience.
![ux_process_bda_2 ux_process_bda_2](http://www.nmotsinger.com/wp-content/uploads/2021/07/ux_process_bda_2.png)
Execution
The website was requested to have 20+ individual pages, so I began by creating a site map to determine the most logical navigation for the site.
![img_4645_edit img_4645_edit](http://www.nmotsinger.com/wp-content/uploads/2021/07/img_4645_edit.jpg)
![img_4644_edit img_4644_edit](http://www.nmotsinger.com/wp-content/uploads/2021/07/img_4644_edit.jpg)
I then worked with the Marketing and Executive teams to begin wireframing several “parent” page layouts that would be used throughout the site. After the wireframes for the website were established, I began creating the overall look and feel for the website, implementing BDA’s new brand guidelines and focussing on engaging imagery.
![services_layout services_layout](http://www.nmotsinger.com/wp-content/uploads/2021/07/services_layout.jpg)
![services_sponsorship services_sponsorship](http://www.nmotsinger.com/wp-content/uploads/2021/07/services_sponsorship.jpg)
![home_layout home_layout](http://www.nmotsinger.com/wp-content/uploads/2021/07/home_layout-1.jpg)
![screen-shot-2021-09-20-at-4.03.18-pm-copy screen-shot-2021-09-20-at-4.03.18-pm-copy](http://www.nmotsinger.com/wp-content/uploads/2021/07/screen-shot-2021-09-20-at-4.03.18-pm-copy.jpg)
![screen-shot-2021-09-20-at-4.03.52-pm-copy screen-shot-2021-09-20-at-4.03.52-pm-copy](http://www.nmotsinger.com/wp-content/uploads/2021/07/screen-shot-2021-09-20-at-4.03.52-pm-copy.jpg)
Once the layouts and general look approved, I spent the next several weeks designing all the pages for the website, including specifications on animations and how different features would interact.
Upon final approval of the pixel-perfect mockups, I worked with the third party development team and relayed all relevant information so that the final product would mimic the approved vision.
Challenge
Both the executive team and I agreed to use background imagery on a majority of the website pages. I realized this needed to be done strategically in order to preserve legibility and not overly disrupt the background image. I petitioned for a bold font weight to improve contrast and legibility, however, the team wanted to use a thin font weight for the text.
SOLUTION
Understanding that the team was set on their decision, I compromised with the request by adding a darker overlay to the background images and a drop shadow on all text, increasing the legibility. This disrupted the image visibility more than I had hoped for, but the solution pleased the team and still allowed for all necessary components to remain on the page.
Teams Involved
DESIGN
MARKETING
EXECUTIVE
DEVELOPMENT
Result
BDA launched a new interactive website that reflected the full extent of the company’s achievements, the breadth of its clientele, and world-wide influence. With the website being so content-rich, it was designed and presented in a way that made navigation intuitive for end-users.
Shortly after launch, the site was nominated for Best Website Homepage and won both a gold W3 award and bronze Stevie award.
![responsive_template_bda_phone_home_2 responsive_template_bda_phone_home_2](http://www.nmotsinger.com/wp-content/uploads/2021/07/responsive_template_bda_phone_home_2.jpg)
![responsive_template_bda_laptop_home responsive_template_bda_laptop_home](http://www.nmotsinger.com/wp-content/uploads/2021/07/responsive_template_bda_laptop_home.jpg)
![bda_timeline_small bda_timeline_small](http://www.nmotsinger.com/wp-content/uploads/2021/07/bda_timeline_small.gif)
![responsive_template_bda_laptop_agency responsive_template_bda_laptop_agency](http://www.nmotsinger.com/wp-content/uploads/2021/07/responsive_template_bda_laptop_agency.jpg)
![responsive_template_bda_phone_agency responsive_template_bda_phone_agency](http://www.nmotsinger.com/wp-content/uploads/2021/07/responsive_template_bda_phone_agency.jpg)