Company
Team
Time
Role
Tools
Website
N/A
Me, Robert S. (dev)
2.5 months
UX/UI Designer
Adobe XD, Boba
6/7/21 Update
Click here for a comprehensive guide on financial assistance and resources for frontline workers. Thanks to Allconnect for creating this discount guide and for reaching out!
WANTING TO DO MORE
This project was sparked due to the COVID-19 pandemic when shelter in place started back in April 2020. My friend (then housemate) and I were in my room thinking of things to keep ourselves occupied. We both were tech-savvy so we decided to go with something app based.
We had a quick brainstorm session of ideas, from self-improvement to music apps, but something we both resonated with was we didn't want to just improve our respective skills (my visual design and his mobile development), but to also allow ourselves to find a potential way to spread awareness and gratitude to the people who matter most during these uncertain times.
My friend's mother was a pharmacist, and he explained how she would still have to go to work as her job was considered essential. She thankfully received extra perks for her position, but still was putting herself at risk to serve others. We then immediately thought of frontline workers in hospitals, essential workers like cashiers, and how these people go unnoticed/unappreciated.
OVER 70%
According to Econofact, over 70% of the workforce is considered essential or frontline workers and that “average wages of frontline workers ($21.85) are lower than those of all workers and essential workers.”
We both have worked for companies that had dedicated times during the week to celebrate ours or others accomplishments on a weekly basis. But why not celebrate these things instantly rather than waiting?
This millennial mentality had us wanting to create some sort of social media-based app as it was a perfect way to curate stories that people can share easily and fast. We took inspiration from Twitter, Instagram, Facebook, and created a social good/media inspired app called ShoutOut.
ShoutOut was named this due to quickly shouting out some act of good that you or someone else had done. It also falls under the quick and snappy syllable name like other social media apps.
As this project progressed, another disturbing event in our country arose. In June 2020, as I was finalizing designs, the killing of George Floyd had the Black Lives Matter Movement enraged along with us and the whole country.
This opened our eyes into how ShoutOut was conceptualized at the right moment and had the potential to be more of a side project, but something that can inspire others, to do and spread social good.
SETTING UP FOR SUCCESS
Starting off the project, I sketched out the onboarding process for new and returning users to the feed page, the main portion of the app. The steps for a new user were designed visually familiar like other social media apps since they will be more comfortable using a new app. After signing up, the amount of steps is limited to one screen. This pagination allows the user to consume and digest the information more coherently and faster without being too overwhelmed by new information.
In terms of the information architecture (IA), this app was pretty simple in its highest level. Since we wanted to roll this app out quickly (we didn’t know at the time how long shelter in place was going to occur for), we decided to split our timeline into two deliverables: MVP and post-MVP. We gave ourselves 1.5 months to get our MVP off the ground, with weekly sprint meetings following an agile framework.
With this in mind, we wanted to focus on 3 out of the 4 aspects of this app - the onboarding, home, and profile page. The trending page and other desired features were meant for post-MVP.
DESIGNING WITH INTENTION
At the time, I wanted to get more familiar with Adobe XD, and this was the perfect opportunity to do so. Thus, I quickly sketched some lo-fi wireframes and proceeded with translating this into XD.
Examples of digital lo-fi onboarding screens
For the colour scheme, I chose this green based off Figs, a company that sells comfortable designer scrubs and medical apparel. Their green lineup of scrubs with its splash of blue resonated with us as it aligned with the app’s goal and it had a modern and sleek look.
I wanted this app to be something familiar my generation and other people would recognize. It’s like if Twitter, Facebook, and Instagram had a baby to make ShoutOut. The feed was based off Instagram, its liking feature off Facebook, and it’s generating of posts aka ShoutOuts was inspired by Twitter.
More importantly, the intentional minimal design is to not distract users from generating their ShoutOuts. My goal was to have these people have these spurts of inspiration whenever they launch the app, quickly reading the curated positive and uplifting posts of our society.
I wanted the logo to be our ‘like’ feature, so I brainstormed many options and eventually landed on a clap icon and was inspired with the lines that made it look like it was clapping. Our app ShoutOut, has the word shout, so these lines had that sense of sound and snappiness. Thus, our logo and ‘like’ feature was born.
After weeks of designing, from designing the lo-fi/ hi-f screens, logo, and incorporating the colour palette, we came to an unexpected halt as some personal issues came up for my friend. Keep in mind we both were also wrapping up our undergraduate degree with less than a month left (I even managed to pick up a product design internship at a SF fintech startup during this time). Luckily, I finished most of the designs with the exception of the profile page and other minor details.
We took a break from this project for about 2.5 weeks before I started to polish and iterate my designs. This was around the time when George Floyed was murdered by police, which reignited my flame to at least finish the MVP.
This shined a light into how ShoutOut could be used as a source of change and hope to others during difficult times, and how our current social media apps can be used to do just that.
With all that said, here is ShoutOut - enjoy.
PROTOTYPE
ONBOARDING SIGN UP FLOW (W/ ERROR SCREENS)
LOGIN FLOW (W/ ERROR & PW RECOVERY SCREENS)
POSTING SHOUTOUTS
CANCEL POSTING SHOUTOUTS
SHOUTOUT OPTION MENU (CANCEL)
LIKING FEATURE
SHOUTOUT OPTION MENU (DELETE)
READ MORE FEATURE
PROFILE PAGE
Even though most of the app was completed, I never got around to designing the edit ShoutOut feature, trending, and filter page due to the timing of the end of undergraduate year, everyone moving out, and me landing a new internship and freelance gig.
The trending page would have current and relevant social issues that's happening domestically and internationally (ie BLM Movement in America) to raise awareness and educate others on these important matters. The filter page would allow someone to filter the ShoutOuts by occupation, location, or type of ShoutOut (shouting out someone vs shouting out themself) to tailor a more personal experience.
EYES OPEN, HEART TOUCHED
This app started off randomly, but turned out to be a very inspirational design project that influenced the way I view current social media and unsung heroes. I knew going into this that there would be no numbers to help quantify my experience, but numbers don’t help explain the outcome I had with ShoutOut. With making ShoutOut, it highlights how society, myself included, does not demonstrate enough appreciation and gratitude. We take things for granted - from having running water to having a stocked fridge - which we shouldn’t as others are not as fortunate.
It’s the people behind the scenes who deserve the thank you’s, the people fighting for human rights we all should have, the people who should be ‘Instagram famous’, the people who should have the spotlight because if it wasn’t for them, we wouldn’t be where we are today.
So if you are one of those people, ShoutOut to you - you deserve it (and so much more <3).✊🏽