BABYCENTER'S MOBILE APP REGISTRATION
Get a more humanized and connected experience as you start your pregnancy journey with Babycenter.
Product Designer - 1 Month Project - 2017
How can we increase the % of new users on the mobile application?
While there wasn't statistical data of dropping conversion rates, my art director and I wanted to suggest changing up the registration flow that matches this conversational UI trend that other B2C companies have in their mobile applications.
Overview: Babycenter's current mobile app registration uses a single page registration with various form fields. As design trends lean towards a more humanized experience, Babycenter's marketing team and I teamed up to test a new multi-step conversational registration form that could possibly replace the current registration.
Role: I worked with the marketing manager and was the only UI/UX designer on this project.
Responsibilities: Competitive analysis, wireframing, creating high fidelity prototypes, conducting 10 usability tests, iterating based off data and feedback, and ultimately delivering a new user interface and a conversational registration experience.
Designed out a new registration flow experience and interface, transforming a long form into a simple form that leans toward a conversational flow and matches Babycenter's brand colors.
This design would be used in a live A/B testing, in early 2018, to see if it helps improve conversion rates and could possibly replace the current form.
1. Using data to drive conversation.
This project started off with a bumpy start. While my art director and I were on board with this idea to test a new sign up design, the marketing manager was a bit hesitant. Luckily, there was an existing study done on a previous project that provided results that backed up our hypothesis to push for a multi-step conversational flow.
A previous usability test on a multi-step sign up on the responsive website brought positive feedback. This data provided me validation to push for designing a multi-step conversational flow to test with the current registration via A/B testing.
2. Utilizing existing designs and interactions
To save time, I was able to grab existing designs done by the art director to start off with. This made me have a shift my design approach. Instead of starting from scratch, I based the next set of wireframes iterations on the existing designs made previously, focusing on what was done well and what wasn't for the next set of designs.
Two existing designs were already created that had two different approaches:
1) Same form but different background, with a goal to resonate with pregnant mothers, approach
2) A early design of a conversational form approach
IDEATION AND TESTING
1. Coming up with a hypothesis
After several iterations off the existing designs, I made the choice to head towards a direction of breaking the steps into 4/5 screens, minimal text, and incorporating different color themes. My goal for this stage was to see if certain visual cues played an important step in pushing users to complete the form or not.
I made four hypothesis to test:
- Icon usage:
Icons would play an importance of engaging users on finishing the sign up because there's a trend of design should be more visual.
- Color in relation to accessibility:
Color, typography, and background play an importance in engaging users. A minimal background with clean text would help users finish the flow since it's simple and direct.
- Text density:
Less reading, more simple directions would help drive the user to finish the screen.
- Animation reaction:
Tying in a small confetti animation feature would help attract users more because it's fun and interactive.
One of the ways I chose to approach to test my theories was to utilize usability testing. All testing was done on usertesting.com because I didn't have access to contact real Babycenter users. My green light on which version won was validated by seeing that users were able to complete the flow and that there was a consensus of positive comments on one version over the other.
I built clickable prototypes on Craft's plugin with inVision and did a total of 10 usability tests, 5 for each version of testing.
2. Testing my designs via usability tests
The tests gave me validation to push for a conversational flow that included minimal text with no icon usage and utilizing a background that resonates with pregnant mothers, which was the target user.
Showing a clear view
Incorporating a persistent status bar to give users a clear view of where they are in the process, minimal text density, utilizing color hierarchy and typography to differentiate content, and having a consistent button placement.
After user completes the first step, they are greeted with a personalized congratulatory message with anticipated due date and respective baby size visuals. The hand off for this screen was really important because I had to let the developers know what was my vision. Hand off including showing existing examples, sending assets, and noting specifications in the interaction.
Account Creation Screens
Going with the goal of minimal text density, separating the account and password creation screens seemed like the best way to go. This separation minimizes the pain point of overwhelming users with too many input fields on top of text as well as go with the consistency of the conversational feel we were going for.
Can I skip this step?
This last step was the most tricky step because it's the most intrusive form field. Part of Babycenter's registration is to ask users their insurance information, at a high level, so that the may give them information regarding their plan in the future.
This step seems a bit iffy to me, why are they asking that?
Since we want this registration to be as painless as possible, forcing users to input sensitive information was not the way to go. Incorporating a "skip this step" to allow users to finish creating an account played an important step in user satisfaction. Users reported being happy knowing that this wasn't a required field in usability tests.
NEXT STEP AND KEY LEARNINGS
- Just like how the on-boarding process in an application plays a importance in the user experience, registration flows matter as well. Since the user registration process is one of the first things users interact with, it's really important to help set a seamless experience for the rest of the application.
- NEXT STEPS: Since this tested well in usability testings, there is enough validation to push this test through live A/B testing. If data shows this version had higher rates of conversion, Babycenter would switch the current form to this updated form. If data shows that there wasn't a significant increase or shown a decrease in rates, then keep current form and figure out what affected the decrease.