As part of a 2020-2021 initiative, Project Management Institute (PMI) wanted to attract young changemakers to the discipline of project management. Many of these individuals are unfamiliar with project management and how it can benefit their career. The purpose behind the project was to attract these users through social media and bring them to an engaging and informative site that presented stories about how project management can make any ideas a reality.
The Project
A Visual Designer, Product Owner and UX/Interaction Designer walk into a project... myself being UX and IxD. We were tasked with creating a modern designed website that would draw a younger demographic to project management. Based on data from our internal team and suggestions from stakeholders, we set off to make a site users could learn from but also interact with and feel like a part of the experience.
The Project Goals
To create an engaging microsite that draws in a younger group of professionals, educating and entertaining them while building a relationship with PMI. The site needs to be focused on a global audience.
Role
- UX Designer
- Motion Graphics
- Prototyper
Apps
- Sketch
- After Effects
- Framer
- Lottie
Timeline
- 6 months with 2 week sprints
Assessing The Pieces
The first item on the list was talk to our researchers about data that we could use to make informed decisions about our target audience. We also knew that this project must consider users globally, specifically India where PMI has a very large member base. It was also important to consider ADA compliance since that was a goal of the entire organization heading into 2021.
I wanted to make sure there was a flow to the page that would tell a story and engage the user. I set standards for how elements would overlap, story layout and more. As I updated the site with these rules, a really interesting idea started to take shape.
Getting Dev Involved
Early on I started meeting with two developers about the project. I wanted to make sure they felt comfortable with the design since this was the first time PMI was creating a site with scrolling effects and other interactive items. I would meet weekly, sharing the latest Sketch file, explaining what we were thinking, but it was difficult to convey the animation ideas and equally as hard for them to give development estimates from stagnant screens. We all decided that a prototype would be the best solution to truly understand what was being asked. So off to Framer, I went.
Framer Prototype
I created the prototype in a few weeks, looping in the developers and designer for feedback as I progressed. It worked perfectly for handoff because the developers could see how the page should scroll, the elements animated and the transitions from each section. Implementing the prototype sped up the development process, which was invaluable.
Side Note – This was the most complex prototype that I built within Framer up to that point. I definitely stretched my knowledge, learning to code more efficiently while pushing the app to get exactly what I wanted.
Evaluate and Iterate
We were able to launch the Make Reality site on the date that Brand had set for it’s initial campaign. The reception was even better than most expected, but we knew there were areas to iterate and improve on to fully realize the goal of the product. Within weeks we had gathered some amazing analytics and user feedback that helped us focus on what to tackle first.