top of page
In collaboration with key stakeholders and a developer team, I acted as UI/UX designer to create and implement these changes to support both staff and guest needs while also driving revenue to support invertebrate research and conservation efforts in Colorado.
Butterfly Pavilion's Website Design Updates
During closures due to the COVID-19 pandemic, Butterfly Pavilion’s Marketing team took the opportunity to solve a number of problems related to usability after guest and staff feedback on non-profit’s website.
Changes made to the website UI include:
Navigation updates to highlight key revenue drivers
Alert Banner Updates
Events Page Calendar Integration
Events Page Calendar Design Integration
The Butterfly Pavilion Events page (butterflies.org/events) lacked an integrated calendar to organize upcoming events and promotions. This caused significant confusion among admin managing the page and guests planning their visits to Butterfly Pavilion, and resulted in a loss of potential revenue due to a lack of event accessibility.
The Design Process
In solving our event page calendar issue, the design and launch process took the shape of the following:
1. Investigate - Events Page Analysis, Competitor Research
2. Empathize - Key Stakeholder Analysis & Persona Identification
3. Ideate - Feature Prioritization & Sketching
4. Design - Wireframing, Prototyping & Launch Updates
Original Events Page Layout Analysis
The overall design on the events page on mobile and desktop was aesthetically pleasing and in keeping with Butterfly Pavilion’s UI design style guide and branding.
However, Butterfly Pavilion admin managing the creation of event pages had a difficult time organizing the appearance of events and archiving past events.
1. Events pages weren’t connected to a calendar database and did not populate in a meaningful order on the guest facing side of the site.
2. There was no sort or tag function differentiating event types (kid friendly, included with general admission, adult programming, etc.)
After a deeper look at the admin side of the site and customer facing side of the events page, I discovered the following:
3. Past/dated events existed in excess across butterflies.org/events. To remove them, they needed to be taken down manually and saved as a “Draft” in Wordpress. However, when reactivated after being updated, these events appeared by the original date they were published in the system.
4. Guests and visitors confused about events call Butterfly Pavilion frequently, resulting in a high volume of calls for our Guest Services team to manage which often times had an impact on customers visiting in person.
Community programs & events at Butterfly Pavilion account for more than 30% of annual revenue.
Page Layout Analysis
Relevant competitors in the Denver Metro area include The Denver Zoo, The Museum of Nature & Science, The Denver Museum of Art, and the Denver Botanic Gardens. Their websites all feature chronological event sorting on web and mobile experiences.
1. An interactive calendar that showed the current date while allowing for the selection of date ranges or individual days.
2. Tags that separated and categorized event types
3. A reset or “clear filters” button that reset customer selections on interactive calendars
Key features identified on competitor sites that Butterfly Pavilion lacked included the following:
Admin responsible for updating the events page include individuals from a number of departments: Marketing, Community Programs, Education, Fundraising, and Membership. All have expressed concern about the lack of organization on the events page and how it hides upcoming events as new ones are created on the site.
Most Butterfly Pavilion admin did not have prior experience using HTML or CSS to modify web interfaces. Ensuring that this updated feature was intuitive and easy to learn would be crucial to the success of the design.
Guest User Persona
Meet Molly Monarch.
Molly is a millennial mom with 3 kids in the Denver Metro area who is looking for safe virtual and in-person programming for her kids of different ages. She needs to be able search the web without a lot of hassle given that she is working from home and caring for 3 children at the same time. When organizations in her area don’t have easy to navigate calendars on their websites, she quickly moves onto the next one.
Because Butterfly Pavilion’s event page seems out of date, Molly takes her business elsewhere, costing Butterfly Pavilion revenue in terms of event registrations, visits and potential membership/donor revenue.
Molly Monarch’s persona represents 70% of Butterfly Pavilion’s target audience.
Discussions with staff admin and potential guest users led to a list of features that could potentially help improve the events page. I worked through feature prioritization with leadership and developers to ensure the first round of development had a high impact.
Features we decided to push into early production are highlighted below in orange. The rest of our features were bookmarked for future development, but not necessary in our initial redesign.
After feature prioritization, I worked up these wireframe sketches of our proposed mobile and desktop calendar changes, adding to the already existing designs while striving to maintain brand integrity.
These sketches helped myself, stakeholders and team members visualize the proposed improvements to the site before creating high fidelity wireframes.
High Fidelity Prototyping
Using Adobe XD and Adobe Illustrator, I took the approved sketches and created high fidelity wireframes of the event page redesign to showcase the improvements to our user experience. These pages were designed utilizing the websites pre-existing Butterfly Pavilion UI design guide and handed off to a developer for implementation.
Alert Banner Addition
COVID-19 presented a number of difficulties around communicating evolving operations changes and closures to guests and members at Butterfly Pavilion.
Since the start of the pandemic, the Guest Services team saw a significant uptick in call volume regarding changing policy. I was challenged to find a quick and easy solution to reduce call volume that met the needs of my team and our guests.
Prior to our addition of an alert banner, communications around changes in policy included the following:
Posting to Google Business
Social Media Posts
It is important to note none of these communications channels include the Butterfly Pavilion website. Because our team was in a time crunch to alleviate this issue, I performed a quick competitor analysis and search to discover website communication outlets that would be easy to design and implement.
An alert banner at the top of the page above navigation, or a pop-up window that appeared over top the page after loading.
Both served to announce closures and changes to operations, link to essential visitor information regarding operations, and could be implemented across mobile and desktop interfaces.
Option 1: Mobile & Desktop Pop-Up Window
I quickly created the wireframes shown above to present to my team and leadership. I designed high fidelity wireframes for the pop up and alert banner features to showcase the pros and cons of each.
Option 2: Top Level Banner
1. UX trends favor alert banners over popups because they are less intrusive on web pages for users.
3. Pop-ups may be blocked or dismissed accidentally by anti-ad software.
2. It would be easier to create for developers and require less responsive coding (floating, animation and drop shadows) across mobile and desktop interfaces.
With my recommendation, our leadership team decided to move forward with the alert banner option for the website. I then passed off these wireframes to our developers who were able to implement this design quickly for use by our team.
To check out the alert banner in action, visit butterflies.org or take a look at the screenshot below.
Alert Banner Justification
My recommendation to leadership was the alert banner, based on the following:
Post Launch Considerations
The alert banner did not have URL linking built in explicitly because of how quickly we needed the feature. This will be important to create in the future for admin who are not familiar with HTML.
A workaround for URL linking utilizes simple HTML. Below is an example:
Butterfly Pavilion is <b>OPEN!</b> To learn more about our operating variance with Colorado, <a href=“https://butterflies.org/visit/visitor-information/“style=“font-weight:bold; color:white”>click here.</a>
This would display on the site like this:
Since launching this alert banner, communications have become far more streamlined and less stressful for our team by reducing customer calls and allowing all to focus on in person guest experience!
Rethinking the information architecture and look of the navigation on Butterfly Pavilion’s website involved the following steps:
The Design Process
Since the creation of Butterfly Pavilion’s current website in 2018, the original navigation layout and information architecture of the site have become dated as the organization has grown and changed.
Updates to the navigation and website architecture are intended to help streamline and clarify the user flows while also driving revenue towards key departments like Membership, Butterfly Pavilion’s Online Shop, donations and events.
Immediate Removal of “Todays Hours” field due to COVID-19
Navigation Design Analysis
Immediate Removal of "Today's Hours" Field due to COVID-19
The original navigation of butterflies.org included a field that held “Today’s Hours” and showed the hours of operation for the facility, labeled “First Entry” and “Last Entry," as seen in the images below. Despite the appearance of this changing fluidly day to day, this field was static and had to be updated manually if business hours were to change for any reason, including inclement weather and variations in state and local guidelines around COVID-19 safety.
Given the frequency of these communications and the large number of platforms utilized by Butterfly Pavilion to share operational updates, this navigation feature was often overlooked and forgotten, resulting in confused phone calls and upset guests.
Another issue with "Today's Hours" is the appearance of this field on Butterfly Pavilion's mobile experience. A developer revealed this was an issue related to the positioning of the 25th Anniversary Logo that was a key marketing piece for Butterfly Pavilion fundraising campaigns.
Our team decided the easiest way to move forward was to remove "Today's Hours" and re-think the navigation entirely. That left us with the following starting place for mobile and desktop navigation:
Navigation Design Analysis
With "Today's Hours" removed from navigation, I was able to dive deeper into the design and architecture of the site, coming up with a list of proposed updates that would help improve user experience while also highlighting key revenue drivers.
Mobile & Desktop navigation both featured a hamburger menu - a compelling design choice that encouraged learnability across both experiences.
On mobile, the open hamburger menu drops below the fold hiding important pieces of navigation on the website.
The search bar was hidden in the hamburger menu.
Membership, which accounts for more than 40% of annual revenue at Butterfly Pavilion, was completely hidden under the word "Participate" which many users found confusing. This could be preventing users who want to become members from joining.
The Events Page was also hidden under "Visit" and needed to be surfaced to ensure consistent registration.
The overall design of the navigation is easy to use and follows Butterfly Pavilion's UI Style Guide.
A look at other non-profit Zoo, Museum and Cultural Centers in the Front Range showed modern web designs highlighted their key revenue drivers in their navigation bars. This included Donate, Buy Tickets, and Membership.
Screenshots below show navigation from the Denver Zoo, Cheyenne Mountain Zoo, and the Denver Museum of Art.
Going through Butterfly Pavilion's navigation, I created a map that shows the original architecture of the site. This includes the header menu and open hamburger menu.
Below is an updated architecture for Mobile and Desktop menu experiences. Since the hamburger menu is utilized in both, this made it easy to design one seamless experience that highlights the most important revenue drivers for the organization.
Everything highlighted in red was changed, added or moved to provide clarity for users. The most significant example of this was the removal of "Participate" and "Party and Event Rentals" which confused a number users and hid membership. The new proposed architecture was presented to leadership and intended to help with organizational growth.
Butterfly Pavilion Membership accounts for nearly 20% of annual revenue.
The design of the hamburger menu largely stayed the same as well, but adding the membership button and restructering the content in the drop down menus will be crucial to organizational growth over the next couple of years.
While the design of the desktop nav didn't change significantly, adding Membership, Shop, search and Events served to highlight these important sources of revenue.
Updated Desktop Navigation Design
Budgetary restrictions due to COVID-19 prevented all of these navigation changes from being implemented immediately, but restructuring the general architecture of the site has shown a 140% increase in education registrations QoQ .
Further growth is anticipated after all of these designs have been fully launched.
Mobile Navigation Design Updates
While the overall look and feel of the mobile navigation stayed the same, the updates in the overall structure and addition of buttons to the top helped create ease of use and understanding for users!
Integrating dates, times and an interactive calendar improved user experience on both the admin and guest sides of Butterfly Pavilion’s website. With the launch of these features, all departments that hosted events saw increases in registration and revenue, justifying the ROI for our changes.
bottom of page