Building a simple side project to help people showcase their appreciations for each other.
Shout outs is a web application I created that can be used to send and receive focused recognition with a simple URL. It was featured in Product Hunt’s makers festival and on an episode of Design Critique podcast.
Product Designer & Product Owner - Responsible for user research, early concept testing, prototypes, branding, marketing, and interaction design.
Aug - Oct 2018
I met some of my closest friends in the workplace and I wanted to create a product aiming to help increase comradery between coworkers, spur up conversations, and boost morale in the workplace. Something fun and creative that people can quickly share with their co-workers that help them build a more personal connection. I decided to design a few quick prototypes to be used as conversation starters. These were throwaway prototypes created to test few different concepts. The goal was the test different ideas by inviting people to poke holes in the concept and provide feedback.
The initial evaluative research consisted of 1:1 meeting with my co-workers at lunch, asking random folks to spend 10 minutes with me in local Tim Horton for free coffee, and sending out links to my prototypes in the various common interest slack channel I am a part of asking for feedback. I was interested in learning how people interact with their co-workers as well as their thoughts on the concept of the early prototypes I designed.
The first concept was centered around polls. Co-workers can create fun polls around topics they are curious about and invite others to join via a unique link. General user feedback around prototype Polly:
General user feedback around concept Polly:
“Why not just ask the person in chat or something”
“I prefer to use slack for something like this”
“It is similar to Google form”
“How do you vote? Seems a little complicated”
“Do I have to log in?”
The second concept was centered around focused recognition. Co-workers can send each other compliments via a unique link.
General user feedback around concept Toast:
“Need more ways to recognize someone.”
“Can I write a note along with it?”
“How can I share it on social media?”
“Don’t have to log in, Cool!”
“ Is there a way to print this?”
“I get it. So I just share the link created from my message?”
It was evident that I needed to explore the focused recognition concept. Keeping the user feedback in mind, I decided to do a few more paper sketches in order to flesh out some of the key interactions and UI elements. I wanted to focus on creating a simple and flexible experience where users can quickly create, share, and receive focused recognitions.
For branding and visual design, I wanted to create a vibrant atmosphere where users would feel welcomed and encouraged. When picking a primary color for the project, I was searching for something that is synonymous with encouragement, excitement, and enthusiasm. The color Orange seemed to fit all the requirements. I also decided that Shout Outs would be a better name for the project since the previous name Toast, sounded a bit too formal.
As for the Shout Outs logo, I wanted to explore the Gestalt theory concept where each of the individual letters would morph into the shape of a megaphone.
Prior to starting this project, I was passively looking at React Js tutorials. Once I committed to the project, I ramped up my learnings by viewing tutorials from udemy and by downloading starter projects from Github in order to familiarize myself with React js and its capabilities. Earlier in my design career, I did work on developing static websites from scratch and having working knowledge of Html, Css, and Javascript helped a ton.
Maximilian Schwarzmüller has an in-depth React course on Udemy which helped me understand the basics and I was comfortable with starting the development of Shout Outs on my own. After completing the initial Front End development in a react environment, I created a document listing out backend capabilities that were missing from the project. At this point, I was leaning towards using Google’s firebase as the backend service. I knew I needed help in that area so I went on to freelancer.com looking for developers with specific skill sets (JS devs with React and Firebase experience).
I found a Developer named Avinash who fit the bill. After sharing the project goals and development requirements, Avinash completed the tasks and pushed his code to my Github repo for a small fee.
Shoutouts was launched towards the end of October 2018. My co-workers, family, and friends had a lot of positive feedback on the product and shortly after the launch, Shoutouts was featured in Product Hunt’s 2018 Maker Festival. I learned a ton about product management, marketing, and other areas of product development. Crafting this product from concept to delivery was truly a fulfilling experience for me.
