The US Botanic Garden (USBG) is a museum of exotic plants and flower gardens. USBG’s website does not compare to the live museum, however has great potential to be just as beautiful and inviting. It also offers many virtual experiences as the main highlight due to the pandemic.
CATEGORY:
Responsive Web Design
MY ROLE:
UX Researcher/Designer, UI/Visual Designer, UX Copy Editor
TEAM & TIMELINE:
Four designers, Three weeks
TOOLS:
Figma, Miro, Invision, Trello, Google Suite
USBG’s website is very archaic, with a cluttered information hierarchy making it difficult to scan, and various accessibility issues that may cause users to bail. It leaves the user wanting more out of the online experience.
How might we improve the virtual experience of the U.S. Botanic Garden so that visitors can see and explore the beauty of the garden and activities from home?
As a result of my team’s research, we decided to focus on creating a user-friendly experience by creating a cohesive design, including more visuals and providing easy access to information.
We reached out to USBG to get stakeholder input and were lucky to get a hold of Dr. Susan Pell, Deputy Executive Director. Dr. Pell mentioned that the website has a new page dedicated to sharing the USBG experience from home because of social distancing mandates, and hence, they would really also like for a stronger social media presence.
The team organizing users and stakeholder thoughts into categories
“We want to be seen as a leader amongst botanic gardens, and be a great resource for people.”
We were also able to find out important statistics about the website such as the most frequented pages, and also the major pain points:
the outdated design
the information architecture
how information gets delivered
After testing the website on several users, we concluded that every day users also experienced similar issues and more:
text is too small
wants more visuals (too much text)
too many tabs in the navigation
We plotted out the needs, wants, and fears to help us plan features that would provide the best value to both the organization and users. In the end, we want the users to be happy with the experience they receive. Our high-level goals were to provide:
a cohesive design
more visuals
easy access to information
Value Proposition Canvas
Since providing and receiving information is of huge importance, we gave potential users the opportunity to define the information architecture through a closed card sorting activity. Once completed, we knew that it was necessary for us to make the navigation easier to understand by:
decluttering the navigation menu
consolidating similar topics into strong main categories
eliminating pages that are repetitive or brief in information
Card sorts organized into a new site map
We individually sketched in Lo-Fi what we thought the homepage and navigation should look like. We each had great ideas that were carried into our final design.
Lo-Fi homepage wireframes
Mid-Fi Wireframes
Once we were satisfied with the Low-Fi homepage, we began to create Mid-Fi wireframes for five important pages within the website: Home, USBG at Home, Visit, Plants, and Learn & Programs. We made sure to include all pages and/content that Dr. Pell said received the most clicks.
In Mid-Fi testing, users commented on the inconsistencies in letter spacing, font, and button sizing. We thoroughly discussed user preferences and then established a style guide to unify the look-and-feel across all pages.
Empathizing with the users’ frustrations with finding important information, we identified areas where information needed its own space to be seen. In the midst of a pandemic, it’s no surprise that people would be curious about USBG’s online program of events, hours of operations, and social media.
While my teammates worked on other important parts of the redesign project. I challenged myself to work on this:
Discover & share this Animated GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.
Discover & share this Animated GIF with everyone you know. GIPHY is how you search, share, discover, and create GIFs.
An idea that I contributed to the redesign was the image boxes in the drop-down. My intention for images was to give users a visual aid of the topics. Users could at a glance know what the pages are about before clicking. In all our tests, users thought that this menu was an interesting and memorable moment in their experience. Given the positive feedback, we decided to move forward with the idea.
We did A/B testing on three users to find out which design option was better and to our surprise, the response wasn’t black and white. All three users wanted a combination of the two options presented.
To help design more efficiently, my team decided on all the details and UI patterns that would make up the design system. This style guide served as the standard to maintain consistency going from a Mid-Fi to Hi-Fi prototype. See snippets of the guide below!
We also took advantage of creating a components library, so that we could reuse the layers and make changes swiftly across all instances. Here, I worked on the navigation for both desktop and mobile, created the drop-downs, and also selected the images to be used.
I made sure that all the images used showed around the same level of vibrancy and clarity, and visually defines the topics.
This was a very intricate project on a tight timeline. Various sections had to be moved around or be consolidated, the copywriting changed, and the design system built from scratch. My team juggled multiple tasks in a strict amount of time and that meant putting in long hours to meet both the requirements and deadline.
This project really pushed us to think critically and creatively. Luckily, I was teamed with reliable and dedicated designers that made this project fun and low-stress!
I was reminded in this project that proper research is key to problem-solving. It would’ve been difficult to determine what to value and prioritize without understanding the need and wishes of the stakeholders.
Department of Education Responsive Web Design
Endangered Species International Responsive Web Design
“Let the beauty of what you love be what you do”
