Brief: Develop an effective timeline designed to illustrate the evolution of an organic or mechanical subject.
Timeline: 5 weeks
Platform: Web
Role: Product Designer, UX Researcher, Copy Writer
Overview
This project came to me out of my passion for learning about politics and economics and wanting to share this and provide a reference for people on how economics and economic policies affect people in their daily lives.
Problem
Addressing the lack of understanding of economics and its impact on everyday life while maintaining user engagement for the target demographic of 16-55+.
Research
My first step was to gather information on the most influential recessions and crises from the 20th century to the present. I researched in-class recessions such as the Union recession, the Korean War, and the Oil shock to name a few.
All the topics I researched revolved around man-made recessions and crises to show the viewer how these events unfolded and how it will affect them now and into the future.
Low Fidelity Designs
When starting off I had the idea of using circles as a main component for the design for not only aesthetic reasons but also it follows the idea of "how everything comes back around".
Test Animation
At this point, I liked where the animations were going. The intro animation was done, but I did have to go back and compress the circles from vectors to PNGs so it would be better optimized for the web. For the main animation, I wanted to slow it down, to be smooth and have a glide-like effect. I achieved this by increasing the animation time and adding easy in and out to all sections.
Prototyping
After the animation was finalized I realized making the section titles as touch targets the user wouldn't be able to click past the third section. This was solved by utilizing circles as the touch targets and then connecting them to the animation sections.
Final Design
Final Takeaways
Overall this project was a success. The next steps would be to revisit the touch targets and make them more accessible for users along with fine-tuning some of the animations. (Click to open Figma file)
