To level-up my career and gain more credibility as a product designer, I took a 3-month web development class to test the water of front-end. I ended up gaining invaluable skills that have made me more adept at working with developers, contributing to design systems and starting my own freelance work.
I started my career in industrial product design around 10 years ago. In that time I've worn many hats and learned a full gamut of creative technical skills, ultimately transitioning to product design (and loving it!). However, I never really touched development and have been lacking in my knowledge in talking to developers and building out better design systems. That changed in late 2022 when I decided to enroll in a front-end web development course at General Assembly.
The course is 3 months and covers the basics of HTML, CSS and Javascript. All material was taught remotely and students were expected to complete most of their assignments on their own time. For someone in a full-time position, it was a lot of work.
Towards the end of the course, we got to choose our final project and create 1-2 fully responsive web pages. Being in e-commerce, I chose to create a digital storefront in hopes of taking on freelance work.
For my storefront design, I wanted to build a site for a bone-broth company I am working on on the side (I'm kind of a health-nut). It would sell one product with several variations but focus heavily on the marketing of the product.
All the choices I made were in relation to similar products / sites. It was meant to look natural with a sense of ruggedness to it, all while looking like a legit site you'd want to buy from.
Development presented some interesting challenges. I usually like doing things that are somewhat complex and difficult. I ended up purposely trying some interactions that put my skills to the test. One that I had seen on another site was an 'infinite scroll' product details card. I can now better empathize with developers because this was really hard to do!
I also learned how to make all of the content dynamic (since my plan is to use this with an e-commerce backend eventually). All the product are JSON objects and could easily be swapped when the site is ready for production.
My final consisted of only two pages but they are fully responsive, all the content is dynamic and it's well documented. When I have the time, hopefully I can take another stab and finish it out! Take a look using the link below and see the fruit of my labors.
