Design, Forms and Inputs
Diving deep into technical foundations
Pinkbird has embarked on a mission to deliver world-class Inventory, POS, and online storefronts for small business moguls. As the architect behind Pinkbird, every line of code I knit is tailored to ease the entrepreneurial voyage for my customers. This endeavor led me down the rabbit hole of technological fine-tuning, and here’s a glimpse into my recent strides.
The Form Framework
Forms are the unsung heroes in the app. They're everywhere - when you're adding a new product, signing up a customer, or jotting down an order. I decided to sprinkle some tech magic on them using the Final Form library, paired with Lit.dev. With these I have a form controller that’s snappy and fun to work with, super quick to load utilizing native web components, and incredibly powerful.
This combo helps me build forms more quickly and ensures they’re more robust and reliable. It’s something small that underpins most interactions with the app, so it’s worth taking the time to get it right, and I’m very happy with the results.
Birth of the ‘Create Customer’ Page
A good challenge for the new form controller is the ‘Create Customer’ page I’ve built. With just a few clicks, you can now create a customer profile and optionally attach an address. We looked to Shopify’s customer entry form for inspiration but added a helpful toggle to skip contact information in the address when it’s the same as above. It’s a little thing, but on something you interact with a dozen times every day, it really adds up.
Embarking Toward Amazing Design
I knew from the start that I wanted Pinkbird to outshine Shopify’s admin experience, and I’ve found a design framework that’ll help me achieve that. Over the next several months, I’ll be gradually building these components, translating them from design files to code.
It's sleek, modern, and flexible - just what Pinkbird needed! It's not about just looking good, but making sure the interaction feels good. This design system is helping me mold Pinkbird into software you actually enjoy using.
Here’s a sense of the look and feel of the app, using just design assets (i.e. this is what we’re building toward, but with more pink!):
The Humble Text Input
The first component I’ve built using this new design system is the <input-> component. This gem handles global currencies and phone numbers, making it a universal companion. It’ll default to USD and US phone-numbers, but when you have a Japanese customer, switching to Yen is one click away.
Here’s a quick look, where you can see that the “First name” field was left blank, but it’s required, so we can see what an error looks like when something isn’t quite right. Email inputs have a nice visual indicator with an envelope.
The phone input has some neat tricks. Pick the country code from a dropdown (“GB” is Great Britain), and the international dialing code is automatically set for you, and I have it show a format of the number specific to that country.
There’s similar niceties in the currency input. Here it’s set to the default of USD:
But if I switch it to Bahraini dinar, not only does the currency symbol adjust, but the input format suggestion does as well (notice that it’s 3 decimal places, which is the standard for that currency):
I didn’t know this before building this, but there are many currencies that use 0, 3, and even 4 decimal places, and the currency selector makes that obvious to anyone doing the data entry. It’s a small thing, but it’s delightful how well it works. Taking pride in the little things really adds up.
This is the first component with many more to follow. Next I’ll be building checkboxes and buttons.
As I continue to iterate and improve upon our platform, the essence of Pinkbird remains unchanged - to provide an easy-to-navigate, reliable platform that allows small business owners to manage their retail businesses efficiently. Through relentless innovation and a keen ear for feedback, I'm building not just a platform—I’m crafting a companion for the right set of entrepreneurs out there.
Weekly Wine Recommendation
This week we're sipping on the refined 2017 Gaja Brunello. Its balanced profile, adorned with a whisper of cherry and earthy notes, is a delightful companion to a hearty stew or a robust cheese platter. Perfect for toasting daily victories or simply nestling down into a cozy evening.