What is PIH Impact?
A static microsite for building trust with potential donors and supporters by highlighting the impact of PIH's global health initiatives via a combination of striking visuals and data-driven narrative.
Context
In 2018, before we began work on a full re-design of the PIH marketing site, the Marcomms department at PIH wanted to experiment with new branding styles. We saw this page, which we knew we needed for our various fundraising efforts, as an opportunity to do that.
One of my first design tasks was to put together some sample mockups of this page. After getting some assistance from the team's Creative Director and viewing a bunch of our previous marketing materials, pages, and branding guidelines, I spent some time designing various versions of this page.
My Role
Organization
Technology Used
Sketch
Timeframe
Fall 2018
Audience
We had very detailed analytics data about the users that typically visited the PIH website, and who we would target with the appeals on this page. Based on this information, the Digital Marketing specialists developed copy and pulled aside statistics to appeal specifically to this audience. I, unfortunately, cannot share this data or the specifics of the audience breakdown, but that information did greatly impact this design, which was structured as a vehicle for the marketing copy developed as a part of the research phase.
Mockups
Armed with data and copy, I developed a series of mockups. The one here is the final version that we tried to build, and was the second major redesign/iteration. It took a few tries to get something together that made use of the brand's assets and design guidelines without being too bright and in-your-face, but that still retained the boldness and modern quality we were hoping to achieve.
Outcome
Unfortunately, this page never was developed or released.
The design and development of this page was one of my first tasks at PIH. And my work at PIH was the first time I had ever worked on a design project professionally, or on the front-end side of Drupal 8's CMS ecosystem. I spent a significant amount of time working directly with the Lead Back-End Developer and Operations Manager planning the work timeline, addressing feasibility concerns, and building out a template for micro-sites. We worked hard to make this page a reality, but the timeline ultimately wasn't feasible for a team of two.
There was also some internal politics surrounding the page that I at that point in my career had no clue how to navigate. In particular, there was some strong pushback during the development phase about whether this page's design truly matched the PIH brand. This feedback would have been very welcome during the prototyping process, but I unfortunately didn't receive it until after we had already started developing it. We did our best to try to address some of the criticisms, but in the end, it simply wasn't enough.
Anyway, in the end, the page was contracted out to an agency, and they did a fantastic job.
You might be thinking… why would you put such a tremendous failure on your portfolio site, Bianca? And the answer is: because I learned a tremendous amount in the process.
Retrospective and Takeaways
One of the biggest things I learned in the process of putting together my very first full-page professional design project was that the process by which iteration takes place matters. I found that because I created full-color mock-ups with real images from the very start, I received very little feedback on layout and information architecture and far more on the specifics of which color was used where, or what image would be best. In the end, the layout feedback didn't come until far later into the design phase. So, in essence: wire-framing matters. Do it.
The second major takeaway I learned in this process was regarding the use of color. This is actually a lesson I learned fully many years later, as a part of my design coursework at the Extension School, but the seed was planted here. In particular, while trying to use the brand's colors according to the guidelines I was provided, I kept running into the problem of feeling terribly restricted by the fact that we had around 5-6 brand colors. The way the infographics were presented, for instance, never really pleased me because I couldn't create color combinations that felt true-to-the-brand, but also readable, and distinguishable.
This is an problem that in the years since this project, I've seen many young designers and developers struggle with. And the answer is to simply expand the palette (duh), but as an inexperienced designer trying to color within the lines, it didn't feel like a real option. Realistically, though, as a designer, especially for digital formats that have such a high degree of complexity, 5 colors is not always enough. Take the primary color and develop hues and tints in increments (10% darker, 10% lighter, etc.), and use those in the design, as well. If the brand color is a super bright orange, everything does not have to be that exact color. I wish I could have told my younger self that when I was making this.
And the last takeaway I want to highlight here is the importance of adhering to design heuristics. If we had actually gone ahead and built this page, I can already imagine looking at the analytics data several months later and wondering why no one seemed to discover the carousel (nevermind, the fact that there is a carousel to begin with). The reason, of course, would be that the carousel doesn't really look like a carousel, and the tabs are not easily distinguishable as being clickable. So despite trying to draw attention to its existence with a giant button, it likely would have gone unused. I tried to re-invent the wheel here, when instead I could have adhered to and re-used a variety of well-known and well-used design patterns for creating tabbed content. That also would have had a side-benefit of likely making development easier, as we could have found and used a pre-built package or library for accomplishing this task.
Anyway, there are so many other things I have learned since designing this that I could also go into, pertaining to fonts, use of imagery, and other common design patterns. However, overall, I am quite impressed with and proud of this project as an early product from a very young and very inexperienced designer. I hope you are, too!