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 mot very user-friendly. The top navigation section of the page was busy and hard to read, and the event cards lacked any images to go along with them.

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 a user could filter the events by type via a drop-down filter at the top. I wanted to create a solution that utilized HCSS branding and incorporated a new page structure.

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 an exaple of the first draft that got rejected:

What I learned
This project taught me to never rely only on task description without verifying that the client and I are exactly on the same page. If I had scheduled the meeting with the Events team prior to starting the work, not only would I have saved time, but we also would have been able to come up with an even better solution through collaboration.

Live page can be viewed here.