The challenge
The East Bay Dance Center runs as a non-profit organization and provides services such as dance classes, camps and an afterschool program. Parents who are interested in enrolling their kids in a dance class are to enroll in the dance studio's unique membership program where they are required to complete an online registration form. Because I found quite a few problems with the registration process, I took it upon myself as a personal project to improve it.
Problem and Solution
The existing registration process is excessively long and time-consuming to complete; all text fields are crammed onto one page, a plethora of questions are asked, which can be overwhelming to the user, and the site does not properly and strategically organize content. As a result, I designed a four-step registration process that is more visual and engaging in order to make enrollment faster and easier.
My role
UX/UI Designer
Duration
Oct 2021 - Dec 2021
Tools
Adobe XD, Photoshop, Draw.io
Creating a user diagram helped outline how customers will register for a trial class, membership or afterschool program and how the user will navigate the East Bay Dance Center website.
I created three user flows: one for booking a trial class, one for signing up for a membership and one to enroll in the afterschool program. When it came to the step of a user having to choose between three program options, it was challenging to lay out the steps for each one on paper and connect it with the rest of the screens so that it made sense. It took at least ten drafts to finally arrive at my initial user diagram which acted as a solid foundation for my low-fidelity wireframes.
While sketching out wireframes, I thought it would be ideal to create the registration process into a registration form and questionnaire for a quicker, easier and more interactive experience.
I believe a user filling out text fields and answering short questions would be the right combination to complete registration in no more than five minutes. The idea is to gather all necessary information at one time to store in EBDC's database to reduce the number of steps in the onboarding process.
Using the wireframes as a guide, I began to add and refine UI elements to each screen to ensure effective user navigation.
1. Text fields
A registration form needs text fields so that users can input their information. As you can see in my first wireframe, I used this screen as an introduction page with some text fields below. Later on, I decided to separate the two for a cleaner design. The final design for the text fields ended up having added pink stars next to each headline to prevent users from skipping required information and example input text to ensure correct formatting.
2. Pagination
In my early stages of wireframing, I chose tabs to help organize the structure of the East Bay Dance Center's membership program. Each tab listed the benefits of each membership tier which are 'Silver', 'Gold' and 'Platinum'. My research and inspiration from looking at other websites led to the use of pagination which evolved into a simple and fluid navigation for users.
3. Date Picker
Users need to choose a day they would like to start the afterschool program, trial class or membership. From the beginning, I thought a calendar would be a nice visual component to the interface as it is a familiar tool used in everyday life. It has changed quite a bit throughout the design process as I was trying to play around with the minimal space I had. I decided to add a text field as a separate page so that users have the option to either type in a date or use the calendar icon to open a calendar and choose it from there.
There were some friction points I noticed the more developed my wireframes became so I added a few new features to address these issues.
1. Chatbot
For example, one problem that I found is that users need a way to get assistance quickly. A chatbot would be a smart move to solve this friction point. The existing website has a contact us page, but I thought it would be beneficial to add a live chat as another means of communication which can be accessed on the homepage.
2. Steps Left
Another problem that I found is that users may need a way to see how long registration will take. I thought adding a steps left progress bar would be suitable to address this problem. When a user gets to the registration process, they will see the steps on the top of every screen until completion. On the final design, a pop of color really helped tie into the branding and communicate to users the number of steps they have remaining in the registration process. Once a section is complete, they will see a checkmark to confirm.
I constructed a mood board to move forward with a visual direction that had a modern, warm and authentic feel.
Merriweather is a serif font that gives an elegant and classic feel while still being legible and clean looking. Open Sans is a modern, universal font with rounded lettering beautifully legible in any font size.
Realistically, cursive was not the best font choice for legibility. That's why I decided to go with a sans serif font choice such as Open Sans as it complements Merriweather. The following font choices were enough to have some font variation whether I use bold, semibold, or regular.
I decided to stick with a pink color palette as pink can often be associated with care, compassion, and love, but can also evoke thoughts of innocence or youth.
At first, I thought pink wasn’t the best color to represent inclusivity at the East Bay Dance Center because pink is considered to be a feminine color and this dance program welcomes both girls and boys.
I changed my mind when I researched that pink can often be associated with care, compassion, and love, but can also evoke thoughts of innocence or youth. This color spoke to the visual brand I wanted to evoke: a modern, professional, warm, welcoming, youthful, and authentic feel at the East Bay Dance Center so pink was here to stay.
To implement what I established for the visual brand, I wanted to incorporate candid photography and youthful illustrations.
I knew I wanted to present a more visually balanced interface because the existing website is text-heavy. Authentic photography would provide a humanistic touch, while playful graphics would add variety and a kid-friendly appeal.
Images are of high quality, show different angles, captures boy and girls of different ages as well as group photos, exhibit a variety of ethnicities and convey a mixture of authentic photography and posed photos.
It was at the point when I looked at my registration flow to see where I can add gestures and any animations that something was missing.
With only text, text fields and buttons, there was not enough visual content to use for animations. I decided that integrating another style of imagery would enhance the signing-up process and make it more visually appealing. For instance, I added illustrations to the screen where a user has the option to register for a trial class, membership or afterschool program. Adding illustrations to the design helped add another style of communication while also adding visual interest to the screens.
Adding and stylizing the icons to the design helped tie in the branding and establish a consistent look across UI elements.
First, I redesigned the brand icon. I simplified the existing logo to one dancer, removed the square edge, and adjusted the pink fill to a new hue. By removing the black parts, the overall effect was lighter and less harsh. I picked this silhouette because it is ambiguous in terms of ethnicity, gender, and age, which means it can appeal to both boys and girls, teenagers, and adults.
I designed at mobile size first so that the website can
be responsive on tablet and desktop.
be responsive on tablet and desktop.
The registration process before was very difficult to complete on a mobile device. Imagine having to type in information on a small screen with the need to scroll down every time you need to complete a new section. With this new redesign, registration can be done either on desktop, tablet or mobile.
I would like to test this prototype and present the project to the director of the organization in the near future.
As I've helped build our email sequence and worked on the marketing and customer service backend of things, it gave me an advantage. I have a full scope and deeper understanding of the customer experience. This kind of knowledge was complimentary to my design process because I deeply understood the existing system, the goals, the needs and the audience.
