Product Designer ✦ Passionate about Micro SaaS tools

projects

productHunt

medium

Vishwesh Navtake  • Peerlist

[read entire case study on my portfolio]<h2 class="rich-heading">👋 What’s this?</h2>VocaBro is a chrome extension that lets you save words from google along with their meanings. These words then appear in a flashcard format on your new tab of chrome in a random order. Its an online word saving and memorization tool.<ol><li>Search for the meaning of a word on Google</li><li>“Add to Vocabro” button appears next to the word</li><li>Clicking on the button adds it to your vocabulary list</li><li>Creates a jumbled word guessing card game on your browser homescreen</li></ol><h2 class="rich-heading">🌻 Inception</h2>I will start with a personal anecdote. I tend to search meaning of words on Google as its fast and easy compared to searching in the dictionary. Dictionaries are boring. But as the efforts are reduced to search a word, it also becomes easy to forget.The problem? I end up searching the meaning of same word many times on GoogleI often found myself in predicament of searching for the same word repeatedly. It felt like my browser was taunting me by showing me I had previously searched for the same word.When I thought more of it, I found people now tend to search meanings of the word on Google itself, and in it lied a great opportunity to use this user behaviour for user’s own benefit.

VocaBro

[read the detailed case study on my portfolio]<h2 class="rich-heading">👋 What’s this?</h2>An auto page numbering plugin for Figma. The plugin adds page number text to the frames automatically based on their position on the canvas.I designed and coded it myself.<h2 class="rich-heading">🌱 The Inception</h2>We as a design team, at our company, have to prepare and update the product manual in sync with the release cycle. As some new features get added in certain areas of the product every month, even one page being added in the middle meant an exhausting task of re-numbering all the pages after that.You could imagine the apprehension we had, when the release cycle of our product approached. We were dreaded when someone uttered the words “Product Manual”.We always used to search for some tool that could make our lives easier, but the search always ended up in vain. We sat down and manually entered those numbers a few time. But this particular time I couldn’t prepare myself mentally to do this task. That’s what led to inception for this idea.<h2 class="rich-heading">🚀 Impact</h2>This definitely helped us save a ton of time spent on the mundane task of re-numbering frames and my teammates were super-happy. So I would say it was a time well spent.I have published it on Figma Community, and 10k+ people are using it so it is helping others too.

Auto Page Number

<h2 class="rich-heading">🌊 What is ~ripple?</h2>Ripple is a generative music experience that I have built. It generates relaxing soundscapes by selecting random notes every time you (re)load the site. Along with the sound it also has beautiful visuals that complement the sound.<h2 class="rich-heading">✨ Creative Inspiration</h2>I built this experience with one thing in mind, the relaxation a person feels while watching random ripples happening in any waterbody. It has no meaning and no definite pattern, yet it soothes the mind of the person who views it. By complementing such visuals with relaxing music, I tried building such experience with particles that react like ripples when a musical note is triggered. The site plays new melody from random notes every time someone visits or reloads it. With no control and stress of choosing the music for focusing and relaxing, you can just load the website and let it do all the work while you can truly relax &amp; surrender to the flow of randomness.<h2 class="rich-heading">🎵 The Sound</h2>The single most important aspect of this website was to nail the sound. I started with sound aspect of the site first and was looking for solutions that can actually handle and play sound on web. After some research I found Tone.js to be a good library that I can use. But being the perfectionist I am, I was not able to nail the sound in my first try. I was on my laptop everyday tweaking plethora of hyperparameters of synth. This process was so exhausting that I had actually given up midway through the project &amp; was going to can it.But then I decided to start from scratch &amp; learn the basics of sound design, sound production, to get an idea of what all these parameters did. Though I couldn’t understand everything, I was able to gain some basic understanding to start off.Before moving forward I would like to clear, generative music though random is not entirely random or it would sound like chaos. For notes and sounds to become music there are some variables I needed to control.I dissected &amp; identified these elements needed to make beautiful ambient soundscapes<ul><li>NotesNotes are selected at random from the same scale. As any notes selected from same scale wouldn’t sound odd if played one after the other.</li><li>TempoAmbient sounds have long, drawn out tempos. Most of the space is taken by silence and in there lies the beauty of it. I decided to do the same.</li><li>Sound &amp; Sound effectsI was aiming for high and delayed reverb sound. The notes aren’t hit very often but their effect(ripple) still remain in the atmosphere due to the reverbs.</li><li>Layering with multiple instrumentsAdded some bass synths &amp; chord synths to make sound much full and lively.</li><li>MixingMixed these different instruments according to the importance in composition &amp; tweaked it to find the right spot for best effect. My friend Tanmay helped big time in this part (<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://open.spotify.com/artist/7w2Vhd3lFutwAPLWLfd15A">Check out his music</a>)</li></ul>All the generation of sound, adding effects, mixing was done through JavaScript code using tone.js library. So yeah it was not so easy as manipulating sounds in a DAW.<h2 class="rich-heading">🌸 Visual Inspirations</h2>The visuals of the site is also what I was very excited to explore. Blade Runner movies share one more special trait i.e. outstanding cinematography. Each frame of the movie is worthy of becoming a poster. It is that gorgeous. I also wanted to convey a similar feeling with my website: something screenshot worthy. Having been greatly fascinated by brutalist poster designs, I tried to incorporate such styles while designing the websites. I wanted a retro-mecha-robotic style of website to contrast with the very human-like soothing soundscapes, which is a core question that Blade Runner asks: “what makes us truly human?”I scoured many brutalist websites/posters to gather inspiration &amp; I already had one simple concept art which I used to start of my designs<h2 class="rich-heading">👨‍💻 Coding</h2>🎶 SoundAs I mentioned earlier, all the sound related things like playing notes, selecting scales, sound effects &amp; mixing was done via JavaScript code. Though I knew coding since college, this project was a bit different as I was experimenting with sounds on web for the first time, and it’s not so easy. There are a lot of trials and errors, tweakings, revertings, optimizations, etc. that are needed.✨ Front-end &amp; visualsThe relaxing sea of particles on the website was also coded in JavaScript. It places particles on random points on the canvas &amp; everytime a note is played, a ripple moves in a random bezier curve. I got a really good help in making the front-end of the website from my friend Akash (<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.linkedin.com/in/akash-k-more44/">Akash’s LinkedIn</a>).If you are curious about the code, you can check it out here: <a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://github.com/5paceb0i/ripple-experiment">https://github.com/5paceb0i/ripple-experiment</a><h2 class="rich-heading">🚀 Launch</h2><h2 class="rich-heading"><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://www.producthunt.com/products/r-i-p-p-l-e#r-i-p-p-l-e">#8 product of the day on Product Hunt 15th-Oct-2022</a></h2>

Ripple

Role: Design &amp; DevTeam Members: Hrishikesh Shinde, Akshay LaddhaTime: 3 months<h2 class="rich-heading">👋 What’s this?</h2>A virtual reality android app to experience &amp; try out different interior design options for your showrooms or any interior space.<h2 class="rich-heading">✨ Curiosity to learn new tech</h2>I was always fascinated by Virtual Reality as a technology ever since I heard of it. I was eager to learn this technology. But for me the best learning happens when I implement and build something from it. So instead of just learning the technology, I thought that I could even score grades from it if I submitted it for my project course. And with this I could even give my whole time and dedication to it. But I didn’t want to just slap VR onto some non-existent problem and call it a project. I wanted to solve a genuine problem that exists.<h2 class="rich-heading">🧩 Problem Statement</h2>Our house was getting renovated around same time and observed a problem that I couldn’t visualize the interior designs shown to us because they were pics of someone else’s home. But I realized this could be big problem for commercial people. Firstly the showroom design plays integral role in attracting the customers. And rolling back from the designs once they are installed can be very costly and could lead to decline in business. Secondly for builders, they have to get bookings for apartment before the building is even ready so they make a room replica with construction material, which they later destroy.Hence we (me &amp; my team) decided to tackle the following problem:To develop a Virtual Reality experience for the user to see all the possible designs for their home and try out different combinations in real-time<h2 class="rich-heading">⚖ Platform Selection</h2>We decided to go with Google Cardboard type of devices which use mobile phones as their screens. This choice emerged from our initial goal to keep starting cost to minimum for the business owners while still being able to reap benefits. This decision was also made so that it could be easily adoptable as everyone has a good smartphone &amp; the cardboard type VR device costs less than Rs.800(~10$) . We decided to make an .apk file for our project that can be installed on any android device.<h2 class="rich-heading">👩‍🔬 Self-learning VR</h2>As this was a new technology for me, I needed to learn everything from scratch and as no one from our batch knew about this, if some issues came across there was no other savior other than the internet. As the scope and end deliverables of project were figured out, I was able to stay on track while learning. We decided to use Unity for our 3D designing and Google Cardboard VR SDK. Unity has a wide range of functionalities which are easy to use and is very intuitive in terms of learning, designing and scripting the logic. Unity uses C# as its scripting language and is fairly easy to learn if there is familiarity with languages like C++ or Java. The first month of our project was spent by me to learn all the details of Unity and then setting up all the SDKs in place to start actually implementing the scope.<h2 class="rich-heading">⛰ Challenges</h2><ol><li>Initial project set-upInitial setup of the project with SDKs and getting it to export the .apk file was very challenging as we ran into many errors with no help on internet.</li><li>Scripting<ol><li>As Unity has C# scripting, I had to learn it how to write scripts in C# from the documentation available on Unity website. The process though difficult proved extremely fruitful as starting from the basics I knew multiple approaches while scripting the logic. The community on Unity is also super awesome, and got a lot of help from them as well</li><li>There was no boilerplate code to scrap off of, so when I was building the initial logic for the changing lights and textures which could be scaled easily, was a challenge.</li></ol></li><li>Lighting<ol><li>We decided on night time for our in-app scene. As there was going to be lights, false ceilings and multiple LEDs, we realized it’s true glory can only be realized and praised if there was no external main light. But as we remove the main light(the sun) from the scene, setting up the lights to lit up the scene is very arduous and intricate task.</li><li>Setting up the ceiling LEDs was also also tough task as all the point lights needed to be individually placed by someone.</li></ol></li><li>Limited InteractionsAs opposed to Oculus or any other high-end VR device, the cardboard version has very limited interactions. Though the gear was suitable for our performance side of project, the limited interactions was a major pain point. As we controlled the in-game player with a Bluetooth gamepad type controller, our interactions were limited. So we needed to craft build logic in a way that maximum controls could fit without confusing the user.</li></ol>..... continued on my portfolio