Wiggle events calendar

Meeting user needs with Wiggle events

Volunteer model (!)

As Senior UX Designer at Wiggle, I am responsible for developing the user experience of the Wiggle website across all customer contact points. I define the usability and interaction strategy; proposing solutions that promote user needs and take into account business goals, including conversion and optimisation.

When the Wiggle website was setup, selling events wasn’t on the radar. When we did add events to the site, they were treated like any other product, with some key usability issues.

We had the brief to design an events calendar that met user needs over current functionality on the core site

  • Duration and Team: 6 weeks, 1 designer, 2 developers
  • Tools: Pen and Paper, Realtime Board, Twitter Bootstrap, PowerPoint

Discovery and Definition

We started by understanding who we were designing for. By crafting user personas, we were able to start designing for real users and target their motivations, goals and frustrations.

A user persona

Where improving areas of the site we understand the current user journey and the things that users deem necessary.

Mapping out the experience with the UX team
Plotting what is important to users on first visit

Design and Testing

Once I understood more about the user, I started designing iterations of a design. I first sketch wireframes, then bring them into code with Twitter Bootstrap, to communicate with stakeholders my design decisions. Over time, I’ll integrate this with the live CSS to more accurately show how the solution will work.

All the while, I’m updating a Style Guide. Once mature, this will be a simple place to grab code snippets to build a prototype. I want to be able to build a prototype collaboratively with the product owner — demystifying the process. The focus here is speed, iterating early and getting it in front of staff (and users) early on.

Collaborating on some layout ideas

We found at quite early on that date, location and event type were the most important filters. Price was pretty uniform across the events, so we decided to hide that for now and bring it back if needed.

Wire-framing to communicate design ideas. Filters would whittle-down a list of events in a four column grid
Prototype

Development

The designs then went into code, working with Wiggle’s API to power the listings.

We had a few technical restraints to work with, but ended up with a working feature

Retrospective

The first iterations of our work went live just before December 2015, with a view to iterate based on user data over the New Year.

See the feature here.

Show your support

Clapping shows how much you appreciated Ross Chapman’s story.