HCSS Events Page

This project is a redesign of an Events page for Heavy Construction Systems Specialists.

The problem
The current HCSS events page was outdated and and not user-friendly. The heat map of the page showed that people spent most of the time on the very top of the page, and didn’t scroll down to learn more about the types of events shown.

Here you can see the previous page design:

My role in this project
I was in charge of designing the main page, as well as creating a high-fidelity page prototype.

How I came up with the solution:
The client wanted to make the page look like an event page of another construction-related company. It had a different structure than HCSS’ events page, mainly because it used lots of imagery, and a different event filter system. I wanted to create a solution that utilized HCSS branding and incorporated a new page structure. I also wanted to fix the top navigation that was busy and hard to read.

How my solution solved the problem
The final design thar got approved eliminated the confusion of navigating the page. The images help convey the type of event the users would be attending, and removing overlapping photos from the nav section made it very clear what types of events HCSS was offering. Furthermore, adding company logos to each event card helped clarify that some events were attended by HCSS, and not hosted. This was a very important detail for the client, and we wanted to be clear about the company's role in the event.

High-fidelity web and mobile prototypes of the final product:

Challenges I faced
One of the bigger challenges in this task was miscommunication between me and the client. After presenting the first prototype, I learned that they still wanted to maintain the same structure for the website, and just needed an updated navigation bar and a page layout that had images. In the end, I ended up scrapping the first design, and getting back to a more minimal page redesign. Now, there were no filters and no tags on each event listed chronologically. Instead, the page was broken into sections of each event type: conference, webinar, classes, and golf tournaments. A full list of events could be viewed either by clicking a button or by horizontal scroll.

Here is the first draft that got rejected:

Results
After a few months of tracking the activity on the Events page, we learned that the engagement has increased by 13%. On top of that, the heat map for the page was now mostly red and orange, showing that the users were encouraged to scroll down to read about the events.

Live page can be viewed here.