International Needs Marketing Website
An Introduction of International Needs
International Needs US is a local, Grand Rapids area based nonprofit organization that was founded by a radical vision. In the early 1970s, International Needs founder Ray Harrison attended a worldwide evangelism conference and left inspired by church leaders to create strategic change for worldwide ministry. Ray's vision was simple. Rather than sending missionaries to foreign countries, Ray pictured an organization that would walk alongside Christian leaders who are already effectively ministering in their own countries and equip them with the means and resources to support and empower them to carry out their work in their communities.
Because each community is unique, solutions are tailored to the needs indicated by local leaders. Most of these solutions are categorized within one of the main five service areas of economic empowerment, refugee relief, gospel outreach, education, and health and sanitation. Today, International Needs empowers and works with local leaders residing in 16 countries worldwide including, Bangladesh, Colombia, Czech Republic, Egypt, Ethiopia, Ghana, India, Kenya, Nepal, Philippines, Romania, Slovakia, Turkey, Uganda, United States, Vietnam, and Zambia.
This nonprofit organization is funded by corporations, church groups, and individuals who are excited about making a direct difference in the lives of those in need and are motivated to provide equitable change in the world. Contribution to IN's causes is easy. By sponsoring a child for less than $20/month or making a one time or recurring donation, you are able to carry on Ray's vision and empower the communities IN and its leaders serve.
1. The Problem
In the fall of 2018, International Needs began a conversation with ElevatorUp with a desire to update their marketing website. They were running a Wordpress website that was originally built about a decade ago by a firm that had sold them an all-in-one platform that handled their marketing site, their donor base, and their payment system.
In the early 2010s, they had a certain vision they owned while their original marketing website was designed and built. While the site served its purpose and the organization's needs at the time, the site began to morph and change into something unrecognizable. As updates to the site were needed and requested and nobody driving strategy of the project, those in charge would make requests that drastically changed the purpose and the overall aesthetic, branding, and messaging of the site. With the pattern emerging, over time, their messaging had become blurred. Their aesthetic transformed into something unrecognizable. And, without proper maintenance to ensure the site was humming along, the IN team discovered a number of broken UI elements. Among these elements might have been one of the most critical. From time to time, the payment processor would not work as donors and sponsors were trying to sponsor children and make donations on the website.
The International Needs organization had come to a pivotal time in their history. A new president had been hired, and their contract with their previous service provider was coming to an end. They had already begun to envision the future and had purchased their donor database software outright from the rest of their system. The opportunity was ripe to begin exploring and evaluating options and think critically about how the IN brand might be perceived under new leadership for years to come.
During the kickoff meeting, we asked our main stakeholders, Jeff and Sarah, to walk us through the project background in order to identify what some of the current problems were from their perspective. We also played a game, called rose, bud, thorn, to pick apart current pages of their site to understand what elements or components were aligned with their project goals.
Some of the problems we uncovered during these exercises included:
- Their site was messy and it was difficult for visitors to find information they were searching for and needed on the website.
- Donors, partners, and visitors didn't leave the site feeling inspired, excited, and motivated to share what they had learned.
- They felt they were unclear in communicating what they did as an organization and couldn't easily find information explaining what set their organization apart from others.
- From the lack of clarity, partners, donors, and visitors didn't understand what they were supporting or how to do so.
- Between the sometimes faulty payment processor and the lack of clarity on their website, donations were not to the level they had expected for the efforts they wanted to pursue.
For us, these problems were exciting and became our guiding light throughout the course of the project. These problems were reframed into goals that our team would evaluate ourselves against at the outcome of the project.
2. My Role
My role on this project was to lead the product and client teams through a full project lifecycle of the redesign and build of IN's new marketing website. My product management style is very hands on with both the product and client teams. I would have to characterize my leadership style as that of a servent leader. While I enjoy being a team leader and liaison between teams, I also enjoy digging in and working through things nobody else wants to do. Meanwhile, I love giving my team the spotlight to shine and watch my team grow. While I was able to witness significant individual growth from my designer, I also watched the entire product team grow together and rely on one another more, which was really rewarding in and of itself.
During the foundational and design phases of the project, I was side-by-side with my designer, curating exercises and participating in and facilitating both the project kickoff and design workshop. As we worked through the market research and competitive analysis phases, we worked together to uncover insights and apply these learnings to the new website. Additionally, I acted as a reviewer during the wireframing and design phases and provided feedback to my designer as we worked through sketching and designing key screens.
At the start of the project, I outlined a high level roadmap of large tasks needed for the project, which helped facilitate conversation on how we should break this work down into user stories. At our sprint planning meetings, we determined which stories were ready to schedule and brought them into our sprint backlog. During and at the end of sprints, I reviewed work and shared it with our client team at iteration meetings to ensure we were continuously moving in the correct direction.
During this project, I also acted as the copywriter, and worked directly with our stakeholders to curate and edit existing website content. As content was ready, I worked on building pages and slugging copy into the CMS admin to display on the site. Toward the end of the build, I worked with our stakeholders to get the information we needed to set up various ancillary applications, like Stripe and Constant Contact and worked to get the information we needed to work through the integrations that were needed. Along with the team, we outlined a release plan of what needed to happen to bring this website live.
3. The Solution
To us, the solution felt very clear. We needed to bring a solid strategy to IN's online presence and cast them as an international leader in this work. We needed this new marketing website to hook visitors into their message at first read and show readers how they differentiate from other non-profits that might be doing similar work. We needed this site to be navigable, holistic, and act as a conduit to connect people with their mission and showcase meaningful content and stories that would inspire people to read, share, sponsor, or donate to their cause.
Along with the strategy, content, and aesthetic updates, we needed to ensure we were building the new website soundly using the best tools possible for their use case. We suggested they go with a hosting provider that would be better equipped to troubleshoot issues if one should ever arise. We built the site using Craft CMS, which allows the IN team to be able to update content seamlessly in the admin screens. Finally, we recommended the use of Stripe as a payment processor. With the Stripe plugin, the ability to change country names listed in the drop down to how much of a prepaid amount somebody could commit to, it was super manageable on the administrative side of things.
4. Our Approach
With my designer, we planned an interactive kickoff meeting for the International Needs client team. Not only were we meeting our stakeholders for the first time in person, but we were also bringing them into the fold and into the Elevator Up way. No detail went untouched for the morning; the room was prepped with snacks, coffee, and water. Markers, colored pencils, and scratch paper were situated in the middle of the table within everyone's reach. Agendas were printed and neatly arranged at each seat, pages of the existing site were splayed along the glass walls, and our visioning exercise was ready to go on the whiteboards, hidden underneath large adhesive poster paper.
After introductions, we walked the client team through a couple of games to help them get loosened up (it was early morning after all). We took this time to get onboarded into their thinking. A great deal of time was spent listening to them speak uninhibitedly about what they wanted to accomplish and why their digital presence was so important to them, especially during this time. By letting them run with open ended questions, we quickly learned the answers to the questions Why this? and Why now?.
Afterward, we moved into a rose, bud, thorn exercise in which we learned what was working, what was considered an opportunity, and what had to go on existing pages and strategy of their website. We also participated in a visioning exercise to learn more about which non-profits they consider to be in a similar space to them and which aspects of their brand inspired them and why. Gaining these insights onboarded us onto the project and into the headspace of our stakeholders. Equipped with our shared goals, we were ready to begin our foundational exercises.
At ElevatorUp, we built a design playbook. This is a playbook of exercises from which we would choose to gain foundational understanding about particular projects. We called each of these exercises plays. For this particular project, we chose to run two key foundational plays: a high level competitive review and user surveys.
Though we would have preferred to perform user interviews, we didn't have much time to be able to set up meetings so we opted for surveys. We ran this play because we wanted to better understand the habits of those who donated to causes regularly. A key piece of feedback we were seeking was a donor's age, gender, and what made this person trust a site to donate to a cause online. We also used the rest of the answers to validate our preconceived ideas and research around where information should live on a page.
Finally, we chose to run the high level competitive review play because we wanted to understand the industry norm of where information commonly lived on each of the main pages. We used the websites of organizations our client team admired as our benchmark. We went through one by one and noted each of the main pieces of content on each main page of the site and then affinity mapped our findings to understand which were most important. This allowed us to begin envisioning a high level information architecture from these insights to be able to start wireframing.
As we moved into the wireframing stage of the process, we identified six key screens with which to begin the process: home, who we are, what we do, where we serve, take action, and stories. From our research, these pages were the ones with the most content and the ones that needed the most work in regard to telling the IN story. In short, this is the reason we chose to focus on those.
After discussing content needs with the IN team, we learned we would be using most of the content that was already available on the site. I offered to edit and refine some of the content that would be reused, and Sarah helped create new content for some of the new sections we were introducing.
One of the important things I learned throughout this process is my admiration for designers to be able to quickly sketch out ideas and the need to allow them to go away for a bit to focus on what they need to do. Starting with a blank slate is an intimidating task, but when designers are able to take some time to get heads down and focus, they'll more than likely wow you with the result by translating these findings from the foundational piece of the project into thoughtfully laid out screens.
After reviewing these wireframes with my designer, we refined them once more before presenting them to the client team at an iteration. Being able to present these wires to the team at this time is helpful because without design, we can have a thoughtful conversation around the purpose of the site, which is what are we trying to communicate and which piece is most important to communicate first.
As we presented the wires to our main stakeholders, we gathered feedback from the IN team that made the wireframes and strategy stronger. After making a few tweaks and sending these designs over to the client team as a deliverable, we moved into the design phase of the project.
Because International Needs didn't come to us with a specific brand identity to use on the site, we needed to perform a design workshop. A design workshop is an interactive workshop we use to gather insights on overall brand personality, aesthetics, and tone of a company to create design personas and inform decisions when moving forward into the style tile phase.
With my designer, we curated a few exercises to run the IN client team through. Core exercises of this workshop included brand traits, aesthetic spectrum, and brand personality. A brand trait exercise helps reveal the brand personality and tone of voice by answering which traits are desired and undesired. For example, an acceptable response might be "Fun but not childish" or "Powerful but not complicated." An aesthetic spectrum exercise is a tool that allows stakeholders to rate where they would like to fall on a spectrum of a "this or that." For example would you consider your brand to be more calm or more lively? Is it more subtle or more flashy? Finally, we used the brand personality exercise to help stakeholders think analogously about their brand by playing sort of a mad lib. As an example, if my brand were a {noun}, it would be a {noun} because it is {adjective}, {adjective}, and {adjective}.
Listening to our stakeholders answering these questions made us understand more about how they wanted their brand to be perceived in the community and as a leader in the international community. These pieces gave us a solid foundation upon which to begin building style tiles.
Style tiles serve as a design deliverable consisting of fonts, colors, and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the product and client teams and provide a catalyst for discussions around the client's preference and goals. Mood boards can be too vague, and mockups can be too precise. Style tiles are the perfect in-between to help define the visual language of a brand. Starting conversations and refining style tiles allow us to quickly pivot design direction without having to rethink a number of screens. After style tiles are, in essence, approved, we are able to lay the designs on top of the wires.
Jeff Johnson, President of International NeedsThanks Jen and Amelie! Love the branding exercises. You led us in a very creative and helpful way. Agreed it WAS fun. :)
After presenting style tiles, we received minimal feedback on the direction. After tweaking a couple pieces live in the meeting, we had determined a style direction. With this green light, we were able to lay design on top of the wires and bring the pages to life.
It was about this time that I put on my copywriter hat and began reworking and editing current copy to include in design mockups. I also began to send requests to Sarah to create new content for new sections that didn't previously exist.
As we began to wrap up the design phase, ElevatorUp had recently hired a front end developer. We immediately brought her into the project, and along with my designer, we all worked together to identify specific components that might be able to be reused throughout the project. Being able to identify these and understand how many components we were building was key to the project because Craft CMS is component based.
While we got our front end developer started on grouping, building, and styling specific components, my designer began to focus on the last bit of design needed, which was creating the needed iconography throughout the site.
As more confidence was gained on how to work within the Craft CMS framework, my developer and I began to identify what needed to be built in the admin from a structural and development perspective. We put together a sitemap, and we used this as a guide to understand what needed to be build and where it would live from an architecture standpoint.
We also identified a few efficiencies that would enable us to move a little quicker. For example, as fields were added in the admin, I could input content so that once the components were styled, it would appear on the UI. Being able to work this way helped us save some time by putting me to work and being able to step in to help my team.
When we began development work, we had planned to develop and build the pages in order to how they were wireframed and designed. We quickly abandoned this approach and instead began grouping similar components and building them out in a more flexible manner. For example, we had a component that had a header on the left, and text on the right. In its most basic form, the component could appear as such on the page. Instead of building a new component to add icons or maybe even a button, we added those to the component as options to that particular component, making the components more flexible for multiple use cases.
As we began wrapping up the components that would live on the main page, we moved on to sketch some of the main elements on the pages we had intentionally left out in the wireframing and design stage, including the donate, sponsor, FAQ, contact, and thank you page.
As styling was wrapping up, we worked through the integrations pieces that needed to happen in order to launch. We knew we wanted to use Stripe as our payment processer, so I worked with Sarah to get the business side of things up and running. I found a great plugin that would work for our use case in the CMS and worked on preloading fields that would show in dropdowns and toggles. I worked on testing this feature, and my developer jumped in to finish styling the UI elements. About this same time, we set up the integration that would allow visitors to sign up for their Constant Contact newsletter in the footer of the site.
We finished up development on Friday evening and enjoyed our weekends, knowing Monday was going to be a big day. When we walked in Monday morning, we used our outlined launch plan to inform our big release to production. Our plan was to wrap up final tests and QA and be hands off by noon to start the go-live process. In short, we needed to push the staging instance to production, repoint the DNS, and turn on the Stripe integration.
After feverishly refreshing the page, our new webpage appeared on the site. And once we saw it was live, the team took a few minutes to celebrate! We spent the next day answering a few wrap up questions from the IN team and cleaning up a few styling issues in the UI. Once we wrapped up this first phase of work, we began to take our hands off the project and switched our conversations to that of phase two.
Is there anything better than a happy client? A few days later, we received a note from one of our main stakeholders, included below.
Jeff Johnson, President of International NeedsWe felt like they were truly invested and engaged to help us tell our story just as if it were their own. Not only did they help us envision what we wanted but also what could be. Then they actually created it!
We felt included every step of the way. Our site is inspiring and informative. Exactly what we asked for. Perhaps the best compliments came from our donors who have told "us" they love our new site.
5. Learnings
Despite the project being successful in that it was delivered on time, on budget, and the teams were happy, in retrospect, there are a few things I would have done differently, given the opportunity to do so.
- Started the project earlier: We officially kicked this project off in early January 2019 just after the holidays ended when everyone returned to work. The team was strapped for time and often worked from home nights and weekends to get work to a good place. I wonder if there would have been an opportunity to get started a few weeks earlier in early December to relieve some pressure that weighed on the team.
- Brought in a developer much earlier in the process: Though we didn't have a front end developer on the team until early February, nearly half way into the project timeline, it would have been ideal to be able to bring a front end developer into the project earlier in the process. There were a handful of pieces in the design phase that we weren't able to fully flesh out until having conversations with a front end developer to better think through how visitors might interact with different components of the design.
- Paired developers: Our front end developer came into a new team and a new technology stack upon hire. If budget and time would have allowed, it would have been ideal to pair developers to help even with the back end setup, something that took much longer than expected because we didn't have capacity from a back end developer to help. Especially toward the end of the project lifecycle, it would have been great to have had a few days support from another full stack developer to be able to wrap up the project.
- Understand the full scope of the payment processing: We learned toward the end of the project that the client team was expecting Stripe to integrate with their donor CRM. After launch, we made things right and worked through the steps needed to integrate the two together. This is a piece we should've taken more time to understand, map out, and work through the integration earlier in the project, perhaps as we were working through design.