Harry Potter
Wish List
I can't even begin to tell you how exciting it was to have the opportunity to work for this franchise during my career. The work I did on the Harry Potter Wish List spanned two agencies and lasted for over 4 years. There was a lot of close work with one of my favorite UX designers, Lindy Weimer from East Taylor Creative and my favorite digital strategy minds, Bill Green as we figured out the best experience with all that Harry Potter magic we know and love.
The "Stratmap":
A "Stratmap" is a term Bill Green and I came up with while working on our projects together while at BFG. Essentially we would talk through brand ideas, objectives and personalities all while drawing on a marker board our visual interpretation of these musings. We found this helpful in creating a visual storyboard of where the project could go. We would present these stratmaps in person with the clients, me drawing and talking along with other account personal to carry the client through the brand immersion we had envisioned. It's a powerful tool, given the right client, project and budget.
On to Design:
I was the Sr. Art Director on this project leading several other art directors and designers from in my team. These are some of our first round designs. We worked off of some very good wireframes by Lindy Weimer. We had many long conversations and dream sessions together to get this experience right. Everyone did a great job on this round. The client had a lot to chose from and ultimately decided to go with something a little safer than some of these were designed. They still wanted to retain that magical world feel but in a more traditional format.
Continued Design:
The next round turned into a bit of a combination of the best of the initial designs. Clients have a tendency to want to do that and this was one of those projects where it didn't really bother me. However, the client felt these leaned a little too dark and wanted us to take a little more inspiration from some of the earlier movies and brighten it up a bit.
Some cool bits the JPGs can't show you:
-
The candles flickered and floated through the site
-
There were easter eggs in the floating photos
-
The Wish List shelf was drag and drop and it expanded as it was filled
-
The top frame aged with the characters and matched the sentiments of the movie selected
The Final Round (sort of):
These are some screenshots of the first live version we produced. It was a fun, heavily themed version of the site that was full of magic and mystery. While the desktop version was fun and rich it was not a good mobile site at a time where mobile usage was on the rise. My next challenge with this project was to optimize it for mobile.
Mobile V.1:
The mobile version took some careful planning and some tricky UI work to get it to work well for mobile. The textures and borders had to repeat without looking too repeated and without losing their character. I was able to get the download size fairly small for such a heavily decorated site.
Style Tile:
One of the things I did in this project was to create a style tile of assets and elements. I had starting making these for my teams so that when I had multiple designers working on the same project they were all working from the same base assets, colors and fonts. It's like a 1 page brand guideline but for web design. These also aid developers. I have used them in scenarios where I may turn over this and 1 or 2 other pages to a dev team and some very detailed wireframes for them to build off of.
This site was live for about 3 years before it underwent the next iteration.