Animality
Implementation of a website for a global animal welfare initiative
About the Animality Project and our role
The Animality project was born out of the Centaurus Foundation’s passion for animal protection and the desire to create an online space that would connect animal welfare centers from all over the world. The goal of this charitable educational platform is to provide video materials that document animal welfare activities – without borders, on a global scale. However, for this vision to become a reality, it was necessary to take the first step, i.e. create a website presenting the project’s assumptions.
More about the platform itself in our case study:
https://www.efresh.com.pl/en/portfolio/animality-2/
Stage 1: Needs and Functions Analysis
Due to the pro-social and educational nature of the project, we developed the design assumptions through workshops. We examined the needs in two types of workshops: firstly, by working with Centaurus Foundation Employees who have been taking care of animals for over 18 years, and secondly, by talking to Donors from the Foundation’s over 1 million donor bases. Thanks to this, we understood what drives them to act, what goal they want to achieve and why they invest their time and money in helping. The effects of the intensive analysis stage are usually mind maps, userflow and the creation of ideas for unique functionalities.
Stage 2: Shaping solutions according to the needs of individual people
The idea developed during the workshops was to design a website that would be a space that would build Animality’s first emotional bonds with users. We wondered how to present the project, how to attract attention and ensure that interest does not wane before the platform goes live.
Persona A: potential donors
Persona B: animal welfare centers and content creators
Persona C: stakeholders such as media, potential sponsors, PR agencies
After analyzing the needs of individual Personas step by step, we started planning the content topics.
Stage 3: From sketch to structure - low-fidelity mockups and homepage design
We transformed the previously gathered conclusions into the first sketches – low-fidelity mockups were created, which allowed us to quickly test the structure of the page and the logic of the content. We focused primarily on the home page, because it was to be the first to introduce the user to the world of Animality. No unnecessary decorations – just black and white grids, which showed what was really important.
Clickable prototype high-fidelity desktop
After approving the home (desktop and mobile), we created designs for 22 unique subpage views and 13 additional views. At this stage, the site started to look the way it was supposed to look in real life – with the typography, colors, and style that we had in mind from the beginning, as well as functional assumptions.
Thanks to clickable views, we could see how users would navigate the site, what caught their attention, and where they could get lost. The prototype is a testing and documentation tool for us – it is the basis for implementation.
Functionalities on the website before the platform launch:
- An extensive blog that is a “foretaste” of the content that will be published after the platform launch
- A webinar management module that allows for better contact with participants and the organization of webinars and building participant databases
- A newsletter integrated with the consent management database in accordance with GDPR requirements
- A career module that encourages centers from around the world and content creators to cooperate with Animality
- “Ideas box” is a space where each volunteer user can contribute by initiating an interesting solution for Animals
Desktop mockups
We designed the layout of the website presenting the Animality project. Our task was not only to design the visuals of the website, but also to propose functionalities necessary at the project start-up stage and developmental ones that could be introduced in subsequent stages. We were also responsible for implementing the website, which was undertaken by our eFresh development team.
Clickable prototype high-fidelity mobile
The mobile version was extremely important in the entire project, because Animality is supposed to reach people who don’t necessarily sit at a desk. We wanted it to be visually an element of fun, a break, a better world for them, and in terms of functionality, to come close to the simplicity of mobile applications.
In our understanding, a prototype for mobile devices is not just about rescaling – it’s a separate story. We set priorities differently than the desktop, and interactions were conducted differently. We wanted the site to be light, fast and intuitive – even on the run, between meetings or on the way to the shelter.
The clickable prototype allowed us to check how users perceive the mobile flow. Where do they click? What do they skip? And what triggers the effect of “ok, that works”. You have to judge for yourself whether it works well.
mobile mockups
In the era of smartphone and tablet dominance, the priority was to provide users with convenient access to the platform in all conditions.
When designing Animality, a key element was to create an intuitive and aesthetic interface adapted to mobile devices. Thanks to this, Animality guarantees smooth and user-friendly use of the platform on any device
Desktop and mobile implementation
Due to the specific nature of the implementation (the website was only part of the “Animality ecosystem”), the development process took about 4 months. The website was the platform’s “business card” and was intended to remain as part of it before logging in.
The implementation work was divided into sprints (each sprint had 5 business days), including: 4 business days for developers, 2-4 hours for QA testing by the tester, 2-4 hours for corrections, 4 hours for testing on the Client’s side. In each sprint, we planned a small period of time for corrections due to the relatively small scope of work; in the case of faster completion, we started another sprint.
Progress management and control:
- in the Monday.com system, we ran a board available to the Client and the team, where we controlled the progress of the project
- The Client checked a given sprint and made comments on a given sprint
- the closing of a given sprint, the acceptance protocol and the settlement of work were carried out completely remotely
- after the completion of the entire implementation, it took us about 4-5 days to test and in the so-called BETA version, i.e. ready to be supplemented with content
Supplementary Documentation
Behind every well-designed interface there is something less spectacular, but crucial – implementation documentation. In our work, it usually includes:
Content specification – i.e. description for the developer of technical guidelines for building text containers (number of characters, behavior, e.g. collapse-expand), definition of photo and video size (dimensions, resolution, max. file size)
Editable-non-editable specification – description intended for both developers and the Client, specifying which fields will be editable and doable from the administrator panel (directly by the Client’s employee), and which will require potential developer assistance
Integration specification – description of integration with external systems – in the case of Animality, we had to describe the rules of integration with international settlement systems (including PayPal, PayU)
Design system – the UX_UI team prepared a design system for the platform and application, to maintain consistency on the website we used the same rules for using buttons, building sections or graphics
Preparing for publication
of the website
The process of preparing for publication is almost the same with each implementation. Our goal is to maintain quality and avoid making mistakes when transferring to LIVE.
- BETA version – is created as a ready-made mechanism for use by administrators and editors on the Client’s side, has full functionality, the Client worked on this version, supplementing content
- training and support for the administrator on the Client’s side on the BETA version – we provide training as standard and in case of any problems we provide assistance to the Client’s team
- introduction of content in language versions – in this case in two versions
- manual testing on the test environment, including forms, links to social media
- optimization of the page loading speed
- optimization for SEO, launching remarketing databases, website measurement
Technical Support
and Development
We always offer post-implementation support, in which we plan development tasks 3 months in advance, we conduct work statuses and ongoing communication based on the Monday.com system, we meet regularly at workshops to improve the created website.
What do we provide during permanent support?
- continuity of the team’s knowledge – despite several changes in the team during such a long period of cooperation
- design system / design lab / clickable mockups – we maintain key graphic designs in a state ready for changes/development
- 1:1 test environment and code repository – we maintain a copy of the system in the test environment, we maintain a code archive
- current maintenance updates – we take care of the update and reliability of operation
In the implementation price, we always transfer full copyright to the designs and code with the right to change them at will.
DO YOU HAVE A VISION YOU WANT TO FULFILL?
Contact us and we will help you build a brand that will conquer the market.