Establishing the Look & Feel – and Why It’s Critically Important

In its most basic terms, the “look and feel” of an app is how the site looks to the guest and the mood it inspires when interacting with it.

The “look & feel” is defined by the following components of your app: Color Palette, Images, Layout, Fonts, Styling, Animation, and Sound Effects

The look and feel of an app can also be described as the app’s “personality.” Your app’s personality should match the attitude of your business and your business objectives while still fitting in with your guest’s expectations.

Version 1: Vinylmations

I chose Vinylmations for three reasons:

1. We could leverage pre-existing artwork used to create the actual Vinylmation collectibles (thus saving time and money).

2. There was a huge range of characters ranging from Classic Disney to Marvel to Star Wars.

3. Vinylmations were very popular with the D23 core crowd.

I spoke with Thomas Scott the artist who creates the Vinylmation art and he said Vinyls had a strong fanbase that spanned a wide age range. Kids liked to play with them and adults like to collect them. Looking around the office you would be hard pressed to find a desk that didn’t have at least one Vinylmation. So I created a faux 3D Illustrator effect layer to add to the print art to give the Vinyls depth, volume and shadow. I previewed designs for the PMs and the SVP on the product, got buy in and started implementing design with Vinyls and themed backgrounds to match the individual characters. Pooh in the Thousand Acre Woods, Darth Vader in the DeathStar, Mr. Incredible in Metroville. FUN!

Exec VP Review

We went 3-4 sprints into the project using Vinylmation look and feel prepping for a review with the VP of Disney Interactive. He loved the idea of Spark, but felt that Vinylmations limited the app to just kids. He wanted us to age both the app and look and feel up and make it more family oriented.

Time for an Agile pivot! Mid sprint I stopped Art production and went back to the proverbial drawing board to create some alternate versions. I turned to Style Tiles to quickly get something in front of execs for new approval.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the app. I used them to help form a common visual language between my designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the product owners. I had my artists create several quick style tiles, then we refined the two favorites for re-approval. One in the classic Disney Blue, and a neutral white version.

Style Tile V1

I opted to add Disney Infinity characters to the Avatar mix. To tie the two avatar look and feels together the a stylized frame was developed.

The white version with neutral grays was created with the idea of a classic portfolio case in mind. Something simple and elegant to contain and showcase Disney content, but not compete with it.

After the Style Tiles were completed we applied the new look and feel to a few key pages for comparison.

Style Tile V2

Style Tile number two applied the Classic Disney Blue to the background. We also planned to take advantage of parallax animations and have these faint translucent bubbles float about very subtley and form “Hidden Mickeys” in the background. New containers were created to contain and tie all the disperate avatar characters together. I also took the opportunity to colorize the backgrounds to establish a visual language for friends. Regular friends had a blue background. Trusted Friends a green background.

The Blue version was the one deemed a richer experience, so we moved forward with Style Tile #2, and went back and retreated all the existing art with the new look and feel. Then we tested it live with users, along with the newly implemented Sticker Packs.