![Screenshot of year in review 2019 page](/img/2019-screen-light.jpg)
![Screenshot of year in review 2020 page](/img/2020-screen-light.jpg)
![Screenshot of year in review 2020 page](/img/2020-screen-dark.jpg)
![Screenshot of year in review 2021 page](/img/2021-screen-light.jpg)
![Screenshot of year in review 2021 page](/img/2021-screen-dark.jpg)
![Screenshot of year in review 2022 page](/img/2022-screen-light.jpg)
![Screenshot of year in review 2022 page](/img/2022-screen-dark.jpg)
![Screenshot of year in review 2023 page](/img/2023-screen-light.jpg)
![Screenshot of year in review 2023 page](/img/2023-screen-dark.jpg)
Sketch to Production
Ideas often start on paper or in a sketchbook. Here are a handful of elements from the sketch to the final result.
![Sketch of sticker section from 2019](/img/stickers-sketch-2019.jpg)
![Screenshot of the sticker section from 2019](/img/stickers-section-2019.jpg)
Inspired by the sticker bombed laptop, this section features stickers I designed over the years.
![Sketch of healthcare section from 2020](/img/covid-sketch-2020.jpg)
![Screenshot of the healthcare section from 2020](/img/covid-section-2020.jpg)
Working in healthcare in 2020 meant a lot of unknowns and several efforts to help our frontline workers, which surfaced this idea of badges or patches for each project.
![Sketches from the movie section of 2022](/img/movie-sketch-2022.jpg)
![Screenshot of the movie section from 2022](/img/movie-section-isolated.jpg)
Pop pop pop goes the movies!
![Sketches from the favorite things section of 2023](/img/fave-things-sketch-2023.jpg)
![Screenshot of the favorite things section from 2023](/img/fave-things-section-2023.jpg)
"Raindrops on roses and whiskers on kittens, Bright copper kettles and warm woolen mittens, Brown paper packages tied up with strings, These are a few of my favorite things"
New Home
As the year in review became a reoccurring project each year, it gained a permanent place on my home page. In 2021, I added the Year in Review section to rehanbutt.comOpens a new window.
![screenshot of the year in review section from rehanbutt.com](/img/home-section.jpg)
Music Over the Years
Apple Music Replay first launched in at the end of 2019, Just out of reach to be included in my first year in review. For following years I used the stats they provided to help generate a unique music section each year.
2019
—
Not Tracked
2020
527hrs
—
2021
564hrs
7% Increase
2022
327hrs
42% Decrease
2023
214hrs
34% Decrease
Movies Over the Years
Every year I try to generate a new way to visualize each section and add some new content over the years. Some sections, like this one requires quite a bit of prep to track each film watched. In 2021, I started a film log to help bring this section to life.
2019
—
Not Tracked
2020
—
Not Tracked
2021
161
—
2022
120
25% Decrease
2023
185
54% Increase
Code Over the Years
With any software project many lines of code are needed to bring it to life. Over the years, I have experimented with new ways to implement sections and standardize others.
2019
382333
—
2020
228660
40% Decrease
2021
116867
48% Decrease
2022
195818
67% Increase
2023
164246
16% Decrease
Pixels Over the Years
Desiring a new way to visualize each section, each year comes with many mockups. Many frames, artboards, canvas, and iterations generate a ton of pixels, all helping to conceptualize what will be shared each year.
2019
111303360
—
2020
272079360
145% Increase
2021
250057440
8% Decrease
2022
239088960
4% Increase
2023
310777920
30% Increase
Headers
The header is the start of the year in review experience and I like to have it start with something new, fresh, and bold. Check out my series of the sketches and iterations for each year's header.
![2019 neon yellow header](/img/headers/2019-yellow.jpg)
![2019 header with outlined letters and a gradient](/img/headers/2019-outline.jpg)
![Sketches of the 2019 header](/img/headers/2019-sketch.jpg)
![2019 release header](/img/headers/2019-release.jpg)
![2020 header with a giant gradient circle from the corner](/img/headers/2020-circle.jpg)
![2020 header with a small highlight circle on my logo](/img/headers/2020-corner.jpg)
![2020 header in dark mode](/img/headers/2020-dark.jpg)
![2020 release header](/img/headers/2020-release.jpg)
![2021 header with numbering and small lettering](/img/headers/2021-side.jpg)
![2021 header with stacked low opacity numbering](/img/headers/2021-grapefruit.jpg)
![2021 header with giant numbering](/img/headers/2021-big.jpg)
![2021 release header](/img/headers/2021-release.jpg)
![2022 header within a card with stacked lettering](/img/headers/2022-stack.jpg)
![2022 header within a card with lettering](/img/headers/2022-words.jpg)
![2022 header within a full height card with numbering](/img/headers/2022-big-number.jpg)
![2022 release header](/img/headers/2022-release.jpg)
![2023 header with sliced numbering](/img/headers/2023-cut.jpg)
![2023 header with abbreviated numbering](/img/headers/2023-half.jpg)
![Sketches of 2023 headers](/img/headers/2023-sketch.jpg)
![2023 release header](/img/headers/2023-release.jpg)
Movies2021
A deep dive look into the many iterations and unique aspects of the film strip movie section, from sketches and mockups to code experiments.
![The first several tiles of the final film strip](/img/movies-2021.jpg)
![Sketches for the movies section](/img/film-strip-iteration.jpg)
![Iterations of the 1st watch tile](/img/first-watch-iteration.jpg)
![Tiles from the film strip section](/img/film-tiles.jpg)
![Code snippet and testing for the horizontal scrolling](/img/movie-webdev.jpg)
Hidden Mickeys 2022
When I joined Disney I thought I'd add a Disney classic to the year in review. See if you can find the 5 hidden Mickey's shown below.
![Hidden Mickey in an interstate sign from the driving section of 2022](/img/hidden-mickey/car.jpg)
![Hidden Mickey from the farewell Pittsburgh section hidden in a chocolate bite](/img/hidden-mickey/chocolate.jpg)
![Hidden Mickey hidden in the address bar of the web section from 2022](/img/hidden-mickey/web.jpg)
![Hidden Mickey hidden in the photography section in the plane window](/img/hidden-mickey/travel.jpg)
![Hidden Mickey hidden as the image frame from the new job section](/img/hidden-mickey/new-job.jpg)
Stamps2023
Taking a cue from our passports, this year I created a stamp representing every major city I visited. These illustrations transformed a simple concept into a visual chronicle of my adventures.
![Passport style stamp for the District of Colombia](/img/stamps/stamp-dc.jpg)
![Passport style stamp for Chicago](/img/stamps/stamp-chicago.jpg)
![Passport style stamp for Los Angeles](/img/stamps/stamp-la.jpg)
![Passport style stamp for New York City](/img/stamps/stamp-nyc.jpg)
![Passport style stamp for Pittsburgh](/img/stamps/stamp-pittsburgh.jpg)
![Passport style stamp for Zurich](/img/stamps/stamp-zurich.jpg)
![Passport style stamp for Colmar](/img/stamps/stamp-colmar.jpg)
![Passport style stamp for Schwangau](/img/stamps/stamp-schwangau.jpg)
![Passport style stamp for Montreux](/img/stamps/stamp-montreux.jpg)
![Passport style stamp for Doha](/img/stamps/stamp-doha.jpg)
![Passport style stamp for Abu Dhabi](/img/stamps/stamp-abu-dhabi.jpg)
![Passport style stamp for Istanbul](/img/stamps/stamp-istanbul.jpg)
![Sketches of the passport stamp general concept](/img/travel-log-sketch-2023.jpg)
![Sketches of the Montreux, Schwangau, Zurich and Colmar stamps](/img/stamps/sketches-europe.jpg)
![Sketches of the Abu Dhabi, Doha and Istanbul stamps](/img/stamps/sketches-me.jpg)
![Sketches of the DC, NYC and Chicago stamps](/img/stamps/sketches-us.jpg)
![Sketches of the Pittsburgh and Los Angeles stamps](/img/stamps/sketches-us2.jpg)
Web Dev
Bringing these pages to life takes a bit of technical exploration. Experimenting with new web technologies or pushing existing ones to the limit is all part of the process.
![CSS Grid Layout](/img/webdev/cssgrid.jpg)
Playing with CSS GridOpens a new window for the Github section
Horizontal scrollOpens a new window test for the movie section
![CSS Grid Layout with Borders](/img/webdev/cssgrid-lines.jpg)
Playing with CSS grid lineworkOpens a new window for the roads in the driving section
![Multicolored movie tickets clipping path exploration](/img/webdev/movie-ticket.jpg)
Playing with clipping pathsOpens a new window for the movie ticket
Plane windowOpens a new window interaction for the photography section
Scaling typeOpens a new window test for a responsive footer
![Overlapping text test](/img/webdev/overlapping-type.jpg)
Overlapping typeOpens a new window test for the header
Interactions & Easter Eggs
Fun little moments are a critical part of my work and my year in review is no exception. Each year I include a series of interaction, animations or an easter egg for a bit of delight.
![Baggage tag barcode](/img/easter-eggs/2019-barcode.jpg)
rehanbutt.comOpens a new window encoded barcode
Wowwee, a secret emoji
Meow to Chicago!
Tag, tag, rainbow tag, you're it!
No flash photography 😛
"Metaman, express elevator! Dynaguy, snagged on takeoff! Splashdown, sucked into a vortex! No capes!"
Color separation interaction
Springy & bouncy lettering
Particle field background element
Filing away old projects
Movie posters fanning out
Popping popcorn & a hiding poster
Golden ticket reveal
Glowing jukebox at night
Chicago Cat 2
Hi Barbie!