Cheryl Vo
UX/UI Designer & Digital Artist
THE REDESIGN OF
GOOGLE RECAPTCHA
Prototyping, Coding,
UI Interactions
Credits
Created by Cheryl Vo
reCAPTCHA is a free service from Google that helps protect websites from spam. By using Recaptcha, companies can prevent automated software from accessing your websites, which can welcome users to enter the site.
Behance

The Original Version
I. PROBLEMS
Users are familiar with the original Google Recaptcha with its distinctive color and images. However, there are some problems that users often encounter that we should take into account.
1. Sometimes difficult to read
The most obvious problem users usually have with Google Recaptcha is that sometimes... their images look so similar to each other that they are so hard to identify the correct selection
2. Microinteraction
With the original microinteraction, when users click the selected image, the selected image gets smaller and a tick box appears. The overall design of Google Recaptcha is easy enough to use, but it can be improved to bring out the best experience to users.

3. Hover Effect
Currently, Google Recaptcha does not have any hover effects when users hover over the options. Therefore, I believe adding a hover effect with greatly improve users' experience.

What I Hope To Improve
II. GOALS
1. Pop-up Box
With the original version, Google Recaptcha automatically after users tick on the check box "I am not a Robot". I personally believe this step is unnecessary. To simplify the process, users can initially fill in all required content, then click on the "Submit" button, the pop-up page will automatically appear, which minimizes the process from 3 to 2 steps.
2. Hover Effect
The original Google Recaptcha does not have a hover effect. I believe adding a hover effect will not only draw attention from users but also make the site interactive while letting users know its functionality.
3. Sound Effect
Same with Hover Effect, the original Google Recaptcha does not have a sound effect. The sound effect I selected for this project is the sound of an unlocked door. With this sound, I want to welcome all users to the site with fun and energetic sound, so they can feel like they are entering a house and are welcomed.
The Making Process
1. Alpha Project
Alpha Project explores drawbacks of the original version. The project is build with Adobe Photoshop, giving a board view of how the project will look like.
2. Beta Project
Beta Project brings what I have designed from the Alpha Project into coding, using HTML, CSS, and Javascript.
3. Final Project
The final project is my final design using HTML, CSS, and Javascript.





The Result
With the helpful feedback from Professor Jervis, I finally completed the project and ready to present my final result. The following link will leads to my self-code microinteraction.

My improvements
Triggers
Users type names and tap on "Submit" button. Users hover on each images.
Users select images,
double click to undo.
Feedbacks
Users hover on each image, the image turns to grayscale. Users click to select, and an arrow appears on selected image.
Rules
The button can only be clicked after users fill contents.
Users can double click to un-select.
Mode and Loops
There are no loops
and modes in this microinteraction.