Platform: Markting Website

Position: UX Designer ll

Year: 2022 - Present

 

Company:
Compassion International

Tools:
Figma, After Effects, Photoshop,
Principle

Team:
Whiteboard Agency, Senior Creative,
Content Team

What is Compassion Moments?

Compassion Moments is a photo-sharing app that gives frontline church partner staff the ability to easily provide sponsors with a view into the daily lives of Compassion children.

What is the Problem?

Compassion Moments found itself in a situation where we had developed a product, yet lacked the necessary digital marketing infrastructure to effectively promote it. Despite possessing a valuable offering, we encountered a gap in our ability to reach and engage with our target audience through online channels.

The cornerstone of our marketing website's success was undeniably the commissioned marketing video we had produced. Collaborating with the esteemed agency 'Blank' based in Australia, we trusted them with crafting the Compassion Moments video to convey our concept. Their great work not only communicated our vision but also served as the foundation for our marketing website.

Check out the marketing video below:

The Team

For this project, I engaged in collaboration with various cross-functional teams both within and outside the organization. Internally, my collaboration extended to teams such as UX Management, Creative Design, Content, and relevant internal stakeholders. Externally, I partnered with Whiteboard, an agency we selected early in the process to develop the website, recognizing their expertise aligning with our project requirements.

Research and Workshops

Throughout the project duration, I engaged in collaborative sessions with team members from the Content and Creative teams, conducting weekly workshops on Miro. These sessions involved brainstorming various ideas, refining content, creating site maps, developing user stories, analyzing competitors, exploring ways to better serve our users, and delving into other pertinent aspects of the project.

Check out some snippets from our Miro board below:

Initial Wire-framing from the Sitemap

After receiving approval from our internal stakeholders on the finalized sitemap, we proceeded to develop wireframes in tandem with collaborating with the Whiteboard Agency. This allowed us to refine our early ideas and provide the agency with insights into the envisioned development.

Final Result

These are the final desktop and mobile designs that we moved forward with. For these designs we focused a paging style website that captures each section in a scrole.

Takeaways:

Revamping Compassion's branding with fresh colors and elevating it to new heights was a significant focus of this project. Implementing a paging feel on the website was a departure from Compassion's usual approach, requiring close collaboration with the creative team to develop a branding strategy that would set the stage for Compassion's future identity. This collaborative effort was an enriching experience that contributed to shaping Compassion's branding trajectory.

One of the major hurdles we encountered in this project was the task of translating the content into 10 different languages. This necessitated the exploration of various solutions to ensure accuracy and coherence across all translations. Additionally, we had to adjust certain design elements to ensure that animations remained comprehensible and effective in every language.

Check out the live site