Shaping up Shape
Shape is a collection of icons, illustrations and animated icons all grouped together under one roof. Developed by Design+Code team, some of its features include multiple styles for icons and illustrations, range of exportable formats and code component support for React and React Native projects. From an illustration sandbox that was developed just to be stable enough such that it doesn’t crash during the hackathon presentation. To over 2000 users signing up over its first week of the beta release, the journey has been quite fascinating. So, it makes sense to share the series of (mis)fortunate events that lead to the development of the first-ever prototype for Shape.
I am a Problem Solver at Design+Code. Earlier, I used to work on designing cover images for sections. FYI, these are the preview images for sections that are often used as the thumbnail for videos or as header images for sections. It was a good platform to experience how different members of the team operates and contributes to a single project.
During the development of “Design System in Figma” course, I was given the task to design icons as we were working on our own design system. It was designed in a sense that users can use it for their own project. As a follow up of which, Meng had a brilliant idea to create our own set of icons. And this was the ideal project for me as it had to be developed from scratch and required implementation in terms of both designing and programming.
Hack Day
Every year Design+Code hosts an inter-team hackathon event where every team member hacks their own product over the course of weekend. It could be anything ranging from a new feature for the core website to a new product that they want to work on. With this event being around the corner, it was the perfect opportunity to experiment with this idea and create a prototype.
Just to put everything into perspective, I work remotely and the team often have meetings over zoom to discuss progress and other important stuff. A similar one was scheduled on Friday in order to discuss the projects everyone will be working on during the hack day. Many mind-blowing 🤯 projects were pitched like an in-browser game, split screen view option and dynamic wallpapers for Mac. To be honest these projects got me concerned as I am super competitive and hackathons are my jam. And with such an amazing project I was super super serious about this hackathon.
Get Set Go
Started the hack day by researching and studying various other similar websites. What I noticed was most of them just offered standard outline and filled icons. And some even made you download the entire folder with tens of thousands of icons just to search for the one you needed. For which it was logical not to have a preview only website with a big ugly “download all” button.
Nowadays we have millions of apps and website all with their own themes and styles. So, it made perfect sense to have support for a variety of different styles for every icon. And it was settled, to have a website with in-built editing, preview and export options along with hosting multiple styles of icons. The project was named ICONIFY back then.
Mission Impossible
My objective was to design the icons first and then work on the website afterward. For some curious reason, I decided to create 50 different styles of a single icon. Yes, you read it right 50 freaking different styles.
Moving on with these unrealistic numbers I started with the home icon. As it had a lot of scope for experiment and they come in all shape and sizes. Following a fast forward montage with Panic! at the Disco playing on loud in the background I worked on the first 50 icons day and night. And after a lot of Google, Dribble and soul searching the first set of icons were complete. Hurray!
It’s Endgame now
Completing the first set felt like you got to see the version of Endgame [Spoiler Alert] where Tony Stark survives. I was so happy and relaxed. But soon after Thanos snapped and I was thrown back to Infinity War era when I realized that the hackathon presentation is due TODAY. While designing the icons I lost the track of time and spend the entire weekend working on them. An interesting fact, initially I decided to create 10 icons each with 50 styles which is a total of 500 icons. Yeah I know, don’t @ me.
It’s now or never
To clear up the picture, I work during the evening to match with my teammate’s schedule who are on Eastern Daylight Time zone. Because of which I was left with roughly 10 hours until the presentation. I quickly fired up Visual Studio Code and created a React project. Putting my Flash ⚡ hat on I began working on the website.
Till this day it’s hard to believe that I was able to finish the website within 8 hours from scratch as those numbers don’t add up. Phew. It had a search feature, option to select the desired style and an export button with a cool animation that is still being used on the current version of Shape. But I was still left with 2 more hours to kill and as I had already gone super saiyan over the website so it made total sense to add more features.
Mayday Mayday
If you’re into development business you might have already predicted what happened next. Yes, I crashed the entire website 😭. The basic idea was to add another page with collections of illustrations that can be used by the users. But while uploading them to the backend I accidentally changed some settings and the website couldn’t fetch any of the icons or illustrations stored on it anymore.
I suck at the backend so without the required experience or the time to figure out what’s going on. I had the most “ingenious” idea to resolve this problem that was to create another workspace and upload those 50 icons and illustration again. And I simply went with that like a robot 🤖. At this moment the website was super buggy and unstable that if I had clicked on any other button then the one I was supposed to, it would have crashed immediately.
One More Thing
T-1 hours left and by some miracle, the website was up and running. By seeing it in all its glory it made me kinda emotional. To utilize the remaining time without screwing up the website like the last time I prepared a keynote presentation, like every over-prepared nerd 🤓 would do. Wow, right?? The presentation listed all the pros and cons, key features and other information on Iconic.
It’s Showtime
We logged onto our zoom meeting for the final presentation. The team had developed stunning projects like an in-browser platform game for 404 screen, new Design+Code demo app using React Native and a react library for gradient buttons. It made me nervous like hell, thanks for that team.
And soon after I heard “Amol, it’s your turn” and blank! My mind switched to auto-pilot and I don’t recall what I mumbled during my presentation using a silly keynote and hanging on a string website.
And the winner is…
A 101 on the judging process, after everyone’s presentation was over every team member voted for their favorite project where one wasn’t allowed to vote for more than 2 projects. During the process (drumrolls please 🥁) Iconic received 7/9 VOTES which was the highest and it WON.
It was the exact moment when I didn’t knew whether to cry or laugh so decided to stick with my usual expressionless face 😑. The cherry on the top, I was awarded a shiny new Apple Watch Series 4 (Yup the ECG one), thanks Meng. We wrapped up the presentation and all I can recall after that is me crashing on my bed and sleeping like crazy for 14 straight hours 💤. And this project was later transformed into something that we today know as Shape.
Shape is not just a product, it’s a journey.
And there you have it, how Shape was born out of a crazy rollercoaster ride during a hackathon competition. It’s interesting how far the project has come along from being a set of barely stable Jenga blocks to its first beta release. Within the first week it was featured on HeyDesigner and Sidebar. Shape wouldn’t have been possible without the super amazing and incredibly talented team behind Design+Code. And with support from the amazing designers and developers community, we are working hard on molding it into a much better and broader product. For which it still has a long way to go.
