Designing a Year In Review
Last year we empowered over 5,000 restaurants
We looked at the data gathered from those restaurant websites to highlight the latest digital trends for the hospitality industry. With that data, we decided to create a Year in Review graphic that could live on our newly redesigned getbento.com blog. Here is how we did it.
How we condensed a year into one web page
This process started by laying out the final copy in photoshop to visually see how much content there was to work with and determine how to break it up. When doing so, I kept in mind the new getbento.com layout and design systems, which helped determine how to use color blocks, patterns, shapes, and typography to control how the information flowed and would be read by the viewer. These particular design elements were helpful in visually breaking up the sections, but keeping everything relatively close together to minimize scrolling.
Once establishing that initial framework and flow, it was time to determine which stats made the most sense to visualize and how. We decided early on that each section would have at least one visual, whether that be an illustration or device when necessary. Choosing which stat to highlight within the section was then determined by keywords within the copy. For example, for sections like “On the Menu” where we’re highlighting the most popular menu items by state, it made sense to illustrate a state within each set, and visualize its corresponding food item. The illustrations were made with a thin, rounded stroke to add contrast against the heavy weights of the shapes and typography. Subtle hints of color were then applied to make them more visually appealing and typography adjustments were made to further highlight the word or section we were visualizing.
How we brought life to the page
After being supplied with the illustrations we would be utilizing for the year in review, I started to imagine how they could be brought to life. We decided that having all the illustrations animated would be too busy, so I was tasked with animating only six of them. Since all of our statistics from the year were focused on our customer’s websites, the illustrations showcasing them were mostly menu items.
My initial approach for this type of animation is to separate the files out into layers in Illustrator so they are easier to manipulate in After Effects. When doing this it is important to envision how the animation should function so you know exactly how to divide up the file. For example, I imagined that an appropriate animation for the salad illustration would be to have it toss itself. For this, I had to separate the toppings of the salad from the lettuce and the bowl. Then all that was left to do was animate the ingredients tossing up and falling down at different intervals in a seamless loop.
While the salad got that treatment for the most popular menu item by state, the sliced avocado got a simpler wobble treatment. For the most expensive item sold on a website, you can see the lines of steam radiate from the steak. For the most popular item sold on a website, you can see the chopsticks picking up the ramen noodles. The last two animations were actually tech-related. The animation promoting the most popular day to use a gift card was a gift card sliding across a computer screen to simulate a purchase. The final animation of the clock was to show the peak time for people visiting our customer’s websites. The incorporation of these different animations on the site helped make it a more engaging annual review.
Check out the full page here — See you next year!
Written by Kayla Scheidel and James Coviello
