UX Update: New Race Wizard

We have released a major update to our race wizard.

Here is a quick overview of what was included in this update:

1. Refresh the look of the wizard with a clean modern design.
2. Improve the usability and flow of the wizard. We scrutinized each UI element for improvements.
3. Remove elements that are not needed in the wizard.
4. Introduce common design elements that we have established in other parts of the platform.
5. Make the wizard more informative and fun. We did this by re-wording some of the helper text and by adding some fun illustrations.
6. Improve the payment section. As one of the more complex sections of the wizard, we cleaned up the forms and added updated helper text.
7. Compatible with mobile and tablet devices.

Let’s look at a few highlights of the redesign:

Fresh new look

The first thing you will notice is an attractive new design that incorporates our gradient in the header. We even included a magic wand!

There is also a new design for the wizard pagination. The pagination is responsive and has a unique space saving layout just for mobile devices.

All the form elements have been redesigned with a new modern look.

Icon Titles

The new icon titles are designed to make it easy to identity each main section. This is really helpful with long sections of content like the registration periods. The icon is visually pleasing and informative.

Event Tile

The event tile design should look familiar. It is used in our registration application and on our new race template .

The Registration Period Plank

On the registration page we have introduced the “Plank”. This is a new design element that visually organizes information. The plank is easy to scan through and works well on mobile devices. The plank works great for the registration periods and expect to see it more throughout the platform.

Payment Section

We made some big improvements to the payment section. First we added fun and informative helper text. Second we went through each section and re-organized the forms for readability and usability.

More/Finish page

We added a new congratulations message with a fun illustration. Also included is the ability to view your race page via a large button. This page will be getting more updates soon.

Copy Event & Renew Event

The design of the copy and renew pages has been updated. The interface has been updated to match the wizard and the settings section has been hidden to help simplify the page. In addition the instructions on these pages have been updated to be more concise.

Back to Dashboard Link

When you are editing your race, we have added the “Race Dashboard” link to the header. Clicking this link will take you back to your dashboard. You can also use the avatar menu on the far right to access all your account related links.

This is just the first phase in redesigning the race wizard. In the coming months we will be making more improvements. Stay Tuned.