Online College Courses for Credit

+
Sample UX Project

Sample UX Project

Rating:
Rating
(0)
Author: Devmountain Tutorials
Description:

Analyze the steps that the UX designer takes to make sure that the mobile app works effectively for the user.

(more)
See More
Fast, Free College Credit

Developing Effective Teams

Let's Ride
*No strings attached. This college course is 100% free and is worth 1 semester credit.

37 Sophia partners guarantee credit transfer.

299 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 33 of Sophia’s online courses. Many different colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial
what's covered
This section will explore a sample UX project by discussing:
  1. A DESIGN ISSUE
  2. SAMPLE MOBILE PROJECT

1. A DESIGN ISSUE

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 to 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.


2. SAMPLE MOBILE PROJECT

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.

Screens of the Poodle Jumper App

Image shows a landing page titled Poodle Jumper the best food and board for your best friends with a button to sign up and login.

Screen 1

This is the first screen users see. It gives them the choice to sign up or login if they are already a user. The orange 'Sign Up' button takes them to the next screen.

Image shows a page titled Create Account with fields for first name, last name, email, confirm email, password, confirm password, street address, address 2, state, zip code, dog size button small 1-15 pounds, medium 16-40 pounds, large 41-100 pounds, huge 101+ pounds, number of dogs button 1, 2, 3+, type of food button dry, wet, wet/dry mix, and attention needed button low, medium, high supervision required. At the bottom is a button titled next.

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.

Image shows a landing page titled Poodle Jumper Find someone who will care for your dog the way you do! with a field to enter zip code and a button to search.

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.

Image shows a page titled Search Results with a message Ruh-roh! and an image of a man looking confused. The message below says No caretakers in your area. Would you like us to let you know when our service becomes available in your area? Below the message is a button titled Notify me when available.

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.

 Image shows a page titled Contact info Save your contact info and we will notify you when service becomes available in your area. With a field for email address and mobile phone. Below a button is titled Save.

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.


Image shows a page titled Create Account Let’s create your account! With a field for first name, last name, email, confirm email, password, confirm password and a button titled Next. Below the button are three pagination dots showing the first dot selected.

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.

Image shows a page titled Create Account Where are you located? With a field for street address, address 2, a dropdown for state, a field for zip code and a button titled Next. Below the button are three pagination dots showing the second dot selected

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.

Image shows a page titled Create Account Pet Info With a button for dog size button small 1-15 pounds, medium 16-40 pounds, large 41-100 pounds, huge 101+ pounds, number of dogs button 1, 2, 3+, type of food button dry, wet, wet/dry mix, and attention needed button low, medium, high supervision required, At the bottom is a button titled Complete. Below the button are three pagination dots showing the third dot selected

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.