Santa Cruz Valley National Heritage Area (Landing Page)- A UX Case Study
About Santa Cruz Valley National Heritage Area
The Santa Cruz Valley National Heritage Area (SCVNHA) honors and celebrates the natural environment, cultural traditions, historic places, and working landscapes of the watershed of the Santa Cruz River in Pima and Santa Cruz counties in southern Arizona. Their mission is to connect people to the historic, and natural treasures of the Santa Cruz Valley through education, preservation and promotion of its unique resources and living traditions.
Mission
For this project, I was tasked with the mission of creating a landing page for the organization of our choice in one week. After perusing the catchafire.org website (repository of projects), the SCVNHA’s natural beauty spoke to my inner nature-lover. As a non-profit organization, the SCVNHA relies heavily on donations & government funding to succeed. Keeping that focus in mind, I set out to create a landing page whose CTA is visitor donations.
Process
I started by auditing the current website’s features, themes & overall identity. The idea was to give visitors enough information to encourage a donation. With a feedback session scheduled in the middle of a week-long sprint, I set out to create a MVP to iterate upon feedback. I wanted to build off of the color palette of the logo to create a sense of consistency, this proved to be quite a daunting task (more on this later). I wanted to highlight the organization’s Mission, Vision & Method while highlighting the beautiful natural landscape the space has to offer. Pictured below are my initial sketch and design.
Feedback & Iteration
The initial draft was reviewed by 30 peers (classmates) and I’ve consolidated their comments below.
Navigation bar: Where can users go from here?
Adjust hero image opacity
Add CTA to top of page
Change social icon colors to match theme
Website needs more context before urging users to donate
There were many contradicting love/hate comments that catered more towards preference V. function. However, I welcomed every piece of feedback to be able to test the website’s usability. I stuck to my guns on certain features, like sticking with the yellow, while adjusting on the others. One major oversight on my end was not giving the users enough context to donate, highlighting the “why” would allow users to continue down the funnel. I re-positioned the Mission, Vision & Method portion lower on the page to insert the “about us” section to add context. This edit buried the CTA button so I added an additional button on the newly crafted navidation bar. This adjustment required a bit of shuffling with the logo for aesthetic purposes.
Pictured below are my final landing page and style guide.
Final Landing Page
Style Guide
Final Thoughts
I was excited to finally get my hands on a widely used industry tool (Figma)to execute this project. It was steep learning curve, but the plethora of resources online made the task feasible. Though I thought I had a grasp on color theory, choosing yellow as a primary color proved to be a steep uphill battle. Color palette generators are a great tool, but still require the human element for informational symbiosis. I also learned about both the power & pitfalls of feedback during this task. Not every piece of feedback needs to make its way onto your design, especially when it comes to nuanced preferences. There were many polarized points brought forth that I had to decipher, though feedback is necessary and vital…the design is ultimately my creation/extension. I’m excited to learn and continue to hone my design skills.