BACKGROUND & MOTIVATION

My team, the Consumer Engagement team, was responsible for increasing the conversion rate and overall usage of our native apps.

Our native apps hadn’t been updated in a while and were in need of a refresh. We decided to start with the sign-in and sign-up pages.

CURRENT STATE OF AFFAIRS

The sign-in and sign-up pages were two tabs on the same screen. It was visually cluttered, lacked value proposition and adequate branding, and used outdated UI.

SIGN UP FLOWS

I created a flow chart to see how and when a user could be prompted to sign up or sign in. There were 4 main CTAs that triggered registration. I also wanted to see how other companies were doing this.

1. Save a Home

2. Save a Search

3. Contact an Agent

4. Request a Tour

COMPETITIVE ANALYSIS

I looked at some of our main competitors like Trulia, Redfin and Zillow as well as completely different companies in other domains, like Credit Karma and Mailchimp. I shared these with my team and we decided on what sort of ideas we liked and wanted to try out for our new registration flow.

Things we decided to try:

1. Emphasis the value proposition of creating an account.

2. Separate sign-up and sign-in tabs, creating individual screens for each and reducing visual clutter.

INITIAL SKETCHES

COLLABORATING WITH THE TEAM

After initial sketches, I moved into mid-fidelity. At this time, I shared my work with the mobile development team to give them an opportunity to raise questions, concerns, suggestions, and decide how they wanted to split up the work. Once everyone has signed off, I created hi-fidelity screens using the latest iOs and material.io guidelines.

FINAL SIGN-UP SCREENS

These are some of the finished screens. This is the redesigned sign-up page for Coldwell Banker, now a 2-step process. I also mocked up every variation of error message that was possible.

SCREEN FOR EACH CTA

Below, you can see that each of the main registration CTA screens have an image and copy reflective of the action just taken by the user, creating a smoother, more cohesive registration experience.

SECOND FLOW

After I finished the sign-up screens, I worked on a second onboarding flow. If we could onboard users into our app, having them use a screener along the way (while really selecting search filters), then we could show them a set of more relevant search results right away. The most widely used filters are: location, price range and size, so I designed the screener around this. It was new for us, I was using new components as well, so I tested it with recent homebuyers and it tested well. Users loved interacting with the screener, they enjoyed seeing the number of available homes at the top of the screen change when they proceeded to the next question, and they had no issues with using new UI like the price range scale. It got an average score of 4.8 out of 5 on ease of use.

VISUAL OPTIONS

Lastly, I played around with different visual options for the screener. The screen on the right has the brand color and a large image of a house, but I nixed this idea, both because ADA compliance might have been an issue (contrast of buttons) and each brand would need individual catering and sign-off once images were included. To keep things moving along quickly, I went with the version on the left.

FINAL THOUGHTS

Finally, here are mockups of the sign in screens across several of our brands. This went live recently, and we’re in the process of collecting data on how the original design performs against the redesigned version as well as the screener version. Our metrics include seeing an increase in overall conversion and usage. When and how to prompt a user to sign-up requires a well-balanced process, taking into consideration both user goals and business goals; I learned a lot about advocating for the user and their needs throughout the home-buying process, ensuring that sign-up took place at the most ideal part of their journey.