Table of Contents |
People often see the word “designer” in my job title and assume that I just make things look pretty. While it’s true I design the user interface and help to create the look and feel of our products, a larger part of my job is to solve problems. You may be thinking, “Wow, that’s vague.” And you’re right. That’s one of the challenges of my job. The problem isn’t always clearly defined. Most of the time it’s fairly ambiguous and this requires the initiative to jump in and figure it out.
When we launched the Poodle Jumper iOS app, we projected to have 200 registrations in the first week. Imagine our dismay when we only had 20. Why did this happen? Were the projections wrong? It was my job as the UX designer to find out if the problem was a design issue. I started by going through the flow myself to see if I could make it from the beginning to the end. Looking at the analytics we had the flow of traffic to the app, so we know the marketing in place was effective. I found no technical issues with the signup so I reached out to users and asked if I could observe them in their homes as they went through the sign-up process. Observing individuals using your product in their environment is called contextual inquiry. I recorded their screens and took notes on the things they said as they worked. Many users expressed concern with the amount of personal information we were asking for right out of the gate. They hadn't decided if they were ready to start using the app, and we were asking for their address, the kind of dog they had, and what kind of food they ate. This made users nervous.
Today, I’m working through the onboarding experience and how we are establishing trust with the user. Users need to know what value they are getting to be willing to disclose personal information. I’m creating a design with progressive disclosure. Progressive disclosure is when the user can provide information as they progress in the experience. It creates a simplified and natural flow of information at the right time so they don’t have to fill out a 50-field form before they can do anything.
Screen 1: This is the first screen users see. It gives them the choice to sign up or log in if they are already a user. The orange 'Sign Up' button takes them to the next screen.
Screen 2: This is our current Create Account screen. It requires the user to enter their first name, last name, email, confirm email, password, confirm password, street address, state, zip code, dog size, number of dogs, type of food, and attention needed before they can progress.
To improve the user’s experience, I start by looking at the current screen and deciding what they are trying to accomplish. In this case, the user wants to know if our service is available in their area before entering all their information. Asking for the entire address isn’t necessary to know if our service is available so I’m going to simplify that to just the zip code.
Screen 3: When the user enters the zip code, we’ll provide feedback to let them know if our service is available. If our service is not available, I’ll change the screen to let them know.
Screen 4: On this search result screen, I’ll give them a chance to opt-in to notifications when the service is expanded to their city. This should help put them at ease from worrying that they need to come back and keep checking. When the user selects this button, they’ll see the next screen.
Screen 5: To send the user the notification we need to know their email address or mobile number for text notifications. This completes the flow of screens for users when the service isn’t available. Next, let’s look at how to improve the flow for a user who can sign up.
Screen 6: The 'Create Account' process has been broken up into three screens: the first for their name, email address, and password. This makes it easy for the user to see what they are entering on one page without scrolling. The 'Next' button and pagination dots at the bottom are clues to the user that they are on step 1 of 3.
Screen 7: The second screen to create an account asks for their location information. The pagination dots at the bottom updated to show they are on step 2 of 3.
Screen 8: The third screen to create an account asks for their pet’s information. The buttons are large enough that they are easy to tap on a mobile device. The title of the button has changed to 'Complete' and pagination dots show they are on step 3 of 3.
This shows you a bit of the thought process involved when you are a user experience designer. Next, I will test the screens with additional users and continue to refine them as we learn.
Source: This tutorial was authored by DEVMOUNTAIN and Sophia Learning. Please see our Terms of Use.
