After 13 years working in agencies I decided to move to a product company to work on larger scale applications, where I could build UIs and refine the work (code, visual, and user experience as a whole) based on user studies, A/B tests and data.
At Paperless Post, I work as a senior software engineer (since April 2019) as part of the WEB team. I've worked on multiple UI projects, including but not limited to building and revamping UIs and adding some subtle animations for a more delightful user experience.
Moreover I've done a lot of work on improving bundle size (next.js/webpack config tweaks), improving and creating internal tools (internal interim A/B testing framework, improving an old school rails sass build system process by 60 fold), and more.
I thought I would highlight some of the UI work I've done in the last few months. I'll go over the checkout UIs I've built, followed by some UI revamps I've worked on in the manage section, and lastly some more UI work I've done in the RSVP flow.
Below is a prototype of the UI work I've built on some of our checkout UI. Based on the previous iteration of Material design and built with react stripe elements. Given the solid foundations of Material design, the difficulties lied with getting the Stripe and non-Stripe elements to interact and animate seamlessly – Stripe uses iframes in order to keep all the sensitive customer information in their "context", so it was an interesting challenge.
The manage section, is where you can see all your past/current/future events at a glance. The initial UI needed some updating – it did not show enough event related data, did not offer the user enough control, and was adaptive instead of being responsive.
On top of the new features, one of my top priority was to add some subtle but enticing animations.
Based on the exploration above, I had also tried adding some scaling to the card. Unfortunately, this animation had some visual defects – fonts antialiasing, overall busyness with the various colours, and different text layouts.
I made some further tweaks to the my original prototype, by trying to incorporate some of the scaling to the thumbnail alone.
Ultimately though, the final animation was based on the first iteration, but without the text animating in. This made both the HTML simpler, and worked better with majority of the data that can be see on production. (the animations were further simplified on production around March 2021)
Lately, I've been working on a revisited RSVP flow, which is being released as an A/B test. As part of this work, I've teamed up with our product designer to update some of our older and static UIs – one of which is our toggle / tab UI. The following is our current iteration that is on production.
This was the version that felt most consistent as part of the larger UI, and anecdotally worked the best across mobile and desktop.