Animality
Consulting and website design
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: Animality_videostreaming platform and mobile application.
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 Personas
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 fade 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, potential
After analyzing the needs of each Persona step by step, we began 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 providing a “foretaste” of the content that will be published after the platform launch.
- Webinar management module enabling better contact with participants, organization of webinars and building participant databases.
- Newsletter integrated with the consent management database in line with GDPR requirements
- A career module encouraging global centers and content creators to collaborate 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
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 the technical guidelines for building text containers (number of characters, behavior, e.g. collapse-expand), definition of the size of photos and videos (dimensions, resolution, max. file size).
Editable-non-editable specification – description intended for both developers and the Client, specifying which fields will be editable and executable from the administration 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 and graphics.
DO YOU HAVE A VISION YOU WANT TO FULFILL?
Contact us and we will help you build a brand that will conquer the market.