Project Type: UX Research

The local UX community has a ton of respected talent that fly all over to give talks, yet there hasn’t really been anything for locals to access to such high caliber knowledge and insights. The Triangle UXPA decided to put on UX Y’all, a conference to tap into the local potential while providing residents access to phenomenal insights and experience.

Since this was our first time having a conference, Team UX Y’all faced a number of challenges, including building a website to handle all the obvious and unknown needs that a User Experience conference can bring.

It was clear from the beginning that the website needed to cover a lot of bases: promote the conference and presenters, attract sponsors and UX professionals. On top of that, it needed to provide necessary information such as travel info, schedule, social media contacts and a code of conduct.

How should all of that be captured and presented? How to make sure the conference conveyed the right blend of southern hospitality and professionalism?

Because of limited time and resources, we kicked things of by researching existing, successful conference websites to use as inspiration and apply the best features to our site. We then settled on a color scheme that fit the vibrant nature and welcoming atmosphere we were striving for.

I then applied Information Architecture principles to draft site map, which evolved over time. Since the site seemed pretty simple, we decided it would be too much effort to install a content management system like WordPress. Instead, I opted for flexing my Bootstrap 4 chops as the framework for speedy development time.

I utilized Figma to create low and high-fidelity mockups that were iterated upon and tweaked until approved by the team. You can see the entire project in Figma here. From there, the website got progressively enhanced, dictated by the changing needs and fluctuating time requirements.

We needed to display speaker bio and lecture info in a way that is logical and easy to navigate. We also wanted to minimize the number of pages to manage as well as duplicate content. Even more interesting was that some lectures had more than one presenter.

My first crack at the this was to list all of the lecture info followed by the speaker bio within a modal on the Presenters page as shone below. This also allowed for co-presenters and links to other speakers in a tidy format.

At the time, this approach worked well since there was a push to have that information live on the site to generate interest in the conference. yet the schedule hadn’t been created yet.

Later on when the Schedule page started taking shape, I had just pointed all of the talk and presenter links on over to the presenter’s modal. This presented another problem: it made it look like the Schedule Page had navigated someplace unexpected when the modal was closed. Bad for user experience, bad impression for Team UX Y’all.

After the inconsistent usage pattern was discovered, I tackled the issue be splitting up the modal’s information: presenter bios on the Presenter page and the talk descriptions on the Schedule page. I included links on to the new lecture modals from the presenter modals and vis versa. I then made sure the two sets of modal’s looked distinctly different. This was needed to minimize confusion and to notify users that they have navigated to another page/modal.

I captured 6 different iterations of the UX Y’all’s home screen before we achieved the final design of the site.

1. Initial design: color scheme good and layout ok, but application of colors not so good.
2. Version 2: layout great, but testing color application and logo versions
3. Version 3: Layout, colors and logo selection settled! Testing different font pairings.
4. Version 4: Fonts, Layout, Colors and responsive sizes adjustments settled!
5. Version 5: Initial testing of sponsor logo visual hierarchy.
6. Final design: updated logo hierarchy.

Even though I used the final layout for the creation of the home page, the different sizes and shapes of the sponsor logos still needed quite a bit of tweaking and finagling to get everything just right.