Event Creation Tool

Creating a corporate event used to mean one long form. I split it into five short steps and added a review at the end.

  • B2B platform
  • UX research
  • Usability testing
  • Multi-step form
  • 2024

01 — Overview

A B2B platform where companies run their own events

Companies use the platform to organise trainings, workshops, conferences and team events for their employees. An organizer creates the event, opens registration and, for paid events, sets up packages and payment terms. Clients said that creating an event was slow and confusing, so I redesigned that flow.

Role
I ran the design end to end: interviews, usability tests, journey maps, the new flow and the screens.
Team
A project manager and developers. We worked out the new flow together.
Constraints
A tight deadline and a small team. There was little time for research and iterations, so I fixed the biggest problems first.

02 — Problem

Clients said creating an event was slow and confusing

The feedback said that something was wrong, but not where. Before changing anything, the company and I agreed to find the exact places where organizers got stuck, and then redesign the flow around them.

Goal for organizers

Create an event without getting lost: short forms with clear guidance at each step, and a registration form that asks only what this event needs.

Goal for the business

Clients who use the tool more, a clearer payment setup for paid events, which bring in money, and a stronger product next to competitors.

03 — Research

Where organizers got stuck

I talked to organizers about how they create events, then watched them go through parts of the old flow. The tests confirmed what the interviews showed.

6
user interviewswith organizers about how they create events
5
usability testson parts of the old flow
4
key problemsP1–P4, listed below

Who creates events

One persona, put together from the six interviews.

Who
The person who runs events at the client company. The title changes from company to company: manager, administrator, coordinator.
How often
A few events a year, ten at most.
What follows
Too rarely to remember the form, so each time feels like the first. The way in has to be easy to find (P1), and there has to be a way to check everything before publishing (P4).

What got in their way

Key problemIn their words
P1The ‘Add event’ button was hard to find.
“It’s not clear how to add a new event easily.”
P2Forms showed every field at once.
“There are so many fields to fill out at once; it gets overwhelming quickly.”
P3There were too many payment options, with no hint which one to pick.
“I always get stuck on the payment options. There are just too many choices, and it’s not clear which one to pick.”
P4There was no way to review the event before submitting it, so mistakes went through.
“I wish I could review everything before submitting. I often worry I’ve missed something.”

How other products do it

I also went through event creation in similar products, at the level of UX, without any numbers. Two patterns kept coming up, and I used both: steps with a progress indicator, and a review screen before publishing.

04 — Journey map

Where the old flow broke, and the new one

Old flow. From the interviews and tests I mapped the old flow in five steps: what organizers did, what they thought, where it hurt and what had to change.

New flow. With the project manager and developers we went through every pain point and drew a new map. The biggest change was the structure: one long form became separate steps, each about one thing. Payment alone became three.

Highlight
Step 01Review event list 02Adding event details 03Completing registration form 04Selecting payment options 05Submitting
What they did View the event list, click ‘Add event’ Fill in name, dates, description, participants Add sections, fill out participant information Choose payment options, add extra items Submit the form without a review
What they thought “It’s not clear how to add a new event easily.” “Too many details to fill at once.” “Too many fields to fill, it’s confusing.” “Why so many payment choices?” “I hope everything is correct.”
Pain point P1‘Add event’ button not prominent enough P2Overwhelming number of fields in one step P2Lack of guidance, excessive details P3Overwhelming options, unnecessary extras P4No chance to review before submission
What had to change Organize the list, simplify the interface, make ‘Add event’ bold and easy to reach Split the form into several steps Give clear guidance, reduce fields Simplify payment options, remove extras Add a final review step

Scroll the map sideways →

05 — User flow

Structure first: one form became five steps

Before drawing screens, I fixed the structure. Each step answers one question: what and when, who, what we ask, what it costs, how people pay. Secondary settings open in dialogs, so the main path stays short. The review closes the loop: every block has Edit, which returns to its step.

Before

PageEvent listP1
One formAdd eventName, dates, description, participants, sections, payment options and extras on one screenP2P3
ActionSubmitNo reviewP4

After

Wizardstepper at the top, Back and Continue at the bottom

Page — Event list
Events with dates, status, payment and departments. Search and filters above the list, Create event at the top right.
Step 1 — Event details
Event name, start and end dates, the last day to register, a description and a cover image.
Step 2 — Registration and participants
Who is registering (employees, managers), whether registration is open, and which groups the event is for.
Step 3 — Registration form
The fields employees fill in when they register. The organizer adds a field, marks it required and drags it into place.
Step 4 — Event packages
Packages with their prices, then coupons, then discounts. Each has its own Add button that opens a dialog.
Dialog — Add package
Name, description, package type, price per month, number of months, and a switch for prorated payments when someone joins late.
Dialog — Coupon
Name and code, discount type and amount, a minimum threshold and a usage limit.
Dialog — Discount
Name, what it applies to, and rules such as “more than 2 participants: $8 off”.
Step 5 — Payment details
Payment methods (credit card, bank transfer, check, cash) and a switch for installments, with the number of payments for each method.
Dialog — Review and confirm
A summary of every step, with Edit next to each block. Confirm creates the event.
Page — Event list
Back to the list, now with the new event in it.

06 — Design system

Built from a few parts

All five steps use the same handful of components, so the flow reads as one tool rather than five forms.

Colour

  • Primary#1E6FEBButtons, links, the current step
  • Ink#1A2233Text
  • Muted#6B7689Labels, secondary text
  • Line#E3E8EFBorders and dividers
  • Surface#F9FAFCTable headers, side panels
  • Info#EAF1FFUpcoming, selected item
  • Success#E3F6EAOngoing, paid
  • Neutral#F0F2F5Completed, tags

Type — Inter

  • Events28 / 600Page title
  • Event packages24 / 600Step title
  • Packages15 / 600Section
  • Annual event package14 / 400Body, table cells
  • Completed12.5 / 500Labels, statuses

Components

Button

One primary button per screen. Back is secondary, Add actions are links.

Text field

The label sits above the field and stays there when the field is filled.

Multi-select

Participant groups
SalesHR

Chosen values show as tags; the cross removes one.

Checkbox tile

For short lists where several options can be on, like who is registering.

Switch

Works at once, no Save. The line next to it says what on and off mean.

Stepper

  1. Form
  2. 4Packages
  3. 5Payment

Done steps are ticked and can be opened again; the current one is outlined.

Status label

UpcomingOngoingCompleted

Three statuses, three colours, the same everywhere in the product.

Filter chip

Dashed until applied; an applied filter shows its value.

Form field row

Full name *Text

Drag the handle to reorder fields; an asterisk marks a required one.

07 — Solution

Screen by screen

Each screen answers one of the problems from the research; the tag shows which.

Start P1

Event list

Organizers see all their events here and start a new one.

  1. 1Create event is the main button, top right. In interviews, people struggled to find it.
  2. 2Status is a coloured label, so finished, running and upcoming events read at a glance.
  3. 3Search and filters sit above the list.
1 2 3

Step 1 P2

Event details

The first step asks only about the event: name, dates, the last day to register, a description and a cover image. Fields that are easy to get wrong get a short hint.

  1. 1Five named steps at the top. Finished steps get a tick and can be opened again.
  2. 2A hint next to Register by says what the date changes.
12

Step 2 P2

Registration and participants

Who can register and who the event is for. Each setting is one control, and the switch says in words what on and off mean.

  1. 1Employees, managers or both: tiles, so both can be on.
  2. 2Registration open or hidden, explained next to the switch.
  3. 3Groups as tags; the cross removes one.
123

Step 3 P2

Registration form

The organizer decides what employees fill in. In the example, full name and ID number are required; the rest are optional.

  1. 1Add field opens a list of field types: text, number, dropdown, long text.
  2. 2Drag a row by its handle to change the order.
12

Step 4 P3

Event packages

In the old form, prices sat among payment options and extras. Now they have their own step with three short lists: packages, coupons, discounts.

  1. 1Packages first, each with its price.
  2. 2Coupons and discounts in their own sections. Each Add opens a dialog, so the step stays a short list.
12

Step 4, dialogs P3

Add package, coupon, discount

Details live in dialogs over step 4. A package can be prorated for people who join late; a discount is built from simple rules.

1
  1. 1Prorated payments: the fee follows the join date.
1
  1. 1Limits stop a code from being shared widely.
1
  1. 1Each rule is a condition and a discount: “more than 2 participants: $8 off”.

Step 5 P3

Payment details

Four payment methods as tiles instead of a long list of options. Installments stay off until switched on, then each method gets its own number of payments.

  1. 1Four methods; pick any.
  2. 2Installments switch on in one place, with a limit per method.
12

Review P4

Review and confirm

Before the event goes live, the organizer sees every step on one screen. Each block has Edit, which opens its step; Confirm creates the event.

  1. 1Edit next to every block returns to that step.
  2. 2Confirm is the only way to publish, so nothing goes live by accident.
12

08 — Prototype

Try the flow

The screens above, clickable. Create an event from the list, open a dialog on step 4, check the review and confirm.

Event list

Click Create event to start.

09 — Results

Faster, with fewer mistakes

In usability tests, organizers created an event in the new flow faster and made fewer errors than in the old one. They described it as simpler and clearer.

−30%
time to create an eventaverage task time, new flow against the old one
−25%
errors while creating onein the same tests

10 — What I’d do next

Show the price while it’s being set

Next iteration P3P4

Registration preview on step 4

On step 4 organizers set packages, coupons and discounts, but they never see the price an employee will pay. I’d add a preview of the registration page next to the form: the chosen package, the coupon applied and the total. The check the review gives for everything else would happen right when the prices are set.

  1. 1The registration page as employees see it, updated while the organizer edits prices.
1

11 — Takeaways

What I’d keep doing

  1. 01Find where it breaks before redesigning.

    Client feedback said the flow was slow and confusing, not where. Six interviews and a journey map pointed to four exact places, and every screen in the redesign answers one of them.

  2. 02Split by question, not by field count.

    I didn’t cut the long form into equal parts. Each step answers one question: what and when, who, what we ask, what it costs, how people pay. That gave the steps a clear order and short names.

  3. 03Keep secondary settings off the main path.

    Package details, coupons and discounts open in dialogs, so step 4 stays a short list and the detail is there only when it’s needed.

  4. 04A small research plan can be enough.

    There was no time for a long study. Six interviews and five tests on the parts that hurt found the main problems. I’d use the same format again for a quick redesign.