ETFs are built like cars
At the end of every year, the Global head of iShares releases an “Investor Progress Report” in the form of a web page. In 2023, he decided that the report should follow a specific theme, and the theme for this year would be comparing ETF’s to cars.
Unpacking this idea
There were many ways to approach this. So I worked with the Project Managers and copywriters to figure out what direction they are taking the messaging while I started sketching up ideas.
Challenges
- This project will involve heavy executive decision making.
- Collaborating with a large working group- approximately 15-20 people.
- Brand visual identity: How might we find the middle ground between complexity and simplicty?
1. Evolution of automobiles (eg: Ford Model T to modern cars)
2. Evolution of car technology (e.g. Autonomous & Electric Vehicles)
3. Evolution of private transportation (e.g. rideshare services
What could this look like?
Looking at the ideas we had, it was time to explore how we can visually communicate this to users in a way that makes sense, stays on theme and illustrates evolution.
Early
Mid
Modern / Future
Technology
Telling a story
After bouncing ideas and reviewing potential image directions, it was time to think about how we can put some of these ideas together in a way that is captivating, but still acting as a complimentary piece to the content.
Storyboarding ideas
Idea 1: Evolution of autos
Shows evolution of function and style of automobiles up to this point. The illustration stays in the same position, however the wheels are consistently turning throughout the entire sequence. This will loop.
Idea 2: Evolution of autos, with focus on emissions and vehicle autonomy
Salim mentions his first car was a Volkswagen, so this will start with a VW style car. This will also illustrate improving carbon emissions as well as technology. The wheels will be consistently turning throughout entire sequence. This will likely not loop.
Idea 3: Evolution of autos, focus on transmission
Explores evolution through gear-shifting technology- from manual to automatic to touch screens
Idea 4: Evolution of getting to your destination
Explores how a driver would use their own private car to get to their destination to now using a rideshare service app to get there. Can potentially loop
Iterations & Feedback
In order to effectively communicate the work in progress, presenting the animation paired with the working copy worked in soliciting the most feedback in a shorter amount of time.
Version 1
Cars morphing into new cars with the wheels moving but position remains the same. There is also a person in the car that moves from the driver seat to back seat.
Executive feedback: This doesn't show any sense of the future and feels too static.
Version 2
Added a vehicle entrance to show the beginning of the evolution, as well as the vehicle speeding out the frame to hint at a fast approaching future. I also added slight bumps along the way to illustrate the vehicle inertia on a bump road.
Executive feedback: This was definitely an improvement from the last and the working group would be comfortable launching with this. However, the executive challenged to another iteration to to further drive home the message.
Legal & Compliance feedback: You can't use the beetle for potential infringement. (They were right)
Version 3
Added a more dramatic transition from the first car to the second, replaced the beetle with a more generic looking VW (Rabbit). decreased the road bumpiness as the evolution got to the modern car, and slightly delayed the speed off exit.
Executive feedback: Working group. executive, and brand approval!
Digging in the toolbox
I was not only creating new assets, I was also still designing a web page and other custom illustrations. In order to effectively execute I had to work with multiple mediums and design programs to put everything together and deliver.
All the design work started on Figma, since that is what I am most comfortable with when designing anything vector.
Once I saved the vectors as an SVG, I then defined the layers on Illustrator, which made it easier to import to After Effects
Once in After Effects, I use the Illustrator vector layers as a guide to trace and create keyframes.
To view in a preview / production environment, I uploaded the After Effects file to Lottie and had it published.
Processes and Technical Stuff
Duration: 1.5 months
Structure
- One Designer
- Head of iShares (This is very rare)
- Brand
- Marketing
- One Project Manager
- One Publisher
- One Developers
- Two copywriters
Workflow
- Waterfall, kinda
- Lo/mid/hi-fi iterations
- Twice weekly catch-up
Tools
- Figma
- Illustrator
- After Effects
- Lottie
Management & organization
- JIRA
- Miro