UX/UI Design | Contract Project | May 2022
The Nature Lodge
Reimagining the eco-knowledge experience for a sustainable and environmentally-friendly future.
Overview
Spreading Eco-Knowledge In An Online Capacity
The Nature Lodge is a local nonprofit organization located in Santa Cruz, CA, with a goal of spreading awareness about the environment for a more sustainable future. Their focus is on informing individuals in an online capacity, while working towards the ultimate goal of building an ecological campus.
Our team helped The Nature Lodge enhance their online presence through this redesign, to give individuals different opportunities to help out within their community.
Project Details
Role:
Team Lead & UX/UI Designer on group client project
Tools:
Pen & Paper, Figma, Optimal Sorts, Google Suite, Maze
Timeline:
Three-Week Design Sprint
Problem Statement
Environmental sustainability has always been an important topic, but there is still a lack of awareness around it. This is due to the lack of digestible media coverage and educational online content. Many believe that the government should do more to help, however find that they can make more of an impact within their local community.
Individuals do not have the appropriate resources to help out and need a way to efficiently access event information to learn more about how to help the environment, in order to make an impact on their community.
Hypothesis
We believe that by creating a seamless flow for users throughout The Nature Lodge’s website, we'll help them identify ways to get involved. We'll know this to be true when we see an increase in engagement on the website by 25%.
The Why
It's hard to garner attention of individuals around the topic of environmental sustainability when it's only talked about when a natural disaster happens. The Nature Lodge exists to be a place where individuals can learn about how to have these conversations in an educational way, rather than a place that scares individuals into doing nothing.
Current Website: The path a user takes to sign up for an event.
Business Goals
Ultimately, The Nature Lodge seeks to bring awareness to an important topic by being an educational hub for users looking for different ways to help within their community.
Research & Insights
Where Can We Make Improvements
The Nature Lodge wanted us to focus on improving the flow throughout the website, so we conducted research to understand places of improvement on the current website and other organizations.
1
Heuristic Analysis
To identify opportunities for change, we analyzed The Nature Lodge's website against design principles and found their website had 14 violations. Below are the areas we will be focusing on for this project:
Heuristic Principle
Consistency & Standards
Implication
CTA buttons are inconsistent causing confusion for users when navigating through the website
Recommendation
Set up design system that has clear priority and secondary CTA buttons to use consistently
Aesthetic & Minimalist Design
Navigation bar covers 1/3 of the screen making it hard to see important content on homepage
Make navigation bar more narrow in width to allow for more visibility of important elements on pages
Consistency & Standards
"Events" landing page holds an empty calendar preventing users from seeing upcoming events
Create one page containing all events and a calendar for users to reference when signing up
Recognition Rather Than Recall
Landing pages throughout the website do not provide insight to users on what the page entails
Include a description section at the top of the landing page to show users what to expect
Visibility of System Status
As users click on an event, they get taken to an external page to sign up with no event details
Include all event details needed for sign up and maintain the sign up process internally
2
Comparative & Competitive Analysis
We analyzed how The Nature Lodge ranks against other environmental nonprofits to see how they build trust and credibility to encourage engagement amongst individuals via events and volunteering
_edited.jpg)
-
Majority of the companies provide full event details for users when signing up for events
-
All sign up processes are handled internally on the website which establishes credibility for users
-
Some companies showcase their accomplishments from these events to help showcase impact
3
Current Website's Usability
To understand how users complete tasks on the current website, we conducted a usability test and observed users' behaviors and interactions with the website
Task: Navigate to the Events Page from the Homepage
-
Although many testers navigated to the Events page correctly, 44% of users incorrectly pressed the Join Us Today CTA as they were confused with the verbiage
-
About 74% of testers mentioned that the global navigation was not intuitive
-
When working through the task, around 3.7% of testers gave up and ended the test
Key Takeaways
Compiling the research from each standpoint revealed various pain points to be addressed in our redesign:
IMPROVED NAVIGATION
The navigation bar throughout the site takes up a lot of real estate on the page and pushes important information below the fold - improving this would allow users to see key information as soon as they land on the page
CREDIBLE INFORMATION
Users were concerned when signing up for events or volunteering opportunities as it led them to external sites which seemed untrustworthy and in turn decreased engagement on the website
Persona
But Who Are We Targeting With This Redesign?
We conducted 7 interviews to understand who our target users are and what pain points they're facing. After interviews, we identified our persona as Greta Depp.
Age: 24
Location: Santa Cruz, CA
Job: Recent College Graduate
Bio:
Greta is a recent college graduate who was super informed about environmental issues from school and is now looking for ways to incorporate this into her lifestyle now that she is back home. She wants to help increase sustainability within her community as she realizes that these environmental issues are directly affecting her life and those around her.
To dig a little deeper into Greta's current experience on the website, we mapped out her journey:
.png)
Click to see more.
Key Takeaways
#1
Users need information about how to help within their community
#2
We need to build trust and credibility within the website so users are more willing to donate their time, money, and resources to help out
Concept & Design
Building Out The Design Backed By Research
After analyzing the research from all perspectives, we concluded that we would focus our efforts on the Homepage and Events Page/Sign Up flows that are crucial to the user and the organization.
Wireframes
Homepage
A clear landing page that serves as the hub for all crucial information needed for the users
Events Page + Sign Up Flow
Displays all the upcoming events and details for users to reference when signing up
Hi-Fi Prototypes
Homepage
-
We reworked the design of the global navigation to an appropriate size that ensures all important information is not being pushed below the fold
-
Based on the card sorting tests, we've updated the global navigation to use language that is appropriate for users
-
Clear CTAs with descriptions are used throughout the website to allow for a seamless path from the homepage to other landing pages
Events Page
-
We expanded the landing page to showcase all events with quick event summaries along with the calendar on the side
-
On the Event Details page, an eye-catching event summary is included on the top with a clear CTA for users to sign up
-
Within the same page are key details to know before signing up along with a map and FAQ
-
Additionally, there is a section that shows open positions that users can sign up for
Event Sign Up
-
We decided to keep the sign up flow internally so that users are not skeptical when signing up for an event
-
Including a status bar and event details at the top allows users to know their progress and important details throughout the process
-
Once the users complete the sign up, they land on a confirmation page where they can add the event to their calendar and browse other events to sign up for
Testing
Let's Put Our Design To The Test
We conducted usability tests and found that users were able to successfully navigate through the website and sign up for events.
85%
users found the redesign more welcoming
100%
found that breadcrumbs were useful for navigating around the website
80%
found the multiple access points to the events on the homepage helpful
With these changes in mind, Greta now has an updated journey throughout the website.
.png)
Click to see more.
Final Prototype
How It All Looks After Testing And Iterations
After completing the tests, the team synthesized different ways to improve the redesign and make the overall user experience throughout the website seamless.
Future Roadmap
Reflections On My Journey
Working with a real client as a group was a totally different experience than the solo projects. Not only do we have to balance our client's needs, but also the team member's needs as well.
Due to the clear communication across the team and the clients, we were able to produce a final product that I am very proud of, but of course there are places I can learn from in this project:
-
Own Your Work: Being confident with your work and knowing what you are talking about is key when working with a client. If you are not confident in your work, the client can sense it and will not feel confident in you. So while the rationale behind our design decisions is solid, it is hard for me to verbally provide rationale behind my work due to my lack of confidence.
-
Setting Up Usability Tests: We conducted both moderated and unmoderated usability tests through Maze and found that our unmoderated results were slightly skewed due to user error. In the future, I would provide more context to the tasks that are probably easier to say when conducting moderated tests to provide testers with more clarity.