CASE STUDY
USBG - United States Botanical Garden
Website Redesign and Mobile Prototype
TIME
3 weeks
TEAM
2 members
MY ROLE
UX Designer
Visual Designer
User Researcher
Prototyping & Testing
Interaction Design
​
TOOLS
Figma
Miro
Trello
Illustrator
Challenge:
United States Botanical Garden (USBG) is a botanic garden in Washington, D.C. Upon examining, it was discovered that the website had a lot of room of improvement. The problem area revolved around the UI elements of the website including poor accessibility, inconsistent content placement and clunky navigation making it frustrating and difficult for users to gather information.
​
​
​
​
​
​
​
​
​
​
​
​
Goal:
To research the UI pain points experienced by the users while navigating through the current website and to improve its accessibility.
​
The mission of USBG is simple, to promote the botanical knowledge. Due to the pandemic, this could only be achieved virtually which meant a better online user experience with improved accessibility and smoother navigation.
Research & Problem Definition
The USBG's site is primarily used to:
1. Gather information about the location and visiting hours of the facility
2. Book a trip
3. Explore on-going events
4. Learn about the plants and botanical garden​
​
​
Proto Persona
We started by creating a proto persona of a regular visitor of the USBG website.
​
​
Proto Persona
Speaking with User and Conducting Usability Tests
​
We interviewed 4 users, two of which were visually impaired and one had color vision deficiency. This gave us a better idea of the UI pain points in the USBG's website. I conducted 2 of these interviews.
Testing Tasks:
​We designed three tasks for the users to complete in order to understand the usability and the accessibility of the USBG website. The three tasks include:
1. To find the garden hours
2. To explore the event calendar and select an online yoga class
3. Pre-register for the online yoga class
4. Share an event with friends
3 out of 4 completed all tasks successfully ​
​
​
Key Insight
​We created a matrix of high/low priorities for both the user and USBG in order to determine which area requires the most attention. Some of the top pain points highlighted include:
1. Some of the colors on the website created accessibility hindrance for users
2. All users found issues with the navigation of the website
3. The text heavy website distracted users from completing their tasks smoothly
4. The inconsistency of the website delayed the completion of tasks​
Heuristic Analysis and Red-Line Annotation:
We conducted the heuristic analysis of the existing website to evaluate its strengths and weaknesses. While we loved their vibrant photography and noticeable passion for their mission, we observed a heavy navigation bar, pages cluttered with extra and a color scheme affecting the accessibility. Moreover, the website was not responsive to mobile or tablet devices. We highlighted some of the areas the website needed help with, some of which are displayed in the images below with the help of red-line annotations.
​
​
Usability Testing - Navigation​
​
We tested the existing navigation of the website with two users, one on desktop and one on mobile. We used their meaningful feedback to determine the pain points of the navigation.​
​
Key Insight:
Below are highlighted some of the most common pain points for users.​
​
​
Hierarchy
Users found the flow of the navigation bar inconsistent
Accessibilty
User could not differentiate the hover state due to low contrast
Repitition
Users felt that many of the categories and sections could be simplified and condensed
Ideate & Brainstorming
The Redesign Process
​
Card Sorting:
I ran open-method card sorting sessions with two different individuals on the existing site's navigation. Both users had different approach but similar feedback. Some of the categories didn't indicate the context and therefore, were placed in completely different sections. They also created a new section for resources combining all the similar sub-categories under one along with dedicated sections for kids and events.
​
Internal Feedback:
After the activity, my teammate and I got together to observe the feedback and with mutual decisions, a collective sitemap was formed.
​
Images below display the Sitemap.
​
​
Site Map - Header and Footer
Wireframing, Prototyping
& Testing
Developing and Formulating Layout ​
​
Sketches to Lo-Fi Wireframes
Based on the user feedback, my teammate and I both started the process of wireframes with rapid sketches to put both our ideas on the table and fuel our inspiration. After that we compared our sketches and discussed our design decisions. ​
​
The designs we came up with had two consistent themes: to simplify the navigation and make the content as accessible as possible. I drew the layouts of the "Home" and "Event Calendar" pages which were later transformed into final designs. I wanted to highlight the beautiful visuals the facility has in order to attract the user as well as minimize the quantity of text. I chose a clean look for the layout for the user to smoothly navigate through the website.
​
​
A/B Testing - Homepage​
​
Key Insight:
We conducted 4 testings on the homepage layout, 2 each, to determine which of the two designs gets a more positive feedback. The users found the design B to be very lengthy and commented on design A's footer to be relatively more crowded than the rest the of the page. Overall, the users liked the minimal and concise look of both designs.
Wireframe Design - A
Wireframe Design - B
Mood Board and Accessibility Color Contrast
My teammate and I put together images, fonts, navigations and color palette as inspiration for the redesigning of our website on Invision board. The elements consisted of bright colors of nature which we put through a color contrast test to ensure that they were accessible by all users.
Moodboard
Color Contrast Check
Visual Design and Style Guide​
Hi Fidelity Wireframes and Testing​
​
I led the prototype of the hi-fi wireframes which my teammate and I designed together. Three users tested the hi-fi prototype of which I conducted two. They were asked to complete the following tasks:
​
1. Find "Hours and Location"
2. Locate "Events Calendar"
3. Register for "Yoga Class"
4. "Share" this event with a friend​
​​
​
Hi-Fidelity Prototype
Key Insight and Iterations​
​
The users appreciated the vibrant and minimalistic look of the website. They found the content to be well-organized and engaging. All users successfully completed all tasks. However a few factors delayed users and based on that, we made following changes to our design:
