Latinan Website Redesign
Updating a Nonprofit’s website to Reflect the Needs of its User Base
Project Overview
Research insights led to a pivot that informed the direction of the redesign.
Project Details
- 2 week duration
- My Role: UX Designer / Researcher
- 3 Person Design Team
My Tools & Methods
- Interviews
- Competitive & Comparative Analysis
- Information Architecture
- Sketching and paper prototyping
- Digital wireframes using Figma
- Digital prototyping
- Usability testing
What’s the Challenge?
The current website does not provide clear avenues of engagement for potential volunteers and prospective grant foundations that are seeking information and ways to get involved.
A Design Rooted in Research
Initial Assumptions - Who Are the Users?
![]()
- The website needs to cater specifically to Latinan’s clients.
- Need to drive an increase in clients through the website redesign.
- Increase donations from individual donors.
- Latinan’s growth is dependant on diversifying its client base with higher paying clients.
Confirming and Debunking - Interview Insights
- Clients do not use the website.
- Latinan does not need support in finding new clients.
- Individual donors are not going to be the main funding source.
- Latinan’s growth is dependant on gaining funding from grants.
What’s the Solution?
How can we redesign the Latinan website so that it caters to the needs of potential grant foundations and prospective volunteers?
Opportunities for Improvement
The competitive and comparative analysis helped identify specific areas where the Latinan website could improve. Potential grant foundations and volunteers stressed the importance of a website that is rich in photos, infographics and success stories to draw them into the nonprofit’s mission.
competitive analysis
A Streamlined and Simplified Navigation
The current site map for the Latinan website lacks information that grant foundations and volunteers are looking for.
The simplified site map for the Latinan website creates consistency amongst the categories between the top navigation and bottom footer and facilitates ease of use across the site for the users.
Current Site Map
Revised Site MapIterate. Test. Repeat.
Paper Prototypes
![]()
![]()
Paper Prototypes
Initial Wireframes
After the paper iterations we transferred our design into initial wireframes. Our goal for the wireframing was to insure navigability of the website redesign as well as clarity and consistency of elements across the pages.
You can begin to see a common design language across the pages.
The Design Solution
How does it all look?
The insights gained from many interviews with Latinan’s volunteers, grant foundations and similar nonprofits were integral in crafting a design solution that satisfies the needs of our two main user groups.
Hi-Fidelity Design
We redesigned the website so that grant foundations and volunteers can easily:
A Splashier Homepage
The new Latinan homepage features a simplified top nav and a prominent hero image to draw the users in.
As you scroll down there is easy access to the mission statement, success stories and how to get involved.
The new Latinan homepage features a simplified top nav and a prominent hero image to draw the users in.
As you scroll down there is easy access to the mission statement, success stories and how to get involved.
About Us Page
The revised About Us page features Latinan’s mission statement and prominently showcases staff which potential grant foundations value.
The revised About Us page features Latinan’s mission statement and prominently showcases staff which potential grant foundations value.
Our Work
The new Our Work page highlights the services Latinan provides to its clients.
Additionally, success stories are featured prominently so as to foster an emotional connection with Latinan’s mission.
The new Our Work page highlights the services Latinan provides to its clients.
Additionally, success stories are featured prominently so as to foster an emotional connection with Latinan’s mission.
Get Involved
The Get Involved page creates a clear landing pad for potential volunteers that are looking at how they can contribute and be a part of Latinan.
The Get Involved page creates a clear landing pad for potential volunteers that are looking at how they can contribute and be a part of Latinan.
Donate
Although individual donors were not identified as our main users in the website redesign we have provided a donate page that is in keeping with the look and feel of the other redesigned pages.
Although individual donors were not identified as our main users in the website redesign we have provided a donate page that is in keeping with the look and feel of the other redesigned pages.
Ensuring the new website is accessible
I ran tests to see how people dealing with varying degress of color sensitivity would be able to read and navigate through the site and the results were overall positive. There was only one feature that required a slight revision. The color of the link buttons were darkened so that they could contrast against the background and be more prominent and visible.
Ensuring the new website is accessible
I ran tests to see how people dealing with varying degress of color sensitivity would be able to read and navigate through the site and the results were overall positive. There was only one feature that required a slight revision. The color of the link buttons were darkened so that they could contrast against the background and be more prominent and visible.
Results and Reflections
Next Steps...
There are certain features that didn’t make it into the website redesign because they were not a part of the initial MVP but would be beneficial to incorporate down the line to continue to improve upon the users experience.
- The creation of detailed bios for staff & board members
- Forms for potential volunteers to streamline the application processs
- Allow for donors to donate within the site instead of rerouting to PayPal
- Social media presence to expand Latinan’s outreach
Here’s What I Learned...
The original Latinan website was operating on an outdated and no longer supported Squarespace template.
We made the decision to keep the website update within the Squarespace CMS because we understood that it would allow the founder of Latinan to make easy to implement changes to the site down the line as the organization scales up and grows.
Working within a tight timeframe was beneficial because it forced the redesign to focus on features that improved site engagement for our key users, the grant foundations and volunteers.
My biggest takeway from this project was the importance of user interviews and how it informed a major pivot in our design direction. It was a rewarding feeling to contribute to the redesign of Latinan’s website to support its mission.
