Hey, my name’s Riz and I’m a Support Engineer at Vercel. I recently had the esteemed honor of crafting the Vercel Community design that you may have seen played at the start of a Community Session or worn IRL by some awesome people (reminder: you, too, can win this swag). e.g. →
https://x.com/jacobmparis/status/1911444041402626194
Since I’ve had some community members reach out to me for insights or inspo behind this design, I decided to capture my process/journey and share with ya’ll, directly. I’m around to answer any queries or feedback you may have, so, please don’t hesitate to ping me :)
How it started
When I spotted an open ticket requesting swag asset(s) via our internal #design Slack channel, I jumped at this opportunity! At Vercel, in essence of YCJST (You Can Just Ship Things), you are empowered to create a PR (or, in this case, create+share a design) even if this is stretches beyond your job role. Fortunately, since this was not my first rodeo as I had also designed and shipped the very first Customer Success team swag, I understood the needs of the task and dived right in.
Staring into the abyss
Then, you know the drill. Opening Figma, adjusting your office chair, creating an empty artboard, picking the right track to bop to, grabbing a cuppa, window-shopping for fonts, readjusting your office chair, watching your cursor move around, etc. Essentially: this is the time period where you’re least sure of your own abilities and have invited Regret to have a cuppa with you. Time, actually, doesn’t exist in this phase as your inspo or your muse (or, however ever you describe an ‘idea’) is not bound by any deadline.
I began slowly, over 1-2 days, with some early explorations, such as:
[grid]
[/grid]
It is possible that these early explorations may have prospered if iterated enough, however, I didn't think they were representative of the "minimal" Vercel brand vibes.
Running around
Once I had some early explorations figured out, I sped up iteration by more freely creating new artboard after new artboard. This time, my intention was to try and match the "minimal" look by giving more prominence to the "▲" shape. This led to s'more interesting iterations, like:
[grid]
[/grid]
^The colored 'bricks' or 'post-in notes' concept was drawn from the colors of the categories in the Vercel Community sidebar. This led me down exploring how the "▲" shape could be formed of similar, yet, unique "elements". Once such element was "voice" which I incorporated in the "bricks" idea from earlier ->
^This concept, really, was the foundation of the end result.
Lift Off
Around the same time, I had an epiphany when I recalled 's tweet:
https://x.com/paulienuh/status/1861520052865892613
Key word? Talk. YES! "...talk to the community"
I wanted to encapsulate this tweet in my design's DNA.
Further, I also want to credit a friend whom I shared these design thoughts with as I went along. Daryl's feedback were cruical to the process.
And, so, that's what I narrowed in on:
[grid]
[/grid]
^While the waves in the one on the left were "fun" or "whimsical", it began resembling more like a Christmas tree.
Finally, after much tinkering to achieve the minimal look I was chasing while still representing a buzzing and lively community (because folks are talking to each other), I arrived here:
Reader, I can't capture just how incredibly heart-warming it was for me to read the team's reaction to seeing my design 🥹 #blessed
To Infinity
Some time after the designs were approved, reached out to me with a brilliant question that instantly captivated my attention →
"A sound wave is the pattern of disturbance caused by the movement of energy traveling through a medium" — source.
Thus, it's only natural that when you see the design --- you imagine the sound waves to, actually, be moving. Plus, I was also reminiscing about the Windows Media Player visualizations from back in the day... 😅
I had previously tried to achieve this vision during the initial design stages in Figma (via different plugins) but got nowhere. This is when I pivoted to using v0.
...And Beyond
I had experimented using v0 as a "design" or "creative" tool in the past when I designed and shipped a deployment a day as part of Weird Web October which turned out to be a superb method for me to not only practice being creative everyday but also improved my v0 "vibe coding" skills.
Similarly, using v0 for animating the sound waves was an epic learning experience. Here's what I learned:
📌 Your first prompt is just a first draft -- be willing to start over from scratch
Just like writing the first sentence of any piece has a lot of weight, your first prompt sets the direction of what is to follow. This is why, if you do feel stuck during the prompting journey, you have to be willing to reset your perspective and rethink how you started. My successful first prompt, that matched my design most closely, only occurred to me after many, less-successful first prompts →
📌 Get feedback on your AI creation on its own merits
AI has bridged the gap between your idea and the final product. It has enabled everyone to think like a builder regardless of their skillset or career path. When I presented my first animating sound waves "MVP" to the Community team internally, I was ecstatic because I had made it...kinda →
As you can note, the sounds waves were moving but the design had no resemblance to the static version. At this point, it would have been easy for the team to be swayed by my excitement of "omg, AI helped me make this thing!!", however, 's feedback rightfully judged the output (and not the tools used) on its own merit →
> Would love to have it align more to the actual Community Voices design you've already built @/riz ❤️
This feedback definitely motivated me to keep trying to nail the vision. Pardon the abundance of acronyms but → YSJ...ITG (You Can Just...Iterate To Greatness).
📌 Side-quests are good, actually
There were many (animated) bloopers through out this process, such as:
[grid]
[/grid]
If you keep an attentive eye, you can make interesting discoveries that may be different than the idea in your mind but still are gold. v0, on an occasion, had styled the triangle in a "glowing"/"glint" affect made up of small, shifting shapes that looked very cool! I knew this wasn't the direction of my original design, however, I still shipped it as a side-quest →
https://x.com/rizbizkits/status/1894463100469797130
These were just some key learnings around AI/v0 that I wanted to highlight.
Finally, through the help of the team, I was able to match the vision of the original design (https://community-voices.vercel.app), announced here →
https://x.com/rizbizkits/status/1897396258618400834
I want to thank everyone who supported me along the way! If you made it this far, I appreciate you for taking the time. Plus, if you're repping the Vercel Community t-shirt, feel free to share in this discussion or tweet about it 💛 We'd love to see it.
