Asmita Misra
A Portfolio
UI.jpeg

Dog Adoptions

Brief: A Landing Page for Adoptions for an Animal Shelter

Role: UX writing + Visual Design

Team Size: Solo | Project Duration: 1week

 

Dog Adoptions

Project Overview: For my project at a 'Visual Design for UX' course, I chose to redesign the adoptions page for Emerald City Pet Rescue based out of Seattle.

Brief: A Landing Page For Adoptions For An Animal Shelter

Role: UX Writing + Visual Design

Team Size: Solo | Project Duration: 1week

Problem Identification: I researched several PNW based animal shelter websites to observe that everyone was using the same PetPoint plugin to list the dogs available at their shelter, no one was making an effort to make the page/their site stand out from the rest.

Research Findings: Shelters were relying on the users to select dogs based on their photos. Their matching process relied on an impersonal questionnaire and lacked the charm and excitement of potentially finding a forever home for an animal. With my experience at the Seattle Humane Society, I observed that while there was readily available data on the dog's personality, behaviour nicks, yet the potential adopters had to explore these on their own by interacting with them in a controlled environment for a limited time.


Goal/Brief: To design a responsive Adoptions landing page for Emerald City Pet rescue, with a heavy visual charm and a narrative from the adoptable pets’ point of view.


Process: I started with listing all the blocks of information that were available on the page and explored how these could be structured differently. Through my iterations I tried to highlight the adoptable pets and show the adoption process in a clear understandable way. With each iteration I listed the likes and dislikes of the design and allowed the design to evolve from there.

Feedback/Pivot: At this stage, I received feedback to focus on content related to adoptions only and remove all other unnecessary info. The difference between a landing page and home page became really clear to me.

With this review, I went back to the drawing board and explored content layout, edited and added more relevant content blocks like Reviews, Other ways to contribute that help make a case for adoption through a shelter. I then sketched a few iterations for the web view. 

Wireframing: After clarifying the intent of the page & content flow, I moved on to creating wireframes that represent how the website should respond across devices. I utilized a 12 column grid system to allow for ease of development using Bootstrap.

Visual Design: I then looked for some visual inspirations across the web to base my visual language off of. I was looking for examples of sites that use white space well and a language of illustration that helps communicate a process. I also ended up loving Square's POS landing page which utilized a dark theme with heavy use of continuity and closure.

I picked the base color of my palate, a deep red, from the client's logo. I felt that the illustrative logo was a departure from the clean visual language I wanted to utilise for my design. Therefore I chose go ahead with a text logo for the header of the site and embeded the actual logo only in the footer.

mood board.jpeg

I created a moodboard of visual imagery to define the style I wanted to go with. With the help of the mood board, I was able to evolve my colour palette to a custom analogous.

I explored a light theme and a dark theme for the content and decided to go with the latter as it had better contrast and more room for play with images. I recieved feedback that a dark theme may lead to a dark mood for the user and implicated gloomy feelings rather than bright and happy thoughts. I made sure to avert this impact by using vibrant photos with high saturation and relaxed imagery for dogs so communicate the right feel.

Tone of voice: For the copy of the site, I wanted to bring in a dog's personality with an happy go lucky style mixed with an edge of an attitude while still communicating all the practical info from the shelter's point of view. The shelter environment is tough for the animals and short meet-n-greets don't do justice to dog's personalities. Therefore, I wanted to portray what the dogs would say at their most comfortable.

A glimpse of the profiles I created:

tone of voice.png

Typography: For this project I chose to go with two distinctly different sans serif typefaces. A flamboyant 'Champagne and Limousines' for the headings and a rounded, characterful 'Aller' for body and buttons. I felt the fonts paired well but I did receive some feedback on need to explore more traditional typeface pairing.

Styling: I chose to start the page with 3 hero images, each with their contextaul CTAs, which showed dogs in happy almost euphoric sense of mind. This was accompanied by a ready-to-play tag line which was meant to motivate the user into getting into their happy place.

 

Highlights of the Final Design:

 
 

Scope of Improvement: I was painfully aware of the fact that photography from shelters is not always so charming and how I approach to handle this in execution is to make sure I utilize the best photography for the hero images and the keep the usual photo set for Dog profiles. Clever copywriting is also a USP of this design and will need to be held up to highest standards at all times.