A New Leash On Life

Summary

In this case study, I analyze a page from the website of an organization called A New Leash on Life. The goal of the organization is to train dogs. One way they do so is by providing training classes for the public. I identified the Classes page of the website to be critical to the conversion of curious users to newly registered students and supporters of the organization. Unfortunately, this page contains a number of formatting and design issues that may hinder users from registering for classes and thereby negatively impacting the registration rate for the organization. I’ve detailed these issues and proposed solutions that involves a redesign of the content of the page. The proposed redesign, complete with wireframes, addresses these flaws and can help improve the class registration rate for the organization.

Backstory

A New Leash on Life is an organization based in Oklahoma with a mission to “enhance people’s lives by training service dogs, therapy dogs, and rescued dogs.” The organization offers dog training classes to the public and runs a program for prison inmates to train dogs as well. Their website serves as a great resource to learn more about the various programs and the people who run the organization.

The Classes page of the A New Leash on Life website is perhaps the most important page on the site. It is crucial to the mission of the organization. Through here, users can browse through a list of dog training classes that the organization offers. Users can register for classes and potentially become long-term supporters of the organization. The page is highly informative and provides the names of the classes, as well as descriptions of what the goal of the class is, the price, the schedule, and links to the registration pages.

While informative, the page leaves much room for improvement. As a UX designer, I’ve identified usability flaws in the arrangement of the content and the visual design of the page.

Problem

The content of the Classes page has a host of formatting issues that have the potential to inhibit the user from efficiently understanding what the organization wishes to communicate. The severity of this problem cannot be overstated. Studies have proven a link between the design of a website and user distrust. While beautiful web design cannot guarantee that a user will trust an organization, deficits in the design can contribute to the user perceiving the website to be distrustful (Seckler, 2015). In other words, formatting issues and unsightly design may have a powerful enough impact on the user to prevent them from registering for the dog training classes provided by the organization. Addressing these issues is essential to ensuring that the organization does not lose students and supporters it may otherwise have had.


The problematic content of the page

I’ve identified formatting issues of the Classes page and the possible impact each issue has on user experience:

  • Although the information is sorted in bullet points, the page is a wall of text with little space between one bullet point and the next. The lack of white space and information chunking make the information appear overwhelming and difficult for users to make sense of.
  • The page is lacking in video or images. Images have the potential to quickly capture the attention of the user and help them visualize themselves using the service being advertised to them (Russo, 2018). Furthermore, the presence of images could break up the monotony of text on the page.
  • The text on the page is blue, and the same shade of blue is used on both the hyperlinks and regular text. The color blue has such a strong association with hyperlinks and clickability that its presence on the non-clickable text can leave users confused (Naji, 2016).
  • Similarly, the bullet points on the page appear as sideways triangles. On many websites, this style of bullet point is used to signify to users that they can click on the element to reveal more information. This is not the case here. Besides the registration hyperlinks, there are no interactive elements present in the content. Users may be confused if they click on the bullet points with the expectation that they are interactive.
  • There is a lack of consistent capitalization of text. For example, the word ‘prerequisite’ appears as both ‘Prerequisite’ and ‘PREREQUISITE’ on the page. If noticed by the user, this lack of consistency may lend to a sense of distrust and/or a belief that there is a little attention to detail from the organization.
  • The classes do not appear to be organized by any attribute. They are not organized by alphabet or by day of the week. Although the number of classes provided by the organization (at the time of writing) is not extensive, any potential area of improvement that could benefit the user should not be overlooked.

Solution

I propose a complete redesign and rearrangement of the content on this page that standardizes how the details of each class are portrayed. This can be done by placing each class in a box. Each box contains key details of each class: the title of the class, an image representing that class, the day of the week the class is held, a description of the class, prerequisites to be satisfied prior to registration, the cost of the class, and the register button. The order of the boxes are alphabetized by the name of the class. In every box, each piece of information is located in the same location to help users quickly find what they are looking for. They will no longer need to meticulously scan a wall of text to find the cost or what days of the week the class is available on. This new format chunks the information, thereby speeding up comprehension and processing time for the user (Moran, 2016).


Boxes containing the information of each class (List View)

If the user is on a desktop or a device with a wide screen, they can have the option to switch from a list view to a grid view. The grid view option makes each box take up less space on the screen, thereby allowing the user to skim through all of the options more easily. The downside of this format is that the class description is not visible in order to save space. Because of this, the default view would be the list view, with the grid view being available as an option to the user should they want it. In any case, the user will see the class description when they are taken to the registration form.


Boxes containing the information of each class (Grid View)

Some classes have multiple sessions that are held on different days of the week. I did not want to clutter the interface by having multiple register buttons for each session. My solution to this problem is to have a lightbox popup that activates when the user clicks on “Register” for these classes. This popup will explain that the class has multiple sessions and will allow the user to select what session they want to sign up for.


A lightbox popup prompting the user to select a class session

Since the organization is active and may add new classes in the future, a filter can help remedy the issue of an excessively long and overwhelming list of classes. One type of filter that may benefit users is a drop-down option that allows the user to select which day of the week they want to view classes. This simple filter would let users view only the classes that work for their weekly schedules. The default selected option is “every day,” ensuring that users will be able to see all available classes unless they specify otherwise.


A filter allowing users to select the day of the week to filter classes by

These proposed features effectively address the formatting issues identified in the previous section. If applied, they could help to create an intuitive interface for the user.

Expected Outcome

The redesign of the Classes page will help A New Leash on Life fulfill its mission to enhance people’s lives by providing training for dogs. The redesign does so by ensuring that users have an easy time learning about the variety of classes that the organization offers while removing any barriers that may prevent the user from registering for classes. These barriers included the overwhelming arrangement of content and the unsightly visual design of the page.

The redesign may increase the rate of registrations and generate new long-term supporters by helping the organization appear more professional and trustworthy to users. The clarity of information will prevent users from becoming confused or frustrated by the formatting of the information on the page. Furthermore, the redesign helps retain the attention of the user through the addition of images on the page. Ordinarily, users tend to leave a webpage within 10 to 20 seconds (Nielsen, 2011). However, the addition of images and the increased clarity of the classes being offered helps keep the user engaged and interested in the services that the organization provides.

References

Moran, K. (2016, March 20). How Chunking Helps Content Processing. Retrieved from https://www.nngroup.com/articles/chunking/".
Naji, C. (2019, September 9). Hyperlink Usability: Guidelines For Usable Links. Retrieved from https://usabilitygeek.com/hyperlink-usability-guidelines-usable-links/.
Nielsen, J. (2011, September 11). How Long Do Users Stay on Web Pages? Retrieved from https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/.
Russo, N. (2018, October 19). Why Images Are an Important Part of Your Website Strategy. Retrieved from https://businessresources.yp.ca/website/why-images-are-an-important-part-of-your-website-strategy.
Seckler, M., Heinz, S., Forde, S., Tuch, A. N., & Opwis, K. (2015). Trust and distrust on the web: User experiences and website characteristics. Computers in Human Behavior, 45, 39–50. https://doi-org.ezproxy.net.ucf.edu/10.1016/j.chb.2014.11.064