Overview
One of Macmillan's biggest fundraising product was being moved over to the same platform as the main Macmillan website. The website already had the functionality to display events on a landing page, which were then connected to an event detail page, however Mighty Hikes events have two different lengths per location and they need to be on the same page for marketing purposes.
The goal
Display details of two hike lengths on a Mighty Hikes event details page.
The challenge
The biggest challenge for this design was working with the existing grid system on the event details pages. The existing page design (designed by a 3rd party agency) sits across 7 out of 12 columns on desktop, so it doesn't leave a lot of space to work with. In order to maintain consistency across the site, I wanted to keep the same grid system so that the event page with 2 events would look just like an events page with 2 events while still keeping the sign up buttons above the fold. On mobile, the biggest consideration was keeping the design compact enough that at least the first sign up button and the second title visible.
An existing event summary with 1 event details section
The solution
The solution I came up with was to treat the event summaries like cards. On mobile, the two summaries stacked on top of each other and on desktop the two summaries sat next to each other, with the details stacked in one column instead of the two columns that the original event summary has.
Desktop and mobile - two event summaries
Results
Overall, the simple change to the design allowed the Mighty Hikes website to gain the functionality it needed in order to maintain the level of functionality that the original platform had, while keeping consistency with other Macmillan events with only one event details section.