My Work

PMI – Make Reality

Bringing Changemakers to PMI

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 not familiar with what project management entails or 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

PMI collaborated with an advertising agency to initiate the Make Reality project in 2020. The process was slower than expected, missing a few key dates, so in late 2020 the project was shifted internally. There were three of us assigned to the project; a Visual Designer, Product Owner and myself, taking on the UX and Interaction Design role. We ingested all of the designs and made considerable adjustments to create a story and flow to the site. We also addressed the UX, which was poor due to the lack of research. It was on the three of us to make up lost time as well as creating an impactful site the Brand Team had been expecting for almost a year.

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 designer

Sktch

Ae

Frmr

pen + paper

Timeline

6 months to live with 2 week sprints

Ramp up

Assessing the Pieces

There were only a few pieces to this project that came from the agency. Not that anything was withheld, rather they didn’t account for so many scenarios, including: research data, mobile designs, ADA compliance, consistent user experience, etc.. There were a lot of complexities to think through with little to no guidance from research data.

The first thing we did was talk to our researchers and try to gather some data that we could use to make informed decisions. With that, we knew we could look at what was given to us by the agency and make adjustments or just start from scratch. We had a years worth of work and only 6 months until launch.

Initial Design Analysis

We discovered quite a few items that required further analysis, so we created a prioritized list to focus our efforts. We wanted an engaging, accessible design that would be equally meaningful for users around the globe. We knew we would eventually iterate the design, but this helped us focus our efforts within the given timeframe. Another small but important detail was that we needed to convert everything to Sketch in the process since we did not use XD. I tackled that task while also updating the UX, UI and addressed any ADA issues with font size, colors, and more.

Sketch Designs

Moving to Sketch

While moving to Sketch, I made the effort to look for areas of improvement and missing elements, such as a navigation for the microsite (yes, there was no navigation in the initial design). I also 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.

High-Fidelity Designs

Scrolling Animation

The user is met with text that changes as they scroll to help convey that all projects can become reality.

Scrolling Animation

A transition image that would show a relevant image from a story and a supporting piece of text that animated between “Make” and “Reality”.

Navigation

I created a simple navigation to house the stories and links to PMI so users didn’t need to scroll to find them. Also, with more stories coming, it gave them access to those not on the landing page.

Make Reality Stories

The heart of the site, the stories needed to be accessible and visible without the need for scrolling. I organized the necessary content so the experience was more desirable.

More Stories

With Brand making it clear that more stories were coming, I thought about a dedicated page for users to look through all of the content available.

Prototype

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 and explaining what we were thinking, but asking them to give estimates on stagnant screens was not enough. 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

Check it out!
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.

Next steps

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. For more on that, check out this page.