Homing
Adoption portal
ProjectUI/UX Design. Graphic interface for the portal Homing
UI/UX DesignMarisol Rammoser
Goals
Develop a responsive interface design
Create a graphic personality of the portal
Create a functional and adaptable ecosystem
Overview
Homing is a portal to find the ideal pet. The portal guides people in the process of adopting a pet.
The platform offers:
Information at every stage of the adoption process
A way to identify the pet compatible with the people's lifestyle.
An easy and friendly experience for anyone interested in adopting a pet.
Problem:
The adoption rate of animals in shelters in Spain is less than 50%. Abandonment, unwanted puppies and other circumstances are the ones that define the current situation of animals in shelters.
The idea was to offer a portal that motivates, facilitates and accompanies people in the process of adopting a pet.
The goal of the portal is to help people find the compatible pet for them.
"A person who wishes to have an animal is a possible candidate to lead a responsible adoption."
The portal supports people in the process of adopting the ideal pet.
The Homing team has not only focused on understanding the needs, motivations and goals of people with a tendency to adopt pets, it has also analyzed the barriers they encounter during the process.
User
The users are adults who are committed to social causes and, regardless of their family status, who wish to contribute responsibly to the social structure by adopting a pet. Some of them have had very good childhood experiences with animals and wish to recall those moments. Another excellent reason to adopt is to feel accompanied.
Assignment
The brief consisted in developing the responsive design of the website's graphic interface and its systematization in a UI kit. The final deliverables are documents and files needed for the implementation.
Graphic interface design development stages
After analyzing the documentation of the research, modelling, interaction and prototyping phases, it is time to start with the conceptual style definition phase. The diagram shows the process of interface design development.
Style
The objective of this phase is to identify the message to be conveyed visually. First,
a moodboard was created. To gather inspiration, explore ideas and identify the tone in which we wanted to communicate.
Three words were taken as a base, from which a collection of images that conceptually convey the ideas of these words were gathered, a selection of colors and a typography proposal was made. Once the first version of the moodboard was created, a couple of interface screens were created, the flow task, thus translating the moodboard ideas into details and graphic elements that will be the visual image of Homing.
Moodboard (The images are from pinterest from different authors)
Flow task
Component development
In this stage a toolkit of components was developed, the grids were defined, some animations were defined and the style that the portal should follow was described.
The intention of creating a component library is to be reused, to create and manage consistency throughout the project. A scalable and easily adaptable organic system was generated.
Components were created for three devices: Smartphone, Tablet and Desktop. The components were organized into categories, nested in containers and used naming conventions. This way it makes it easier to use them and also to understand the structure in case of working in a team
Components
High Fidelity Prototype & Test
The toolkit elements were used to create the prototype. The screens of a task path were created for three devices: Smartphone, Tablet, Desktop. It was necessary to make small adjustments in the components, redefine: colors, typography cuts, element sizes. All this to create harmony in the composition and adapt the components to the style of the portal.
The challenge at this stage is to identify the micro and macro interactions between elements, as well as the differences between devices, here the Figma app for smartphone and tablet was of great help, as it offers the possibility to visualize and interact with the application in a way close to reality.
Introducing Homing
The portal can be easily explored regardless of the device used.
The presentation of the information was planned to facilitate the cognitive process of the visitors.
Homing for smartphone
Homing for tablet
Compatibility test
With a simple test the user has access to a selection of pets that match his or her lifestyle.
More information for a responsible adoption
It is possible to see more detailed information about the animal for a responsible adoption and then arrange an appointment to meet the pet.
Homing for smartphone and tablet
Next steps
Develop more task flows for the portal
Review and perform new tests for the Information Architecture
Conclusions
Design brief. The brief was the detailed reports of the research and user experience definition stages. This helped to understand the project in depth. As a designer it is important to understand that the process is a sequence of stages, not just random steps.
Organization and conventions. In the design system it is essential to organize and use conventions, this way we ensure congruence in the final design and also a system that is easy to scale and use by other people.
The final result was a working prototype of a task, for different devices. The prototype has been tested with users and small necessary adjustments have been made. A UI kit was developed ready to create new wireframes of new tasks, an ecosystem has been created ready to be used and scaled.