Building a register system from scratch

Role
End to End UI/UX Design
Interaction Design
Design System
Period
7 months
(Sep 2019 - Mar 2020)
Tools
Sketch
Team
Frontend - Boris Lu, Po Chuan Chen, Denny Cheng
Backend - Elvis Lee
Product Manager - Rebecca Zheng

Background

There are at least 50 bicycle races in Taiwan every year, with one to two races almost every weekend. However, there are many unmet needs in the traditional process from registering to participate to riding on site for cyclists.

Finding what users need

The first thing we did to create the product was to understand our users. In the research process, we needed curiosity, empathy, and objectivity. In the process of understanding the registration requirements, we conducted several interviews.
We found that when cycling enthusiasts register for bicycle races, they generally have several expectations:

1. I would like to register with my friends and participate as a group.

Usually more than 50% of the cycling enthusiasts register in groups for two reasons:a) Send materials to the same address to save on shipping costs.b) Need to help those unfamiliar with the digital registration system to register.

2. I want to know the distance, slope, route map, and souvenirs of the event before the event.

Before participating in an event, users evaluate not only the price and time, but also the details of the event and related souvenirs of the event.

3. I want to know the situation of my friends and where I have ridden during the ride.

When the distance of the event is longer, friends usually do not ride together the whole way, but rather meet at a specific gathering point, so it is also important to know the location of friends.

With these findings, we set our goal to design a system for cycling enthusiasts from registration to riding, and integrate it with the platform's existing account to help cycling enthusiasts maintain a complete experience from registration to riding.

Design result

One registration for all

During the design, we specifically designed the registration logic for groups and individuals to ensure compliance with the habits of cycling enthusiasts when registering. In addition, to prevent ticket vouchers from being purchased at the same time, we also added a "order retention time" to ensure that each order can be successfully completed.

Suitable for every device and every language

In order to ensure that all carriers can present an easily understandable registration process, we designed a responsive website (RWD) and made detailed adjustments based on the usage habits of different devices and languages to ensure that various devices and languages are clearly and comfortably displayed.

Effective communication

On the event page, we ensure that all information is what the user needs, from the initial event page, to the process of filling in data in the middle, to the payment page and order details later, all through discussion and verification.

In addition, to help transmit messages and subsequent searches, we also designed three different transactional emails to ensure that registration information is effectively transmitted to participants through different message channels.

Maintain a consistent design system

During the process of establishing the registration process, in order to maintain interface unity, I established a design system for fonts, colors, grids, input boxes, and various component states.

Iteration

Validation and evaluation

To understand whether the design meets the needs and thoughts of the organizer, we conducted 5 usability tests and iterate our product based on the testing results.

Step1

We moved the contact information from the first step to a single page after filling registration information. This not only expedites the registration process, but also helps user to understand the concept of contact person.

Step2

Instead of letting the shopping cart appear on the screen and occupy the browsing area in every registration step, it would be better to display proper information in front of the user when needed.
Therefore, on mobile phones, the shopping cart will no longer appear in each step, but rather at two times: before entering the registration data and on the payment page, allowing the user to focus on other steps and be reminded when needed.

Step3

We found that the placeholder is not a very effective way to communicate, because the filled text would replace the placeholder. Therefore, we decided to use captions to display information.

Step4

I also redesigned the step indicator and the timer for better readability, reducing information noise.

Impacts

App use rate after using the registration system increased 34%

En
繁中