Spill the Beans

Collection of Industry Professional Stories

Overview

Spill the Beans is a collection of industry professional stories and was created in hopes to shed light on various careers through raw and honest conversations. From idea to execution, I was able to bring my passion project to fruition and it is still in the works today.

ROLE:
Visual/Brand Design, Web Development, User Research, Wire Framing, Product Management

TEAM:
‍
Isaac Park
Haejin Suh
‍
TOOLS USED:
Webflow, Figma, Photoshop, Procreate
‍
DURATION:
September 2020 - Present

RESULTS:
Currently have over 150+ applicants and 70+ stories live on our site. (April 19, 2021)
l. BACKGROUND
Grace in college
🧐 Why Spill the Beans?
When I was in college, I never knew what field I wanted to pursue but I always knew I wanted to help others through my craft. I researched online, tried to connect with people on Linkedin, but still, I didn't know exactly what I was looking for. I couldn't find a page or a site where real-life experiences were shared from industry professionals easily and accessibly and decided that it would have been helpful if one existed.

A lot of people actually emailed me asking me to share how I got into the field of UX/UI and I realized that real experiences and advice from those who were further along their career were extremely insightful for those starting off. What better way to learn about a craft than from the people around you. That's when I decided to combine the skills that I accumulated over the years to publish my own site and create Spill the Beans.

P.S. It's spilltheBEAN.org since spilltheBEANS was taken πŸ˜‚
πŸ—“ Timeline
September 2, 2020 - After speaking to my friend about my idea, she encouraged me to follow through with it. That night I remember staying up until 4 AM to pour my idea into Figma and eventually moved my designs to WebFlow to work out the details.
Sept. 2, 2020- Working at 4 AM
September 8, 2020 - Nervous and excited, I officially announced the launch of Spill the Beans on Linkedin with only two stories on the site. I didn't expect much feedback and I envisioned myself having to privately reach out to individuals to ask if they'd be willing to share their stories. To my surprise, I received 450+ reactions and 50+ applicants willing to share their story on our platform on the very first week of launch!
Sept. 8, 2020- Launched Spill the Beans
Present Day- With over 30,000+ page views to date and 70+ stories currently in our pantry, Spill the Beans is currently in the works to continually improve and bring a great experience for more stories to be shared and read.
ll. IDEATION
✏️ Wireframing
I laid out what I wanted the website to look like on Figma and used it as a skeleton to further enhance and adjust the sizing and designs on Webflow.
Low Fidelity Desktop Wireframes
lll. RESEARCH AND USABILITY TESTING
πŸ§ͺ Testing out Initial Designs
After initial launch, my team and I wanted to collect feedback on how we could improve the overall experience of our site. We received various comments such as...
β€œThe text feels a bit too small in some areas on the site, especially when I read stories on my phone.”
β€œI had to scroll a long way to go back to the home page if I was in the middle of reading a story, especially on mobile.”
β€œWhen I was searching for a specific career field I was interested in reading, it was difficult to distinguish specific categories."
User Quotes
Based on the feedback received, our team and I started to make changes on our site.
lV. ITERATIONS
Improving Readability - Iteration #1
The body text used on the original design was difficult to read as stated during user interviews. In order to improve the readability and accessibility of the story pages, we updated the typography and sizing on our site.
Initial Body Text
Current Body Text
Spill the Beans Readability Before & After
Sticky Top Navigation - Iteration #2
In order to help users easily return to the home page or view other pages midway through reading a story, we made our navigation sticky throughout the site for both mobile and desktop.
Initial Non-Sticky Navigation
Current Sticky Navigation
Spill the Beans Mobile Navigation Bar
Improving Categorization- Iteration #3
Initially it was difficult to differentiate which story was under each career category on the site. In order to solve this problem, we added labels to each individual card with specific colors to represent categories to help readers quickly find stories relevant to their career path of interest.
Initial Card Design
Current Card Design
Spill the Beans Card Before & After
There are still many more changes that are planned and projected for the future so please stay tuned 😁
V. BRANDING
πŸ–Ό Visual Design
When deciding on the visual design for Spill the Beans, I wanted to keep the website friendly and whimsical yet reliable and professional. I decided to keep the main theme black and white with subtle hints of color throughout for emphasis. I also made my website purely illustration based since I wanted to bring back the uniqueness of hand drawn drawings.
Spill the Beans Logo Iteration
Asking our Readers
In order to see how our branding was depicted to viewers, we asked "How would you describe the Spill the Beans brand to a friend?" to see how our branding was aligning with our vision.
Reader Survey Results
VI. LIVE SITE
And now.....drum roll please!! πŸ₯πŸ₯πŸ₯
Spill the Beans Live Site
VII. CONCLUSION
πŸš€ What's Next?
β€’ New UI for cans to improve readability and accessibility.
β€’ Keep track of pages with high drop off rates and iterating on designs.
β€’ Finding ways to archive stories and make it easy for viewers to easily search for past stories that they Β Β  would like to view.
β€’ Continually find more beans to share their story and improve on illustrations.
🌱 What I Have Learned
β€’ ❀️ There's an AWESOME community out there, you just have to go and find it! Through this experience I think I'm most thankful for the connections I've built. The fact that people are willing to take the time to share about their career journey to help those around them still amazes me to this day and I'm so thankful. I learn so much from all the stories I read and I'm confident others will too.
‍
β€’ 😱 It doesn't have to be perfect. I had so many doubts on why I shouldn't publish this idea which is why I pushed it off for many years. I wanted to make my idea and designs as pristine as possible, but soon realized that it's okay to make changes along the way and not have everything figured out. Getting hung up on a "perfect"Β design would be unrealistic and would mean no idea would ever be brought to life.
‍
β€’ 🀩 Teamwork makes the dream work. When I first began this project, I was juggling marketing, development, illustration, communication, user experience, etc. all on my own. I'm eternally thankful to the Spill the Beans' team for setting aside to work on this project that we so fervently believe in.
‍
β€’ 🌻 Use what you know and expand on it. I have so much more to learn but I'm glad I'm able to have the opportunity to continually enhance my skillsets through the mistakes and successes I make through my site. Spill the Beans is still in the works today and I'm excited to see where it'll go in the future.

Thank you for reading!