I’ve wanted to create the UX Tool Belt ever since I wrote The Fuel and the Engine over two years ago. It’s designed to introduce tools and techniques for UX practitioners so they can catalog their own process (overall or even by specific projects).
It is by no means a finished project - there are plenty of tools and techniques I’d like to add or build upon. I’d love to add more detail for the existing ones as well, like books, software, and other resources. The belt feature itself could also use some improvement. I’d love to add:
- sharing a belt
- drag and drop reordering of the tools
- saving multiple belts
I’m happy with what I built for the contest, but I’m even more excited to keep building on it to use as a tool for helping UX practitioners feel more comfortable with their process and tools.
Little details
I’m pretty proud of the CSS I used to reproduce the float label pattern. I only used Javascript to submit the project name on blur.
The two-paragraph intro only appears the first time you visit the site. It gets shortened to a tagline that summarizes the project pretty nicely - clicking it will let you reread if you want.
This was my first time parsing JSON with PHP, and I think it worked pretty well. There’s a good chance I’ll be moving the data into MySQL for better performance in the long run (particularly since I’ll need a database for some of the improvements above), but JSON worked for this project.
Even with a strict performance budget, I was able to sprinkle in a few animations in the styles.