Orphan’s Promise Website
Project Details
Date: 2017
Role: UX Designer, Project Manager
Who I managed: Copywriter and a Developer
Tools used: Trello, Google Docs, Photoshop, Illustrator
Orphan’s Promise began operations in 2005 by opening training centers in Ukraine aimed to help support and educate orphaned children and hurting families. As you might imagine, this type of work has unique demands. What started as one training center, morphed into a robust organization with multiple arms, partners, and global operations spanning over 60 countries. The central focus of providing orphan care evolved into many services in order to accommodate the varying needs of a long line of beneficiaries that was growing by the thousands.
This is where I came in. I joined Orphan’s Promise in 2017 and quickly took on the work of rebranding the organization (more on this here) and redesigning the website.
01 / Discovery
After completing a competitive analysis, a few things became clear. Not only was the current site clunky and outdated, but we desperately needed to better articulate the structure of the organization. Yes, the name is Orphans Promise (a name that had to remain intact), but orphan care was no longer the sole focus of the work.
After completing the analysis, I walked away seeing a clear gap. Many organizations double down on a sole cause. This wasn’t OP. Rather, OP continually adapted with open arms, to serve primary needs that were tied up with a web of other needs.
This needed a greater spotlight.
Moving forward with this key insight in mind, I took to the whiteboard to map out ideas to create user personas, user journeys, and affinity maps (this was before my adoption of tools like Miro, Notion, and Figma.)
After sorting through user needs and pain points, I created the below list of opportunities after finding each of these viable, desirable, and feasible:
How might we…
How might we provide clarity about what it is we do in addition to orphan care?
How might we best incorporate the rebrand visuals?
How might we make the website easy to use for an older demographic, while appealing to younger prospective donors from whom we wanted to gain loyalty?
How might we better share stories from the field?
How might we best disclose the magnitude of our global reach?
How might we simplify online giving?
02 / Ideation
Information Architecture
Now was the time to design and iterate. The first step was to think through information architecture. The former site was bogged down with obsolete content and a site map that I wanted to simplify. We condensed the site map and worked on a better alignment between our core pages and our rebrand. This informed our methodology for how we approached the home page.
User flow
The highest priority user flow that we needed to improve was online giving. There were too many steps, too many clicks, and too many new tabs and platforms. This required some digging with the marketing director, in order to ensure that our process conformed to the giving protocols established by our parent organization. Score! We received approval to adopt a new giving method that made use of an on-screen pop-up modal. Now, users could stay on the same page, while giving. Big win!
Wireframes and Prototypes
I had all I needed to begin the design process. This encompassed several rounds of wireframe iterations on Photoshop and Sketch (don’t judge me, I wish I used Figma back then), with input from key stakeholders.
Next, was finalizing the copy for the website. For this step, I managed our team of copywriters in ensuring that our brand voice and our marketing strategies were in sync.
After connecting with our developer to discuss the complexity and viability of several interactive sections, components, and ideas, she was ready to get to work.
03 / Testing
Developer Handoff and Testing
As a project lead, it’s of utmost importance that I adapt my workflow in ways that support the process and personalities of my team members. Luckily, my developer and I had worked together on several websites at a marketing agency. So I knew what she expected, and was happy to aid her in any revisions to content and components. This meant organized layers with nested naming conventions, exported content, and a general sense of helping make her life easier.
I took on extensive usability testing on all screen sizes and browsers and provided the developer with the necessary documentation on Google Docs (I use Miro now).
Launch
The big day came. The website was launched in time to exhibit at a key donor event in Florida. The response was overwhelming. The new giving platform was used at the event, which aided in an influx of donations. One of the major donors was so impacted by the improvements, that she made a donation in the form of bonuses to our marketing team in addition to her donation at the event.
The website redesign was a core vessel that helped grow the operating budget by 60% in its first year of use. It effectively provided an outlet for donors to read stories from the field and engage with useful content. The site also achieved our goals of effectively communicating our mission, structure, and updated visuals in a way that appeals to our primary donor base, while maintaining best practices in modern design. Perhaps most importantly, the online giving interface became a staple of our marketing efforts which directly impacts our global mission, and helps provide $12 million annually with which to “help take children and families from at-risk to thriving.”
04 / Retrospect
The biggest change to my process revolves around the tools used to execute the UI, and white-boarding tools. Figma and Miro are significant pieces I now use to design, iterate, and interface with stakeholders and team members. Using these tools when I was in the throws of creating this site would have made correspondence abundantly smoother.
