Sketchy details to capture rapid ideations

How does anything begin unless it’s sketched or jotted down in very basic form? utilising any tools you have at your disposal.

The ongoing joke that a business or design started on a beer mat is actually, probably a very familiar tale for many creatives.

In the week 3 topic of ‘rapid ideation’, I was pleased to see that the beer mat method was actually a starting block for many a creative process (well the use of paper and pen anyway). For our assignment, we were asked to reverse engineer a finished interactive work we admired and to use a prototyping method that we learnt about to recreate the origins of said work, this was in order to break down the parts and processes that eventually reveal its beginnings in our own perception.

Image courtesy of Unsplash

I have always admired Apple and the user journeys that feature on their website, so I figured I’d focus on a seemingly simple browser scroll animation that features on the Apple website, to showcase the AirPod Pro headphones in explosive detail as my subject piece. In the user journey of said interactive animation, simply scrolling the website downwards with the mouse reveals the product via the use of lighting in the style of the natural dusk till dawn movement of the sun.

I have chosen to look at the first sequence of the user journey as the overall animation which it forms is huge and although amazing, it is highly detailed and has far too much interactivity to dissect in its entirety.

The whole sequence is certainly worthy of its ‘site of the day’ Awwwards nomination.

Visually I thought that the main elements that the original UX designers may want to figure out, would have been the complex shadows, light source and browser scroll position in unison.

I felt that the storyboard method of rapid ideation prototyping would be best for this as it was a linear timeline triggering multiple elements.

My first storyboard for the rapid ideation prototyping of the Apple website scroll animation revealing the Apple Airpod Pro headphones

I tried to explain the animation drawings in my first storyboard with descriptive text, this was because it wasn’t that easy to visually represent the fluidity of the moving shadows & lighting that is by image alone. I went on to create an additional storyboard that had a key legend colour system showing the lighting temperature, direction and where the light hits the product specifically all highlighted.

Advanced lighting position storyboard to help show where the omnipresent lights were hitting the high-end imagery

After creating the second storyboard I started to think that although the website was 2D per se, the actual lighting path was 3D, utilising the front and rear of the product for its movement path. I could have probably used a white hat method for displaying the lighting path in a 3D graphics engine to reflect the x, and y axis better than the 2D storyboard chosen.

Lastly, I applied the website overlay text positioning for the scene to an additional storyboard, the marker I used throughout my three storyboards was a percentage scale on the left side of the storyboard boxes.

This percentage marker represents the vertical scroll position of all of the elements in the browser window at the time. Again I’m not sure that the storyboard was the best prototyping method for this task as there were so many things happening upon scrolling, I do feel though that due to being able to add text to the storyboard boxes and have a vertical integration via the percentage scroll marker that I kept the linear nature of the animation in check via three alternate storyboards.

All in all I loved this task as I am a fan of storyboarding, having created a few short movies using this method in the past. What surprised & challenged was taking a finished piece of interactive media and trying to dissect down it’s moving parts, especially a process that has multiple dimensions at play. Mid process I felt that I could have used an alternate method to the storyboard protyping method, especially as the chosen media became all the more 3D as I studied it further.

References

Apple (United Kingdom). 2022. AirPods Pro. [online] Available at: <https://www.apple.com/uk/airpods-pro/> [Accessed 16 June 2022].

Awwwards.com. 2022. Apple AirPods Pro – Awwwards SOTD. [online] Available at: <https://www.awwwards.com/sites/apple-airpods-pro> [Accessed 16 June 2022].