Frontloops is a front-end challenge site by Dimitry Belyaev, a Sr. FE Dev at Booking.com. As part of the challenge you get an image/video file of the final design then off you code.
I’ve decided to hone my front-end skills a bit whilst also practicing some UX Design by tweaking the UI if and when needed. You can find all the code for the below challenges and some others on my github.
Table of contents
- Sign up with Oauth or email
- Digital wallet
- Order thank you page
- Blocked on Messenger
- Payment method picker
- Boarding pass
- Account settings
Sign up with Oauth or email
- Got rid of the allcaps buttons for readability.
- positioned social icons next to the button text.
- Added a heading for the email sign up along with a form for quick sign up.
- Added the TOS link because I just love the law.
display:none on the sign up form to
block and it even transforms 🧙♂️
- The active card got a more signified design.
- As there are two screens, to avoid confusion, the active card number is also displayed under the ‘Current Balance’ title on the right.
- Took off the confusing circle border from the + and - icons on incomes and expenditures because they looked like a button.
- Kept a visible scrollbar on both sides as an affordance to signify more content available if scrolled. Did make it a bit fancier looking though.
- Added a - (minus) sign before money going out so colour is not the only visual feedback on the nature of a balance item.
Order thank you page
- ‘my account’ label for the account icon, because icon+label is superior to icon or label only.
- Thank you heading text for the skimmers as a quick feedback that all is well.
- Headers for the order summary ‘table’ (i.e. Product name, Quantitiy).
- Quantity column… 🙄
- Individual price displayed under the product’s name.
- A CTA to get in touch, just in case something went wrong or the user has a question about the order.
- Moved the background image bicycle so it doesn’t overlap with the order details. It’s positioned that it also never interferes with the
- Didn’t use a table for the summary due to accessibility concerns (not just the lack of a consistent way to be read by screen readers but how unpredictable tables are when it comes to sizing on smaller screens).
- Each order item also has an accessibility text paragraph that collates all the information in the table/line into one single, uninterrupted paragraph.
Blocked on Messenger
- Added a
blockedstatus indicator icon next to the contact’s name.
- Full width system message.
- Link to more info on being blocked (with accessible text added on at the end to complete the text to: “Learn more about the blocked status.”)
- Disabled the
send buttonas well.
Payment method picker
- unchecked inputs’ labels are still black; design suggested grey but that could potentially confuse users thinking the option is disabled
- made the container narrower so the checkmark is closer to the label instead of miles away on the right
- design called for all text to be uppercase which is hell on readability
- checked label gets physically larger to give better feedback on it being selected
- Information hierarchy: seat, boarding time and airports get priority.
- Passenger name positioned to allow for longer names.
- Headings are not uppercase, instead the information is (as most already is such as gate, flight number, seat).
Broken up to sections as you travel through the airport: from airport names before your flight, the flight number and gate to the QR code for when you check-in then your class and seat as you are about to board.
- Just played around with the design a bit creating
- The small triangle arrow on folders that have subfolders is animated/rotated on folder opening/closing.
- Added some depth for the sub-folders with an inset dropshadow.
This was a great opportunity to improve upon a good looking form with terrible UX design. I wrote an article about the nuances of human-centred form design through making a stunningly designed (not by me) sign in/up form accessible/user-friendly, if you are interested in more detail.
Bottom line is:
- fields should really have 4 borders
- placeholder texts can be confusing to users so best to ditch them. If you want to give instructions you can do so in a paragraph under your label for instance.
Additional stuff (just the usual):
- grey’s, not okay for button colours as it just makes them look disabled
- STOP SHOUTING AT USERS and help them read your stuff faster.
Want to see more of my coding projects?
From scrapers to Chrome extensions, I like to build stuff that solve problems. Check out my front-end projects.