Intro
So I've completed Day 1 of this challenge (finally), I've done a crash course from YouTube that has helped to fill some of my knowledge gaps and I'm moving on to day 2!
I'm actually pretty nervous for this one as I've never really done anything like this before! All the UX/UI work I've done has been in a mobile game app type of scenario so this is rather daunting as it isn't something a user would find in-game.
That means I need to do some research!
Research
I have chosen to look into three large retailers that are specifically designed for consumerism means. these are:
Amazon
Asda
Etsy
This should give me a spread of different types of credit card checkout modals so that I can make one that follows the industry standard.
Amazon
Asda
Etsy
All in all , each of these examples are relatively similar. They all have the main details such as the card number, name on the card, expiration date and a check box to remember the details. Some have more than this base detail however such as billing address details and CVC or security numbers.
Some state what cards can be used to pay with and some have the option to use that card as the default payment method. These are all add-ons to make the design more easily usable in future interactions with the website which will encourage user retention and keep people coming back for more.
I also like the difference in some of the sites using drop down menus for the dates while others make the user type it in.
Wireframe
First of all, I wanted to make the design in black and white so that the colours did not distract me when making it. I eventually came up with this:
I wanted to try and keep it simple and relatively close to the standard set by the research I did so I kept the layout to what I'd seen and didn't try anything fancy. I did have the idea to have a square on the right side of the modal to highlight where each piece of information was on a bank card but then I realised that it could be in all sorts of different places as banks are now more and more putting all of the card details on the back of the card or in Chase banking's example, they don't have any numbers on it at all and they're all in the app. Therefore although this would potentially help some users, it could easily become confusing for people who aren't as au fait with technology.
I then added colour which influenced me to change some small details in the design.
I opted for dark and light blue as quite a few banks use this colour and it is quite calm and business-like in its connotations.
I much preferred gradient on the header to a solid colour as I felt it made it look more dynamic. I also made the title all caps so that it was higher in the information hierarchy and made other small changes such as making the text a mid-grey rather than black and putting light shadows inside the text fields to make them feel more like they were part of an integrated form rather than just rectangles sat on top of another rectangle. I use the blue colour on the form only on the call to action button to draw the users eye to it and make them want to add their card as well as to make it more intuitive as to what they are supposed to do next.
Prototype
I then proceeded to create a prototype with all of the micro animations to better show the way I wanted the form to evolve over time and with different interactions from the user. Take a look!
The animations I made was hovering over the question mark icon on the CVC field which opens a speech bubble to give the user more information as to what this is as it is not a commonly known term to every single person on the internet.
I also made the click to remember details section change on hover and when clicked to make it obvious when the check box is selected and when it isn't.
Finally, I changed the colour of both the call to action and the cancel buttons on hover to entice users to click the add card button and hopefully deter them from clicking cancel.
Conclusion
Compared to day 1, I feel as though this design has come MILES in quality. It may not be as immersive in terms of bringing the user into a story-world but for something as important and potentially scary for a user, I think that's a good thing.
The crash course I completed yesterday definitely helped me to make the creation of my design much more efficient and I'm excited that I managed to make a design I was happy with for something I was quite daunted by at the start of the day.
Comments