Project Specs:

Client: Stahls’ – the leader in heat transfer vinyl and heat printing technology.
Type: Ecommerce Website
Software: Adobe XD
Role:

  • Team Lead
  • Research
  • User Experience (UX)
  • User Interface (UI)
  • Prototyping
  • Design QA

Project Details:

To redesign the events page to make it more useful and easier to use for users/customers and to increase engagement with in-person and eventually virtual events.

The objective here was to take the Events page, which was not very user-friendly and make it much more helpful for Stahls’ customers.

Events Page Pre-2020 Redesign

Before the redesign, the Events page was not entirely user-friendly. The events all opened in a modal by clicking the “details” text link on the tiles. With an arrow indicator UI pattern, one would expect a drawer-like interaction, but that was not the case. Next-step actions once the modal was open were not always that clear either. So there were several challenges that we faced on this project.

Upcoming-Heat-Printing-Events-Stahls-

Stahls’ Events Page Pre-2020 Redesign

Upcoming-Heat-Printing-Events-Stahls-modal-open

Stahls’ Events Page Pre-2020 Redesign with Event Modal Open

Events Page 2020 Redesign

Some new functionality was built into the new Events page and a user interface (UI) design overhaul. Users can now search through events and use a tag filtering option as well. We also did away with the modal for viewing more details and went with a “drawer-like” option. Overall, the idea with this redesign was to make it easier for users to see what upcoming events were being planned and differentiate the types of events. This was something more useful before the pandemic turned things towards the virtual side of things.

Upcoming-Heat-Printing-Events-Stahls-2021

Stahls’ Events page 2020 redesign.

Stahls’ Events page 2020 redesign — exported Adobe XD comp to show event details.

In addition to the front-end UI changes that were made, a number of enhancements were made to the back-end admin to allow more control and make it easier to manage the events. (Unfortunately, I do not have any screenshots of this to show.)

Future Updates…

In a future update, we were planning to add more functionality into the events for users to add saved events to their account dashboard (another project) or save them to their calendar of choice — Outlook, Google Cal, etc.

sid-events-landing-page-future-features

Stahls’ Events Page – Next Phase Updates.

UI Interaction Demo: