Why is a redesign needed?
In a first case study I decided to redesign several parts of OTOZ Animals website - to make this happen I focused primarily on benchmarking and auditing the current website. Then I present my final design mockups. Main goal of redesign is to increase conversion rate of donations and pet adoption inquiries, by improving information architecture and visual appearance. I had experience working with OTOZ as an account manager, so I used my knowledge and experience to match design with the actual business needs.
This is a conceptual and not implemented project.
Main OTOZ goals as an association:
To achieve its statutory goals, OTOZ conducts a number of activities in the field of animal protection, education and social assistance. One of the forms of promoting activities is running a website that serves as an information platform and encourages support for the association.
How does the website contribute to achieving goals?
Why is a redesign needed?
In my opinion the main website is able to have a real impact on conversions related to donations and adoptions but the current visual appearance is slightly inconsistent, making the design cluttered and difficult to navigate - especially in terms of achieving the organization's goals.
Before
After
Before
.jpg)
After
Before
After
Current website
Audit
After the analysis of current website state, it became apparent that the website would benefit from a restructuring. I conducted a detailed audit of the current website and its structure. On its basis I marked potential problems that may prevent user from taking certain actions (1,5%, donations, adopting an animal) and highlighted all the good sections that I can use in redesign. There is mainly a problem related to the structure of website and naming of individual sections, which significantly affects accessibility and readability. Layout of present site makes it difficult to achieve association's goals.
Current information architecture is quite extensive in several pillars, while those marked with a circle lack any additional information. ‘’Adoptions’’ section looks very similar to the ‘’Shelters’’ section, which may cause a bit of misunderstanding when it comes to looking for an informations. Besides that, ‘’Information” section consists a content that can be appropriately placed in other segments (adopt, what is 1,5%, actions, media about us). Based on this structure, it is difficult to determine what is the priority in the activities and what is most important when it comes to guiding users.
Good practices
Slide banner with information about the association and its activities.
Use of information about donations for OTOZ, bank account number and making it as a different frame.
A large amount of content in the form of articles and news, providing a good basis for use in redesign.
Using video content to promote social media (storytelling and promoting other channels).
Placing an active OTOZ fundraising for a specific purpose from an external platform.
Potential problems
No “search” button in any form to help find content or sections that you are looking for specifically
There is no highlighted section regarding adoption or information about the 1.5%
There is no visible CTA so donations element blends in with other green tiles.
Articles content fills a large part of the home page, so important sections have no chance to stand out.
Sections are not named, so navigating the site may be difficult. Lack of section names and headings seriously affects accessibility
Good practices
Ability to enlarge a photo and display it in full resolution on the screen.
Featured name and basic information about the animal.
List of photos placed under the main one - encouraging to adopt with more than a text.
An extensive description with lots of details about the animal's temperament and character.
Giving you options to check on other animals looking for a home.
Potential problems
There is no highlighted information about the shelter and no contact.
The description is a blend of text, it is difficult to separate different pieces of information about the animal.
The ‘back’ button is placed in a less intuitive position - this can make navigation more difficult. Common practice is to place it in the upper left.
No section name, poorly visible CTA on a button, lack of option allowing free movement of animals profiles in the section on a carousel basis.
Before making any decisions towards design changes, my first step was a desk research, where I checked websites from a different associations and companies. Group of websites that I looked for includes polish associations working in the same area and also foreign ones. This helped me to find common procedures used when creating a home page and inspired me to come up with certain ideas. In this case study I decided to focus mainly on a main page and adoption subpage, where I see the biggest business value.
Example 1
.png)
Each of the pages included in research has a fairly simple information architecture. Regardless of the market, they are using main header appearing on the main page - in most cases it includes CTA (donate, support, check the report etc.). Visitors can also use the "search" function. Website plays an informational role, but above all serves as a platform for supporting their activities in the form of payments or adopting animals.
Example 2
One of the next visible sections on a main page is a list of animals that can be adopted, list of activities or encouraging another possible form of support. Usually, when you click on this section, it directs you to the appropriate part or displays details about the animal for adoption.
Example 3
Another typical part of other websites is making content diversity by using spontaneous donations forms. It is possible to choose the given amount of money or enter your own. Donation can be done via the website or externally.
Example 4
Similarities can also be seen in the way content is presented - news or blog/informational texts. Most often a graphic or a photo is used to attracts attention and under it there is a text header with a link to the rest of the article. Visible separation of the section name is also noticeable.
Example 5
For many websites, a common things is to use a photo (or carousel), a short description of the animal, the location of the shelter, phone number and/or address. Less often, but also encountered is the inclusion of a short explanation of what the adoption process looks like.
Improvement ideas
My idea was to improve the existing OTOZ site through redesign and use of existing content. I wanted to highlight these three goals (1,5%, adoptions, donations) mentioned earlier by adding new features to the website. Changes are not about building something new from scratch or rebranding, but are including current visual identification.
My main ideas were:
Information architecture
I improved information architecture and navigation bar by reducing the number of subpages in line with progressive disclosure rule and added search button, so that users would not be overwhelmed by too many suggestions. I brought to the front two most important segments (‘adoptions’ and ‘support us’). The most extensive section is 'about us', where I included all activities related to association. In "contact" section I have included not only an encouragement to contact OTOZ, but also possibility of reporting a needed intervention.
Navigation bar is also improved with CTA button, which play an important role in in encouraging users to support OTOZ - it will redirect users to the financial support section (second from the left in the structure).
Since this is a conceptual project and I don't have access to a lot of data, I have some limitations. However, if I were to check my project and make sure that the assumptions and design changes would bring expected results, I would check its general usability.
How would I check if my redesign is effective?
