B&H Events - Microsites Design

Role: Visual Designer, Project Manager
Product: Event microsites within B&H website
Team collaboration: Events, UX, Dev, Marketing

Depth of Field 2021 event landing page - one of two major B&H yearly events


Background

B&H runs two major photography events every year: Depth of Field - wedding and portrait photography, and OPTIC - nature and adventure photography. These events are large and busy with multiple activities. Traditionally BH had an informative landing page for each event. Its design and maintenance was passed from designer to designer each year.

Challenges:

  • User Facing - Visual clutter and a lack of clear hierarchy contributed to user confusion and affected user engagement.
    A lack of consistency in design from one event to the next affected user loyalty.

  • Business Facing - Lack of transparency, coherency and structure in communication among teams involved. No organized work flow protocol and no documentation to pass on to other teams or designers

Solution:

  • Restructure, redesign and simplify - from single page landing page to a multi page microsite. de-clutter, simplify and prioritize page elements for a more coherent user experience. Visually, maintain clearer brand use and styling

  • Transparency, structured communication and documentation - understanding team roles, opening a dialogue, creating a transparent workflow. prioritizing and organizing my tasks + understanding what’s coming next and what are the possible issues


Mapping AND wireframing

Users informed us via emails, surveys and social media that they often felt confused by the multitude of information on the site and did not understand how to browse through all the content. Along with fellow UX team mates I sketched a simple microsite architecture. The site would continue to be built by designers with some developer contribution. Upon conversation with developers we devised a workflow which would allow me to design in particles which developers would tie together.

Meticulous event project manager Tess Duran and I then continued to wireframe the separate pages and their content to share with stakeholders and the rest of the teams involved. Our focus was user first, making the landing page informative with a clear hierarchy.

OPTIC Architecture (very messy) flow sketch

OPTIC Event Wireframe


Visual Design

OPTIC is all about inspiration and opportunity to learn from established talent. The existing OPTIC design relied heavily on the rainbow logo, but was cluttered and busy with color blocks photos, making the experience for users confusing. It was important therefor to Clean up decorative elements that had no purpose and present clear navigation and calls to action, connecting the separate event pages and the main B&H site.

From left to right the growth and simplification of OPTIC from 2019 to 2021


Project management

As a newcomer to the project it was important for me to understand each team’s POV and create a dialogue with everyone I work with. Every person has a unique perspective of their mission and It didn’t take long for me to understand what’s needed of me and why, and communicate what I need in order to perform efficiently. As weeks went by we improved our work flow - divided work into executable phases, created a shared dynamic task list for transparency and clarity and shared docs. Joint MS teams group and weekly check ins became the norm. I owned my product from beginning to end and communicated with my manager, teammates and stakeholders clearly and reliably, considering our strength and limitations and recognizing weak points to be aware of as the event approached. As we progressed from event to event and landing pages piled up, I started documenting the process for my team - what are the goals, flow, what to expect, who’s involved, etc. I Also created a design library, gathering each event’s brand attributes, style and assets. In 2022 I also started delegating some of the work by Mentoring a junior designer. This proved natural and rewarding - sharing knowledge, support and clear directions. Growing an understanding of how to encourage and not overwhelm while getting the job done was a key takeaway.


Takeaways

What worked Well:
In 2020-2021 We saw a record number of participants, with user growth from one event to the next. Sales were high as well and user feedback via emails and social media was extremely favorable. Stakeholders were pleased with the outcomes and increased the number of yearly events from two to five.
Personal areas of growth as I see them:

  • Owning the product and bringing it from start to finish as the sole designer.

  • Recognizing what I need in order to perform best (short bullet point lists, not long paragraphed emails. Making things simple. Using humor and compassion when things get tense).

  • Building on my tendency to ask many questions and my plain spoken approach I was able to understand better and communicate openly and clearly across teams.

  • It was the first time I created a style guide and I was happy to analyze and document my work to share with my team for the future.

What could be improved:

  • Even though these events kept growing, they were not considered as a part of the site and no user testing was ever done. We addressed pain points that were shared with us by participants, but there is no data that would help us improve user experience.

  • The tool we’ve been using for these microsites is not geared for that task. Ceros is built for single experiences and is not responsive. While it allowed publishing and uploading quickly with minimal developer involvement, it doubled the workload by having to create every page twice for mobile and desktop. It also has very limited add ons and editing tools which makes for an inefficient design process.