We redesigned the global BBDO.com website and created a template for local BBDO office websites. Another UX Designer and myself led the entire UX design process for this project, and we worked closely with Visual Designers, Producers, Developers and New Business/Marketing stakeholders to bring this project to life.
BBDO.com, the global website for BBDO Worldwide, needed a facelift. Not just a facelift, but an entire overhaul. Its design was outdated and not robust enough to meet the business needs of internal stakeholders, and the needs of current & prospective employees.
*These are screenshots of the BBDO Chicago website, however it's the same template that was used by BBDO.com before the redesign.
The purpose of the previous website was to showcase the latest work created by BBDO offices around the world, however, it fell short of its goal due to 3 main reasons:
We were also asked to assess the value of BBDO's intranet, since they were thinking of redesigning it from scratch. Before we dived into any designs, we began a research phase in order to clarify any existing assumptions and make sure we weren't missing any opportunities.
We began our research phase by identifying our target audience for the website, which included current employees, prospective employees, and potential clients. We were constrained to just one week for user research, so we interviewed current employees and extrapolated what we could for prospective employees, based on their experience going through the hiring process at BBDO (and our very own!).
We set out with several goals for our user interviews with BBDO employees:
We interviewed 15 employees at BBDO's NY office from a variety of departments (such as production, art direction, strategy, development), and synthesized our findings to 3 key personas:
We also found they were unable to easily complete tasks, such as finding a specific piece of news content, or finding the holiday calendar in the intranet. We soon realized the website's redesign would be a much bigger task than previously anticipated. Our next step was to create a list of goals that supported our findings and the needs of internal stakeholders:
Properly addressing our goals and the problems that the previous BBDO.com faced would require re-thinking the entire framework. We began this second phase of our process by creating a site map, so we could align internally on the content buckets and how they're related to each other.
One key finding from user interviews was the confusion around what office was represented by BBDO.com, since it was meant to be a global website but it mostly featured work from the NY office. Our recommendation was to create a standalone website for the BBDO NY office, so BBDO.com could truly be a global site. This led to the creation of a local site template, which we designed to meet the various needs of BBDO offices around the world.
Along with the personas and site map, we had several requirements from internal stakeholders to keep in mind while we designed the wireframes:
With these in mind, we determined the main content buckets for BBDO.com would be "Work", "News", and "Knowledge". We created the "Knowledge" category to meet the internal need for both long-form and short-form blog posts and thought pieces. This effectively supplanted the "Digital Lab" category, since most employees were confused about what the Digital Lab was, and those outside of BBDO were even more confused about it. The "About" section would be pretty straightforward, while the "Locations" page would support the international feel of BBDO.com, allowing users to find contact information for BBDO offices around the world.
The main pieces of content (Work, News, and Knowledge) would be tagged to allow for further discovery & exploration throughout the site. With these content buckets mapped out, we began sketching different iterations of the homepage and the individual "Work", "News", and "Knowledge" pages for both mobile & desktop.
Next, we began creating annotated wireframes to flesh out all the functionality and interaction patterns. My partner and I worked together first on the mobile wireframes, divvying up different pages and features (for example, my partner designed the home page and main menu while I focused on the Locations, About, and Knowledge pages). Below I've included sample annotated wireframes for the Locations and Search features.
Locations
Search
We iterated on these wireframes about 7 times, after many meetings with internal stakeholders, designers, and developers. We also used InVision prototypes to quickly test different interactions and make sure users could find the information they were looking for. This helped us narrow down our features and remove superfluous interactions, like downloading PDF versions of Knowledge content, that users wouldn't actually use.
At this point in the design process, my partner and I split up the remaining duties: she took over designing the CMS, while I took over designing the desktop experience. Below I've included sample annotated wireframes for the same features detailed above, Locations and Search.
Locations
Search
I'm grateful to have formed part of the team that helped bring the new BBDO.com to life. I was lucky to have worked so closely with designers and developers in order to solve problems that came up throughout the process. However, there were two things that would have benefited the project and the overall process:
BBDO.com was just the beginning - the creation of the local site template was quite possibly a more complex endeavor. The first local website, BBDO.nyc, should be launching early next year - stay tuned for that case study!