— PROJECT NAME
YPO Event Directory
— ROLE
Wireframes
UI Design
HTML Prototype
CSS micro-interactions
— DATE
February 2021
The event directory of Young Presidents Organization’s Connect website helps members find and register for events at the chapter, region, and global level. YPO members are a diverse group of chief executives who want to be informed of the latest innovations in industry, service, and leadership.
YPO events are scheduled for members, spouse/partners, and are also available for the children of YPO members through the YNG program.
The new Event Directory design for YPO began as a mobile-first directive with a goal to make the smartphone experience better.
The original event directory experience was based on a list of horizontal event list items, with each event displayed across the entire screen width. The filtering and sort functionality was located across the top of the screen below the header.
The original event directory design
When I began wireframes for a new experience I made the decision to move towards an event card design so more events could fit on the screen. I built some consistency into the hierarchy of event details inside the cards to make them easy to scan through visually in a grid.
A variety of wireframe card designs
Making a decision
I narrowed down the event card options to three specific layouts. I then conducted some internal and member testing to find out which designs resonated the most with users.
The final card design
Each card contains a simple title, time and date information, an engaging image with a clear call to action, and some audience and attendee details
Now that an event card design was decided on, I began crafting a better mobile experience and testing out how the desktop view would look with various densities of event cards.
I produced high-quality mockups of the event directory interface in Sketch at various breakpoints.
DEMO
I provided developers with a simple coded HTML / CSS prototype of the event directory card design and a responsive layout employing CSS Grid, CSS micro-interactions on hover, and UI behaviors from mobile all the way up to ultra-wide displays.
CHECK IT OUT: Card Interactivity Examples Demo for Event Directory
Special considerations were made for the mobile experience because the UI of the previous event directory didn’t allow for much information to remain on the screen.
Less than 50%?
The previous design left little room for actual event information, with filtering, sort, and filter bubbles taking up more than half of the display area on an iPhone 8 device
The new mobile design makes use of a full-screen modal to house all of the filter/sort functionality. That cleared up the top of the screen so at least one full event card is visible before scrolling.
iPhone 8 375px
iPhone 8 Filter/Sort Modal 375px
Tablet Portrait 768px
Tablet Landscape 1024px
Desktop 1366px
Desktop 1680px