Elévate Guatemala

Elévate Guatemala is Non-profit Organization.

Team
Members

PUBLISHED

Feb, 2023

TOOLS

SERVICES

WEBSITE DESIGN

Industry

Non-profit Organization

Project Description

We conducted an expansive review, analysis, and redesign of the Elévate Guatemala website to make it a more effective tool for expanding awareness and donor response.

These improvements will aid the nonprofit in achieving its goals of increasing access to education in underserved regions.

Elévate Guatemala’s website is sometimes difficult to navigate, and large amounts of text with no breaks make learning about the organization’s work challenging to digest.

Redesign Elévate Guatemala’s website, focusing on ease of navigation and bite-sized information.

Proto-Persona

We began with a simple assumption of who would primarily be accessing the Elévate site and their motives for looking out for this information. The proto-persona gave us a template to ask questions and research to prove or disprove attributes.

Competitor Analysis

Taking time out to research how other organizations operate gave us excellent context for the space in which these nonprofits exist. Looking at these sites analytically lets us see what worked and what was confusing.

Interview Recordings and Transcripts

Some upshots from our user interviews:

Regarding what drives someone in NPO spaces, Chin Sonu said:

“It’s like pouring water into a bottomless jar… but I still do it because I just can’t stop.”

Regarding the Elévate Guatemala homepage, Jina Lee said:

“It’s simple and straightforward… but confusing to navigate.”

Stakeholder Interview

Through Stefanie’s efforts, we contacted and sat down to interview Lauren Quintanilla, Elévate’s US Director of Operations. This interview was enlightening and helped us identify some key notes:

Elévate’s mission goes beyond providing scholarships; they are dedicated to nurturing well-rounded individuals.

Concerns existed about the website’s navigation and nav bar, and the site’s content was generally outdated.

Objectives focused on improving the newsletter’s visibility and the clarity of the website’s volunteer section.

Website Annotations

These annotations helped us identify the site’s specific challenges and offered guidance throughout the ideation phase.

Affinity Diagram

From all of this information, we took the time to organize these different thoughts into actionable sections. Likes we would work to maintain on the redesigned site.

Needs and Goals provided usable objectives and Pain Points were issues that needed resolution.

Problem Statement

How might we redesign Elévate’s website to present Program and Scholarship information in a clear, easily digestible format that empowers passionate individuals interested in supporting education in developing nations, ultimately increasing user engagement confidence and driving more donations to the organization?

User Journey Map

User Persona

Gathering and defining these insights and viewing them through our problem statement allowed us to understand better who our user is, our User Persona.

UX Hypothesis

Updating our outdated website to enable the purchase of tangible goods and prominently featuring volunteer opportunities will enhance user engagement, increasing donations and volunteer sign-ups.

Value Proposition

Elévate Guatemala provides access to quality education, literacy programs, and diverse, enriching experiences, transforming young lives and opening doors to brighter futures. Your support creates opportunities and broadens horizons, helping us build a more educated, skilled, and empowered generation in Guatemala.

Sketches & Storyboarding

Beginning with rough sketches and storyboards, we thought through how and when potential users would come across Elévate Guatemala. From a Google search? From word of mouth?

Card Sorting & Sitemap

During our redesign, we reorganized the information architecture around users’ three core questions when learning about Elévate Guatemala: Who they are, what they do (focusing on successes), and how the user can help.

User Flow Diagram

Testing our redesigned architecture through a user flow diagram was essential to see what the user would encounter and what path they would take to complete a particular task.

Moodboard

Alongside our initial prototyping, we continued constructing a mood board around elements that were effective in other web pages for organizations in the non-profit space. Layouts, bold colors, photography, and the copy’s voice and tone were all considered.

UI Style Guide

We developed a unified style tile to guide us, make building our high-fidelity prototypes less time-consuming, and act as a deliverable to the stakeholder. We kept the specific value of blue that the stakeholder associated strongly with its brand and used it as a jumping-off point to build the rest of the org’s palette. Included are iconography guides, typefaces and weights, and directions on how, when, and what style of photography is to be employed in communications.

We restricted typefaces to those available under the SIL Open Font License to promote stewardship and respect the donations that keep Elévate Guatemala in operation.

Wireframes - Navigation

After working through the information layout, we could return to our initial sketches with this new navigation in mind, which considerably sped up the nav bar’s prototyping process.

Wireframes - Primary Pages

The design kept primary pages that linked to sources simple and repeatable. We focused on maintainability through the primary and secondary pages since the Elévate organization is still small, and a staff web developer is an unwarranted extravagance.

Wireframes - Secondary Pages

Informational secondary pages are all kept consistent throughout the design. For one-off pages, we continued to use our previously employed components and kept custom one-page-only elements to an absolute minimum.

High Fidelity Wireframes - Mobile

Having a solid style guide made styling the Primary and Secondary pages a sinch. However, we sometimes ran into issues with a lack of content even when pulling from the Org’s other presences on the web, like Instagram and Facebook.

High Fidelity Wireframes - Desktop

Testing

Testing our high-fidelity wireframes with potential users provided helpful feedback on our navigation bar, homepage layout, and footer design.

Home Page & Nav Iteration

Using this feedback, we changed our hero image, reorganized homepage content elements, and changed the vague “Explore” verbiage on the nav bar to the more clear “About Us.”

Footer Iterations

Through two rounds of testing, we received feedback on our footer and used this to iterate on spacing, adjusting font size and weight, and realigning the social buttons so their touch targets are more prominent and easier to tap.

Final Output

Integrating these iterations, we created the following desktop and mobile prototypes. These two prototypes are descended from the same group of components, so building the website in a genuinely responsive fashion will be significantly less costly since each element will only need to be engineered once and then can be pushed and pulled as the viewport demands.

Next Steps

This effective redesign sprint resulted in good actionable deliverables for the stakeholders, provided after the project concluded. Potential next steps would include taking a more holistic view of the Elévate Guatemala web presence and designing a style-compliant series of templates for Lauren to post updates to the organization’s social media accounts. Adjacent to those templates would be a look at the current newsletter template used, adjusting it to match the prescribed style guide and creating better guidance on the voice that should be used and nurtured in these communications.

Creating one cohesive brand image is the objective for these next steps. Deliverables for such a task would be exhaustive and reduce the burden on org senior staff with limited bandwidth for outreach.