Special Bunny

Usability audit, taxonomy creation, UI changes, logo design

Business Goal

Special Bunny, a Carnation-based rabbit rescue and shelter, wanted to expand its regional mindshare and subsequent adoptions. By more effectively spreading knowledge about the proper care of elderly and special needs rabbits, Special Bunny hoped to increase the number of rabbits it successfully re-homed.

Design Challenge

Special Bunny was using a blog architecture to run its website. The non-profit needed a new way to organize, tag and visually present information so users could find, consume and share it.

Impact/Scope

I created a new faceted taxonomy for the medical condition section of the website along with UX/UI for the medical condition directory and a medical condition page.

Skills Showcased

• Information architecture

• UX design

• UI design

• Logo design

Click through the finished screens. Then, read on below for my end-to-end process from heuristic discovery work to creating the faceted-taxonomy that drove the UI artifacts created.

I kicked off by discovery work by auditing four other rabbit rescue organizations spanning California to New York to understand what worked about the content structure on their websites and where/how information findability/discoverability could be improved.

I created heuristic categories and rated Special Bunny along with the four competitors on the evaluative criteria I designed.

Evaluative Criteria

1. Does the website have the following channels?

Website (home page) | About | Donate | Volunteer | Blog | Newsletter

2. Is a successful navigation system present?

3. Do navigation titles and associated pages correlate?

4. Do the navigation scheme and layout actively support the user's goals?

5. What content formats do they use?

Web pages | Images | Illustrations | Enhanced images | Videos | PDFs | Infographics | Data/Charts | Events

6. Is there a clear mission message on home page/about page?

7. Is the audience identified on home page/website page?

8. Is a clear call to action present on home page?

9. Are interface action consequences clear?

(Buttons, menus, links, downloads, redirection, etc.)

I then created a rating scale for each website heuristic and assigned a numerical value. From these values, I visualized the success of content on each competitor’s website, including Special Bunny.

Each organization’s social media presence was also studied for context. The following were considered: follower counts, content types shared, audience clarity, organization messaging, post frequency and expertise in content reuse.

Core Finding

Currently, the Special Bunny site is not optimized for information findability or ease of browsing.

Cognitive Load Issues

Homepage purpose confusion & scannability. Of the five websites audited, Special Bunny ranked in the lowest tier for homepage usefulness and aesthetics. The homepage asks users to lift a high cognitive load. It is not scannable. There are multiple lists, and the content is not grouped sensically. It does not prioritize key actions or information instead "dumping" it in copy blocks for visitors to sift through. Rather than focusing on the dissemination of information, product placement captured the most real estate on the Special Bunny homepage.

The Special Bunny website navigation was cluttered, overwhelming and not structured to promote user ease of discovery.

By comparison, the All About Rabbits Rescue homepage ranked the highest for utility and aesthetics. Content was separated into small digestible chunks, and buttons with calls to action were prominently placed. Common regions allow users to focus on discrete subjects and take action. Additionally, the All About Rabbits Rescue and Friends of Rabbits organizations limited the number of categories in their navigations thus created a more accessible browsing experience.

Cluttered navigation with questionable prioritization. Special Bunny posts on social media (particularly Facebook and Twitter) drive good engagement, but the website is not structured to actualize the results of any momentum the social channels may be driving to meet business goals. The Special Bunny website navigation was cluttered, overwhelming and not structured to promote user ease of discovery. It shows evidence of an organization more interested in looking inward rather than educating the general public. Pages hosting content about the founder's rabbits and members of the Special Bunny family who have passed over the rainbow bridge are placed higher within the left-hand navigation (thus prioritized) above vital information such as medical information and rabbit care instructions.

During this phase, I studied and deeply empathized with the three core audiences to create the following user personnas. I reviewed existing audience demographics and completed collaborative empathy mapping to ensure the taxonomy I created would align with the lowest common denominator of understanding within the groups.

Current Owner

Summary

Current owners have have one or more bunnies but may not be caring for them as effectively as they could be.

Motivations/needs/wants

• Tips to entertain current pet

• Information about care improvements

Challenges/knowledge gaps

• Overcoming perceived feeling of expertise in

  all things “bunny”

Before approaching the taxonomy, I sought to document four dimensions of user sentiment before adopting a rabbit. These dimensions were:

• Unease

• Altruism

• Curiosity

• Overwhelm

I paired these dimensions with tone and voice guidelines for Special Bunny. Shaping website content using voice/tone recommendations that match existing user sentiments is an imperative step to match users’ frame of mind when reading the content.

See how I matched user sentiments with tone guide words below.

• Unease — Honest

• Altruism — Compassionate

• Curiosity — Assured

• Overwhelm — Certain

This formative work would guide me as I later explored language to honestly, yet compassionately describe the categories of medical conditions.

Objectives

• Create a structure that increases the findability of medical condition information

• Map a taxonomy with new facets that enables Special Bunny to deliver a more modular medical conditions library powered by structured content

• Preview what a page structure in the future state

Process Followed

Audit existing medical conditions content.

After reviewing the medical conditions section, I identified content that should be removed or moved elsewhere on the site. During this phase I effectively “cleaned” the taxonomy.

Identify types of information that could be described as a facet.

I began with work on the Special Bunny website. I consumed the content, noting which types of information were repeated or varied between the descriptions of medical conditions. Pictured below find a screenshot from the Special Bunny website along with indicators (at left) demonstrating how the content inspired the inclusion of a facets (at right).

Research conditions from the Special Bunny website as a user in Google search.

After reading about the conditions on the Special Bunny website, I searched for those same conditions via a series of subsequent Google searches. This helped me determine information gaps on the Special Bunny website. I noted down ideas for additional facets from this competitive research.

Identified the following facets to include in the medial condition taxonomy:

• Level of Urgency

• Recommended Action

• Season

• Condition Type

• Duration

Next, I tested the flexibility of each facet by exploring how I would categorize each condition within the facet category.

Level of Urgency

• Existing condition

• Low

• Medium

• High

• Can be fatal

Next Step

• Request a care plan

• Call your vet

• Visit urgent care

• Schedule a vet visit

• Move to a cool place

• Monitor for discomfort

Condition Type

• Chronic

• Episodic

• Infectious

View the taxonomy for each medical condition below.

Beyond building out the taxonomy for existing terms, I also provided the client recommendations to clean up its existing navigation structure, along with the terms I advise adding to the taxonomy over time based on their prevalence in my competitive research.

Medical Condition Page CMS Section Build Guides

CONDITION SUMMARY BAR

Segment: Level of urgency

Backend presentation: Radio button

User entry: Options — Existing condition, low, medium, high, can be fatal

Guiding text for the producer: Choose one.

Frontend appearance: Text label and icon, first in the condition summary bar

Segment: Next step

Backend presentation:  Radio button

User entry: Options — Call your vet, schedule a vet visit, request a care plan, visit urgent care, monitor for discomfort

Guiding text for the producer: Choose one.

Frontend appearance: Text label and icon, second in the condition summary bar

Segment: Condition type

Backend presentation:  Radio button

User entry: Infectious, episodic, chronic

Guiding text for the producer: Choose one.

Frontend appearance: Text label and icon, third in the condition summary bar

Segment: Duration

Backend presentation:  Radio button

User entry: Infectious, episodic, chronic

Guiding text for the producer: Choose one.

Frontend appearance: Text label and icon, third in the condition summary bar

Segment: Season

Backend presentation:  Checkbox

User entry: Spring, summer, fall, winter, anytime

Frontend appearance: Text label and icon

Elements Redesigned:

• Medical condition directory

• Directory filter

• Condition article page

• Menu

• Logo

Homepage Before Redesign

Click below to view.

Condition Hub Page — New Page Designed

Condition Hub Page Filter — New Page Designed

Condition Hub Page Hover Interaction

Condition Detail Page

Menu Interactions

Logo Redesign