Urban Canid Project

Urban Canid Project Website Redesign

Tools used:

Wix.com -- creation of website
Photoshop -- to edit photos

Overview of Project

During my last semester at UW-Madison (Spring 2021), I took the course Life Science Communications 532: Web Design for the Sciences (LSC 532). In this course, we were given the opportunity to redesign a website for a client.

Our class was split up into groups of about 3 people. The groups were then expected to:

assign roles to one another and take on the roles,
listen to the client talk about the project and consider their concerns,
assess the current website with the group,
brainstorm design ideas and discuss them,
create the new website design with HTML/CSS Hand Coding or a drag-and-drop website building platform
test out the website for usability, and have a finished website design by the deadline to show to the client.

Our client was Dr. David Drake at the University of Wisconsin-Madison. Dr. Drake leads a research called the Urban Canid Project; this research has to do with studying canids, such as red foxes and coyotes, around the Madison, WI area. The goal of the research is to understand the interaction between the canids and an urban area, to learn more about the behavior of canids, and to spread awareness about canids in the area.

Our client expressed that he wanted to update the website, but wasn’t sure what to add to it. However, through our notes we took individually, my teammates and I came up with three major goals our client seemed to have:

Update the aesthetics
Make the website more interesting and encourage action/interaction/involvement
Take into consideration the usability of the website

Brainstorming

My team and I took note of what the client wanted and got to work with how we could make it happen using what we already have– aka the already running website. This is what we came up with:

Concerning the aesthetics:
- Color. Something we noticed about the website was that there wasn’t much color involved in the design. Although that was okay, we felt like the addition of color could make the website look more up-to-date and exciting.
- Images. In addition, the website presented many photos, but not very clearly. We felt that if we could organize the images on the website in a way that would show them off more, the website would also look nicer and more interesting; this idea led us to the next topic.

Concerning making the website more interesting:
- Catchy taglines. As mentioned above, we felt that the website could be more “interesting” with the insertion of images embedded into the information that was presented. We also felt like interest could be generated through the addition of catchy taglines to make it more fun.
- Action buttons/links. We felt that action buttons would be very useful in helping the user decide to learn more and therefore interact with the website. With the addition of buttons/links, the user would feel more immersed in the learning and maybe even want to get more involved.
- Involvement Options Visible and Available. Something we noticed about the website was that although there were some options for involvement, these options weren’t clearly stated. To increase interaction between the website and users, we felt that it would be necessary and appropriate to add features such as:
  - Volunteer
  - Donation
  - Shop

If these features were to be added, not only would they make the site more interesting, but it would also help the user easily find out how they could get involved with the research without having to take too many extra steps. We believe that by providing the information in a concentrated place, like the website, users would also be more likely to get involved.

Concerning usability:
- Change in layout/organization. Leading us to the last design idea we came up with concerning usability. The website presented its information in a manner that got the job done, but we felt like it could benefit from having a more effective layout for the user.

As a team, we agreed that users tend to lean towards not doing too much work to find the information they’re set out to find. With this website being quite information-heavy – seeing that it has to do with research– we felt that it would be best to incorporate the following to meet the users’ needs:

Navigation bar. The original website had a hamburger navigation menu that could expand to show the whole navigation menu. We felt that it would be helpful for a user to see everything (especially if they weren’t familiar with the project) versus having to do the extra step of finding the hamburger menu and then choosing a page to land on. In addition, by clearly seeing the navigation bar, the user would have an easier time finding information.

Relabeling. From our understanding, this website was meant to educate others about the research being done by the Urban Canid Project. We felt that if a user were to land on the website, they would be searching for information and would want to find it easily. To answer their questions or help them understand something, it would be best to clearly label everything so they could easily find it.

Quick summaries/definitions. The website was very informational– which is good for a research website, but we felt that it could be a bit overwhelming for the user who may not be as educated on the topic of canids. To make it less overwhelming, we felt that we could provide smaller summaries so the user could have an understanding of the information. If the user wanted to learn more, they would also have the option of learning more by clicking on an action button to get to another page with more information. In all, the user could have some control over the information they wanted which could help find information as well.

Creation Process

Our group chose to use Wix.com to create the website. We made this decision because of many reasons:

The simplicity of using a drag-and-drop website builder. After designing the website, the client will receive access to it so he can access it and edit it to incorporate some of our ideas into his current site. By using Wix, we felt that it would be easily transferred to his care, and it would be easy to use as well if he wanted to edit anything in the future.
The variety of features it offers such as animations of the webpage content, image insertion, different fonts, etc. Wix offers many features that are all pretty easy to learn how to use – no coding required. We felt that this builder would give our client a way to make the updates with little effort.
The marketing tools that it offers for the owner of the site to check on the statistics. Our client seemed interested in seeing how the users of his site interacted with it. We felt that having a tool where one could check the statistics, it would help fulfill this curiosity and help him understand his audience better.

As the leader of the group, I took on the task of creating the site map on the right. Once I finished the site map, I discussed it with my teammates and made some adjustments to make sure we were on the same page.

-----------------

I was in charge of 3 out of the 8 pages: The Homepage, Report an Observation Page, and the Learn page. In addition to the 3 pages, I was also in charge of making sure that the website theme was consistent and included all the necessary visible cues for the user to navigate through the webpage well.