Macmillan Cancer Support
Macmillan Cancer Support asked me to redesign their fundraising events online experience, refining the pages’ designs, expanding the search functionality, and making the whole thing mobile friendly.
Sketching, user journeys, wireframes, low-fidelity prototypes, high-fidelity prototypes, user testing, Axure, Agile.
The experience of looking for a fundraising event to take part in begins here, on the events search page. This is the final design, following months of research and iteration.
Fundraising events search
And here's the same event list on mobile. The filters collapse to save space, but are just as functional as on desktops and tablets.
Events search on mobile
Here you can see the mobile filters open. The design is responsive, but little accommodations are made for mobile users. Note for example that each filter indicates which options are currently selected, so the user can review their selections easily, without having to drill into and out of several menus.
Events search on mobile, filters menu
The desktop wireframe that preceeded the designs. One major improvement was the ability to drill down multiple levels on the event type filter while keeping it managable.
Events search desktop wireframe
Another major goal was creating a design that could be applied to similar search pages around the site (e.g. volunteering opportunities), replacing the three different approaches Macmillan had at the time. The map view isn't a hugely important a feature for fundraising events, but could be enabled for volunteering opportunities and support centres.
Events search mobile wireframe
Here's one of the journey maps focusing on the how the filters would dynamically respond to the area users were searching: fundraising, volunteering, or support. In this way, the user benefits from the same experience no matter what they're looking for.
User journeys for three different types of search
The final fundraising event page was designed to highlight the information users told us they cared about the most.
Fundraising event page
And most importantly, be just as great on mobile.
Fundraising event page on mobile
The design template needed to accommodate all the various fundraising events Macmillan run; everything from marathons to tugs of war.
Event page wireframe
The responsive design on mobile leaves the user in doubt as to where the event is, when it is, or how to sign up.
Event page mobile wireframe