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 Pages team. I've worked on multiple UI projects, including but not limited to unifying components across teams, building the payment UIs, revamped existing UIs and added animations for a more delightful user experience.
Moreover I've done a lot of work on improving bundle size (a lot of next.js/webpack config tweaks), improving and creating internal tools (internal temporar A/B testing framework, improving an old school rails sass build system process by 60 times), 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 major UI revamps I've done 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 done 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 similarly – Stripe uses iframes in order to keep all the Credit Card information in their "context", so it was difficult to get everything animating the same.
We are planning to update the textfield components to follow the latest Material design guidelines, and to then unify some of the other input fields to use the same components.
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 business 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.
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.