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
• Folders
• Account settings

Sign up with Oauth or email

original vs my design

UX redesign

• 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.
• Following accessibility best practices the Read our Terms and Service and Privacy Policy link is not inside the checkbox.

🔗 See it in action

As you can see from the above design solution I’m not a fan of almost explicitly hiding features. On the original design the email sign up is so different in layout/design that it’s easy to miss. But to be true to business needs I did code another version. And because I’m missing including Javascript in these designs I’ve added a few lines of JS to deal with switching display:none on the sign up form to block and it even transforms 🧙‍♂️

🔗 See this alternate sign up page in action

Digital wallet

original vs my design

UX redesign

• 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.
• I’ve added a few filters just for fun. And they actually work! Once again, I was missing a little JavaScript magic so I went ahead and done that.
• 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.

🔗 See it in action

⬆️ Back to top

Order thank you page

original vs my design

UX redesign

Information enrichment:

• ‘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.

Layout/accessibility:

• Moved the background image bicycle so it doesn’t overlap with the order details. It’s positioned that it also never interferes with the contact section.
• 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.

🔗 See it in action

⬆️ Back to top

Blocked on Messenger

original vs my design

UX redesign

• Added a blocked status 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 input field and send button as well.

🔗 See it in action

⬆️ Back to top

Payment method picker

original vs my design

UX redesign

• 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

🔗 See it in action

⬆️ Back to top

Boarding pass

original vs my design

UX redesign

• Information hierarchy: seat, boarding time and airports get priority.
• Passenger name positioned to allow for longer names.
• Broke departure into date and boarding time.
• 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.

🔗 See it in action

⬆️ Back to top

Folders

the original design

My design:

UX redesign

• Just played around with the design a bit creating :hover, :focus and :active states.
• 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.

🔗 See it in action

⬆️ Back to top

Account settings

Desgins side-by-side

UX redesign

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.

🔗 See it in action

⬆️ Back to top

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.