Case Study
Coming Soon - Instagram
Developing intuitive solutions through the discovery of common user criticisms
✦ Background
United Refuge operates by utilizing a global network to provide disaster relief to compromised communities. Their efforts include the distribution of food and provisions, setting up shelters, and filling logistical gaps. Despite their impactful work, their online presence was minimal and ineffective, hindering their fundraising capabilities. The previous site’s heavy text, poor imagery, and dated branding did not successfully convey the organization’s mission or appeal to potential donors and volunteers.
✦ The Challenge
Redesign United Refuge’s website and create a dashboard to manage donations and volunteer activities. The new solution needed to be visually appealing, user-friendly, and responsive for all devices. It was crucial to create a streamlined donation process, effective donor communication, and transparent reporting to build trust and engagement with the community.
Through the redesign, the aim was to enhance United Refuge's ability to raise funds and manage their operations efficiently.
The main problem I tackled was uplifting the client's online presence. As a young organization focused on providing aid to refugees, building resilience to climate change, and responding to other disasters, they had an outdated website that was cluttered with heavy copy and industry-specific jargon.
The landing page lacked any hint of an effective call-to-action. The site was also visually inconsistent and not the most responsive for mobile browser sizes. The experience felt bland, archaic, and did not inspire repeat visits or the desire to get involved. Screens of the original site can be seen below:
Research
✦ Goals
The primary research goal was to understand the needs and pain points of United Refuge’s staff and potential donors. This included exploring how a robust online presence could improve their fundraising efforts, as well as identifying essential features for the donation dashboard, key content strategies, and effective flows for the website.
✦ Objectives
I needed to Identify the key elements needed for an effective website redesign. I also needed to gain a clear understanding of the features and functionalities required for the donation management software. Finally, best practices for donor engagement and communication needed to be determined.
✦ Methodology
To define the problem and audience, I conducted user interviews and a competitor analysis. I interviewed United Refuge’s Director of Operations to more clearly understand the problem and gain insights into how they work, their fundraising strategies, and their needs for a new website. Competitor analysis involved studying similar donation management platforms like Funraise, DonorPerfect, Givebutter, Bloomerang, and Virtuous to identify strengths and weaknesses.
✦ Affinity Mapping: Gathering Valuable Insights
💪 Strengths & Opportunities:
+ Streamlined process boosts contributions
+ Strong web experience vital for scaling efforts
+ Informative educational tools
+ User-friendly interface enhances interaction
+ Efficient management maximizes impact
+ Transparent reporting builds donor trust
👎 Challenges & Gaps:
- Complex task and data management
- Lack of automation increases workload
- Limited transparency may reduce trust
- Weak online presence inhibits growth potential
Define
✦ User Personas
By developing detailed personas, I aimed to deeply understand the unique needs, motivations, and challenges of the spectrum of individuals who would interact with the platform. Administrative staff required tools that would streamline project management and drive fundraising efforts, while volunteers and donors needed a platform that supported their hands-on involvement and advocacy work. This step in the process guided my design decisions, ensuring that the final product not only addressed the specific user goals but also enhanced their ability to contribute meaningfully to the mission.
✦ Ideation
Based on the research, I brainstormed ideas for the website redesign and dashboard features and flows. The focus was on creating a modern and accessible online presence, along with a user-friendly dashboard that would provide critical information and data. The website would be far more appealing, and the dashboard would be based around a modular foundation.
✦ Project Goals
🎯 Aligning Goals with Technical Constraints
Design an intuitive interface for all skill levels
Create a secure, scalable platform
Improve fundraising efficiency
Enhance donor and volunteer participation
Provide transparent reporting and analytics
Design
✦ Interaction Design
🔷 User Flows
By planning the dashboard’s structure, it became more clear as to how key features and important information could be accessed. User flows were designed to map out the nuanced dashboard interactions, providing a seamless experience, while also taking error handling into account.
From here, multiple iterations of sketches and wireframes were created, refining the structure and layout based on feedback. Hierarchy for each module was also a major focus here to give straightforward access to the most crucial data. In order to cater to unique needs of the staff, I wanted to also offer the ability to customize modules and layout.
✦ Sketches & Wireframes
✦ Brand Core Values
The director of operations established that the core values of what their brand would represent would be Inclusive, Clean, Actionable, Trustworthy, Trailblazing, Natural, and Gender Neutral. The organization provided their original logos and a suggested color scheme for the new direction they wanted to pursue. I offered a number of options and we agreed on a similar color palette that was modern and accessible. Typography was chosen for readability and modernity as well.
✦ Logo & Visual Identity
The logo was given a much needed refresh to convey a clean, bold, and engaging tone while still being loosely based off the original logos provided. The new look demands to be taken seriously with its hard edges while still maintaining a friendly typographic feel that is simplistic and welcoming.
As time was a major constraint for this portion of the project, these branding assets were intended to serve as temporary placeholders, but the client liked them so much that they decided to keep them for a while!
✦ High Fidelity
From this point, I was able to assemble all the elements and styles in order to finalize all designs in high fidelity. The tool of choice for designing the dashboard screens was Figma, with both light and dark modes being showcased, whereas the layout and component structure of the website was designed and built entirely in Framer.
The Dashboard
The Website
✦ A Landing Page with a Clear Message
First things first, we needed a bold and effective headline and value proposition with a concise call to action. I then focused on prioritizing content planning while working with the existing copy. To improve the page's overall structure, I had to break up large bodies of text into smaller blocks with additional headers, making the information more readable and easier to digest. This was balanced with powerful high quality imagery, a consistent visual style relevant to the mission, and engaging interactions through tasteful motion. The call to action was now clearly evident and hard to miss, making it easy for visitors to donate, and the mission became more compelling with an improved sense of hopefulness and urgency.
✦ Consistency, Hierarchy, & Improved Flow
The previous site lacked consistency in layout as well as the presence of any sort of style guide. By utilizing components, I was able to create a visual language that felt cohesive, with opportunities to implement variation to avoid too much repetition. Establishing a clear hierarchy of content was key to guiding users. By improving the overall flow of the site and its individual pages, I made the experience more intuitive and seamless. Consideration was given to microinteractions in order to tuck away nonessential information and provide visual feedback through different component states.
✦ Outlining a Climate Resilience Initiative
The Community Refuge Project (previously the Community Climate Handbook) is an initiative currently in development that focuses on outreach and community involvement to prepare for challenges caused by accelerating climate change. The message here is a strong one, and I wanted to deliver it in a way that was effective and urgent, but also to inspire action and visitor contribution. Copy was again broken up to improve flow and an immersive experience. An interactive timeline clearly guides the user by highlighting critical phases of the project. By incorporating compelling visuals with impactful writing, this reinforces United Refuge's commitment to building hopeful and resilient communities.
✦ Fully Responsive
A primary requirement for the project was to make certain that everything would be fully responsive across any device size with specific breakpoints for desktop, tablet, and mobile. This process required meticulous attention to detail. A major challenge was ensuring that all images, cards, components, text elements, etc. were scaling, filling, and wrapping correctly to follow visual consistency using CSS Flexbox principles. To maintain layout, the logo in the header changes to a stacked orientation for the tablet breakpoint, allowing space for navigation without overcrowding. For mobile, the navigation adheres to the usual pattern of becoming nested behind an icon. Each breakpoint had their own grids and individual typescales that would adapt accordingly so content could wrap or shrink intuitively for proper viewing and fitment.
Test
✦ Gathering Feedback
Usability testing involved presenting website versions to United Refuge’s staff over a number of phases. Feedback was collected and used to make necessary revisions and improvements, and copy was further developed in increments in collaboration with board members.
While iterations were minimal, they focused on navigation and content strategy— specifically creating dropdown menu overlays (a learning experience in itself from a development perspective) with subtle yet effective hover states to target specific sections of the About page and to nest the Project pages. Content hierarchy was addressed sitewide, and active/current link styles were also added to the navigations' mobile variants. Finally, all details were buttoned up while keeping only the most necessary information in order to present to future investors.
Wrapping Up
✦ Conclusion
Through a website redesign, a rebrand, and the creation of a donation management dashboard, the result is a much needed update to the online presence of a budding startup nonprofit. This new platform now makes it easy for United Refuge to receive and track funding and interact with donors.
The process involved in-depth research and numerous design revisions, which enhanced my collaboration skills and provided valuable experience for future projects. Working with the United Refuge team has been a joy, and they've got big plans ahead.
✦ Next Steps
As time allows, my future design plans for this project are as follows:
+ CMS for blog posts
+ Public wiki
+ Educational resources
+ Well established social media
+ Additional dashboard screens and flows
By having responsive design as a focus, this project brought with it many invaluable lessons when designing for the gamut of device sizes. I gained insight into how patterns can be used and altered to be the most effective for a number of contexts. Through collaboration with the client, I also learned how to ask the right questions in order to solve real-world problems and arrive at practical solutions.
I realized there is a fine line to navigate in order to find balance and the right amount of variation within good design. I found myself asking a lot of questions. Is it too busy? Is it not enough? How can I effectively use a range of elements to avoid excessive repetition, to improve the flow and experience, but without overdoing it? I noticed I continued to refine my eye by knowing when to subtract, and when everything felt "right". But like most things, this is a perpetual work in progress.
Ryan Emmans 2024
