Unfortunately I am not a storyteller. I struggle greatly when it comes to creating a story and laying it out in detail. So you could imagine how much shaking and sweating I did when I found out we'd need to create stories with full storyboards not once, but twice. Thankfully, memes always have your back and can serve as a great starting point for a story.
My plan for this storyboard was to create a story based off a popular internet meme from a few years back where someone who got accepted for a NASA internship eventually got their internship revoked for reacting to it inappropriately on Twitter when replying to a member of the National Space Council.
If you haven't seen the story yet, head over to the storyboard page immediately to go see it. Otherwise, you can see my proccess below.
User Interface
User Experience
Landing Page
I decided to use a hamburger menu instead of a traditional nav bar as I wanted ti try something a little different and felt that this style of menu would suit the storyboard site better. I originally wanted to use a morph effect on the title text because I saw it on other sites and thought it improved my experience but when the code I copied didn't work as intended, I ended up with a cool blur effect instead so I went with that.
A challenge I faced with the burger menu was that the menu items were actually accessible on hover even when the menu was closed, I created a class to translate the menu items off screen, and used javascript to toggle that class off when the menu was open so that the menu items would appear and then toggle off again when the menu was closed. I also used javascript to change the burger menu icon to an 'X' when the menu was open. Since I used Google Material for the icons, this was done by making the javascript change the innerHTML to a different icon code. It was challenging to get this right with constant opening and closing but eventually I got it to work using a counter and if statements with one icon activating when the counter was odd and the other when the counter was even.
Storyboard
I wanted to create a bit of a different experience for the storyboard, rather than some version of a clickable slideshow, I wanted my storyboard to play automatically. I decided to add user interaction to my storyboard by creating a pause/resume button as well as a restart button so that the user could stop and continue watching my storyboard as they please, or restart it if they want to.
The javascript for this part took a while to get right. After failing with foreach loops and automatic timers I ended up getting it to work using a function that would add a class to fade out of the current board and into the next board. I then automated by using a setInterval, calling that function every 2.5 seconds inside a custom startInterval function. The pause and resume were done using clearInterval to stop the timer and pause the storyboard, while resuming only required calling my startInterval function. I used the same logic used to switch between the burger and close icons in the menu to switch between the pause and resume icons on this page. To restart, I had to reset my storyboard index to 0, use a foreach to remove all the boards that already played, call clearInterval to stop the active timer and then call startInterval to start the process over from the beginning with the new index at 0.
Possible Improvements
There are some possible improvements that I could've implemented for my storyboard if I had more time to complete the project. These are improvements that I will likely look to implement at some point in the future. The first one is lazy loading of the storyboard images, this wouldn't visibly change anything, but it would improve the user's experience on the site by improving performance. The other thing I would've liked to implement was to use data attributes to add animations like zooms and pans to each individual slide which would've made for a more interesting storyboard viewing experience. I could also potentially modify the stroyboard animation to stop after one play instead of looping so that the user can choose whether or not they want to replay it by clicking the restart button.
Feedback
I asked for feedback from some classmates and generally got some pretty useful feedback both positive and negative. The main feedback I received was that the animation on the homescreen and the animated storyboard were both too fast. I resolved this by slowing both of them down by changing their respective timers in the javascript code. A positive piece of feedback that I received was that the hamburger menu was a good addition. I was told that the menu was very satisfying to open and close and that having it on the site made for a more pleasant navigation experience.
