Embed Notion - Notion Embed Generator
Beerbiceps Case Study
Beerbiceps Case Study

Beerbiceps Case Study

Created
Jan 10, 2021 08:52 PM
Last Updated
Feb 1, 2021 02:20 PM
Status
Current 👍
Stuff I did
Figma, WordPress, Custom Theming
Owners
So now the Beerbiceps Site is Finished let's see how it took me longer than usual, started on September 7th
 
notion image
notion image

Who is Beerbiceps?

BeerBiceps Pvt Ltd, a company that creates self-improvement content in various formats (7 Million+ online followers/subscribers) & has co-founded Monk Entertainment (Monk-E), a 50 member organization that provides content marketing & digital marketing solutions of all kinds.
 

Requirements

Charmi Sanghvi (Creative Head) from Beerbiceps emailed me about it
  • Blog Website
  • Wordpress
  • Custom UI
  • Wants newsletter + ebook to be sent on email input
  • Something like adesignguy.co video in background carousel interesting landing page.
notion image

Steps

  1. Discuss commercials and timeline
  1. Discuss more on timelines (cause you know changes hehe)
  1. Wireframing
  1. Moodboard i.e knowing what your client wants be it color dark theme? or even pics which makes them happy
 

Starting off

  • Setup basic Github pipeline with my account
  • Start a wireframe on figma
  • Finish the wireframe in 1 week
  • Shared the wireframe and started sending samples from 10th September
Making the Preloader Animation on Photoshop
Making the Preloader Animation on Photoshop
After finalising the loader this is the GIF I made will link the PSD file later for reference if anyone wants to know how it's made.
 
Setting up themes cutting images and all was done with the help of my Younger Brother he does basic Photoshop so they are attached below
 
 
Output of the preloader
Output of the preloader
 
Few were given by Charmi
Few were given by Charmi
💡
Blog website layout templating got over by 29th September 2020
 
But instead, there was a massive change to just remove the blogs and stuff and just start with a "Full-Jhatak" Ranveer showcasing him and everything.

How to go about it?

Wireframe on piece of paper
ask for a Figma/XD/Sketch file
Start from Scratch
 
Although, it's a custom design I made it on WordPress itself so as to manage the blocks and everything it'd be easy for their team to make certain changes be it a link or a Logo change and stuff it's so easy that it can be done using a phone as well.
  • Voila! The website is ready. First off it was
— beerbiceps2.adesignguy.co
— Then v1. v2. v3. v4. v5 🙃
v3.beerbiceps.com is still up and is a Blog Website
v5.beerbiceps.com is the one which is to be used live.

What else did I make?

  • I made a flutter app which fetched blogs using GraphQL.
    • notion image
  • Also made a whole different m.beeerbiceps.com experience just as to how Facebook does when it's a mobile site it opens so it was on ReactJS same Blog Fetch using Apollo
  • Made an amazing kickass video to showcase 😉
Video preview
Video preview
  • It's also a PWA.