UX Analysis of Western Union Android app’s Signup screen

I was looking for CSS animation inspirations in Codepen and I stumbled upon a post called ‘100 Days UI Challenge’ by Daily UI where people could sign up for the UI challenge, and everyday (except weekends) they receive the UI they need to design and share it in their Behance or Dribble. Seemed cool!

In this article I take you through my process of critiquing the Sign up screen of Western Union android app and my proposed solution for a modern and clean UI.
BEFORE
AFTER

Inspiration

As much as I like UI Design and Development, lately I have noticed myself moving towards UX Design. So, I thought maybe I could do a UX version of UI design challenge. And I started to research if anyone had tried to do the similar thing, and just then I found Chimdindu Aneke’s medium post on UI design challenge with context and process.

Chimdindu is using “Google design sprint-like” process to tackle the UI design challenge with a documentation and knowledge sharing approach. It gave me courage to do the similar and learn more about the UX critique of products. I decided to share my process of doing UX critique of existing applications and proposing solutions to make the experience better.

Subject

Today’s subject is the Western Union (an online money sending service around the world) Android application’s sign up screen. Why Western Union? because I use it regularly in my Android phone and been wanting to come up with solutions to make its UX better — so i thought it would be perfect application to start with.

Goal

To propose a modern, clean UI solution for the Western Union sign up screen.

First impressions and thoughts

I opened up the app’s sign up screen and started going with the sign up process. While I was going through the register form I had some thoughts and questions about the UI’s look and feel.

Sign up Screen — Step 1 (Create Profile):

Western Union Android app screenshot (Sign up, step 1)
  1. The form looks old and clunky because of the gray background, rounded text input fields and inner shadow, which is old-school (Screenshot 1).
  2. Looks like there are lot of fields in the form, its broken into two parts.
  3. Am I in the first part or the second? (Screenshot 1: Step 2 Tab element’s background gray matches with the form background gray, which confused me. I thought Step two was ‘selected’)
  4. Why are there tabs at the bottom? (‘Pay bills’, ‘Quick Resend’ etc.) I thought the goal of this screen is to sign up, so why is History tab active?
  5. The form fields have placeholder as help text, which goes away when the form is on focus and the text input does not give any feedback while the person types the info. However, the password field marks green dots on the requirements (Screenshot 1).
  6. The form doesn’t allow the user to move to the next section until all the input fields have been filled.
  7. Once the first part is submitted a modal appears to show the error fields of invalid inputs.
  8. Then the form shows the input fields which were invalid in red.

Sign up Screen — Step 2 (Personal Information):

Western Union Android app screenshot (Sign up, step 2)
  1. It seems like neither of the top tabs are active, so I am guessing its the second step because the I just did the first step, i think :/
  2. I’m wondering why the ‘Choose State’ and ‘Choose questions dropdown are yellow colored? The yellow background has a high contrast with black text and it brings more attention to those fields. (Screenshot 4)
  3. The finish button, which is the main Call to Action in this page is on the top right. I’m not sure if that is ideal place for it because it is hard to reach with thumb when using phone with one hand. (Screenshot 4)
  4. Is this app safe? I see a Terms and Conditions link where I can read about it but not too confident about it.

More Thoughts

  1. What could be some of the business constraints to have so many form fields? Are all these fields necessary to get the user signed up?
  2. What is the most essential info required to register a user?
  3. Who are Western Union’s competitors? And how are they doing their registrations?
  4. Why did they not choose social media signup options? Is this considered safe?
  5. I wonder what the bounce rate of their sign up process is in the android app.

Competitors Sign up screens

The major competitors of Western union are TransferWise, World First, OFX USA, Currencies Direct, and HiFX USA. Most of them use multiple sections. The UI seemed busy with lots of steps. However, TransferWise had a Google login, had a clean and modern UI compared to others. ICompareFX did a detailed competitive comparison of Western Union.

Research / Discovery

Based on the questions that came up with, I did my research and these are the things I learned:

  1. Use social logins and save time.
  2. State you won’t spam user’s social media.
  3. Show that you are secure and trustworthy by using friendly and assuring copy or using security services logos.
  4. Allow users to stay logged in, so they don’t have to keep logging in every time they use the app.
  5. Add great copy to encourage users with each step if the forms require longer steps.
  6. Show feedback of form field validation of input types or password input types.
  7. Add copy to sign up page to state the value users are going to get after finishing this action i.e. registration.
  8. Make the Call to Action clean and obvious.
  9. Keep forms field in one column specially when in smartphone devices.
  10. Do not make the checkmark ‘checked’ by default for Privacy and Terms and Conditions. It takes the control away from user and makes the app look like it’s assuming users’ actions.

Current problems with Western Union Sign up UI

Based on the research and discovery I cross-checked my initial thoughts with my discovery. And here are the current problems I found:

  1. Form is too long and clunky
  2. Form has two column layout.
  3. No secure icon or copy to make user comfortable while registering.
  4. No option for keeping the user logged in.

Sketch Iterations

Now it was time to come up with various iteration of possible solutions. I experimented with different layouts and placed elements, and copy in different positions.

And this is what I had:

Sketch iterations for Signup screen.

Staying in the track?

It seemed like I was moving very fast towards my solutions, so I decided to take a break and rethink the end goal and analyze steps. To make sure if I was doing the analysis right, I revisited the sign up experience of the Western Union app and re-evaluated the problems with flow and UI. This time I also took a look at their website on mobile browser. I discovered they have a different signup screen which is better than the android app version. It has a better feedback experience of letting the user know about their email and password input. But no social login and long form to fill the secondary info.

I learned that the, Western Union website sign up form has better UI elements than their android app, and has a UI components and aesthetics that I could use when I convert the sketches to UI Design.
Western Union web sign up form on android browser

Converting the Sketches to UI Design

I decided to finalize the following UI sketch layout from the iterations because it has a short form, emphasizes on the social sign up (reduced to only two Facebook and Google), has copy for security and at the bottom it links back to login screen if the user is already registered.

Finalized sketch for signup screen layout

Things I wanted to keep in mind while converting the sketch to full color UI design were the aesthetics (color, typography) and brand of Western Union as well as the Usability with the android native keyboard. I did not want to create something which would be completely different and outside of Western Union’s UI components and Styleguide.

UI Design for Sign up screen of Western Union Andorid app

Before and After

Here is a before and after redesign snapshot of the sign up page.

Before
After

What I learned from this process:

I am content with my proposed solution of the Sign up UI. The proposed UI Design has a modern look and makes the sign up process quick using social login, yet keeps the aesthetics of the Western Union brand. It also has a better way to provide error feedback to the user while typing information. I am happy that I went through the process of pinpointing the problems of the sign up screen and simplified its interface and experience.

  1. Have a clear final goal. In this case I had a clear goal of creating a modern and clean sign up page for the Western Union android app, and through out the process I kept checking if I was going towards my goal or not.
  2. Context / research about the product is very essential. I got to learn about the competitors of Western Union and their practices of registering users. Also, I learned about the best UX practices for creating sign up forms.
  3. Less is more. Reducing form elements based on business requirements could mean not losing new users. Hence, pick the most important fields that are necessary to get a user registered then have them fill the secondary info later.

I am sure there could be many other ways the Sign up screen can be improved, if you have any thoughts / insights on creating clean and simple sign up screens feel free to share them.

Thanks for your time to read this article. I haven’t had any experience in documenting the process or writing articles. I am learning to document my process and bring more clarity from my writing.

Also, if you have any concern / feedback about the content, please, let me know. I will continue to do UX analysis of more UIs, and hope to learn a lot from them.

Disclaimer:

The purpose of this content is to document the UX critique process of redesigning Sign up UI. By no means do I intend to harm Western Union or any other brand used in this article. I am an aspiring UX Designer and practicing my UX analysis documentation process by using real life projects.