UX / UI Design

Project Duration: 1 Month
Role: UX/UI Designer
Tools Used: Adobe XD, Invision, Adobe Photoshop, Adobe Illustrator

Project Overveiw

For this project I did for the Treehouse Techdegree program, I was asked to create a design for a signup form on their new pet adoption website. The website will allow users to receive emails about adoptable pets as well as communicate with shelters and search through available pets in their area through the website. I was tasked to create a simple wireframe of the form screen and an explanation my design to present to the client.

The Task

My task was to design and create a signup form for a new pet adoption website. The goal of this form is to sign people up for the service to get more information about adopting pets, as well as communicate with local shelters in their area for potential dog/cat matches.

The Audience

The audience for this project are people who are looking to adopt a pet. These people are probably new pet owners, or already own a pet. The audience are people who are looking for a companion from the ease and comfort of their fingertips. Most likely these users are casualy just seeing what kinds of options are around their area and is probably a starting point to finding their furrever pet!

The Solution

The design I used was to help streamline the customer into creating an account.

I decided to start off with a landing page asking if the customer already had an account or needed to create one. That way, if customers haven’t already signed up to use the app, they would be guided into creating an account to start finding some pet matches

The second screen, the “lets create an account” screen has an email address and password. This is where the user would create log in credentials for their account. I though it was important to use these two on this page, because this is what the user would use to log into the account. Plus, it would create an account for the user and verify that the email and password was valid.

The Third screen asked about personal information for their profile, their name, and where they live for potential matches.

The last page asked for preferences so that the user can choose what they liked and what kind of content on the app the wanted to see. The idea is that after they made the selection of what kind of animals they were interested they could start searching for dogs/cats/animals in shelters that they wanted to adopt and start matching!

Initial Sketches

Whenever I start thinking about a design, I always use Pen and Paper to draw out my initial sketches. I use this method because it is quick, easy, and will allow my imagination to go wild without any barriers. I folded my paper into fours and quickly designed a couple of different iterations of my designs. After three tries, I looked at my design and I picked out elements that I thought that had effective design, that met the user goals.

Initial Wire Frames

For the initial wireframes, I utilized Adobe XD to create my designs. I used my initial sketches in order to create the wireframes for the user. I created two iterations of the app, and chose the one that best fit the design of the overall app and goals. I created the Mobile version and also the web version for the initial wireframes. for the web, I translated what was already created for the web portion and designed it for desktop veiw.

The Style Guide


When I first start a style guide, I always try to find inspiration to get a feel of the brand and create a mood board. Inspiration, for me strikes everywhere, but I love to look at what other people have done in the past and improve on top of the design. The place where I got my inspiration for this project was dribble. I build a collection of designs that gave a bright, pet friendly feel.

Check out the Collection

Logo Design

I knew in this project I wanted to create my own logo for this project. That is why I utilized Adobe illustrator to create a logo icon for Instant Pet Finder from scratch. initially, My idea, I wanted to create a "Dog detective". After a couple of iterations and design fails, I decided that it looked too complicated for the logo, I decided to simplify and to choose a dog in a magnifying glass. Im really proud of how this logo came out.

Color Scheme

Color schemes are very very very important to me in style guides, as they inform me the direction of the design moving forward. For this project and the brand, I felt that it was important to include bright colors. I color picked colors from one of my inspiration photos to create a series of colors. My main color for this project was baby blue.


For the font, gained inspiration from one of my inspiration photos. I saw a lot of pet branding with a specific font. the closest font I could find on Google fonts was Nunito.

Final Mockup

Using the style guide that I had created for instant pet finder, I use this as a guide to go ahead and create a final mockup of the brand. I created final mockup versions of both the web and the mobile versions of the website in order to have responsive design. Creating this mockup was fun. My idea for the paw prints was that it would be animated to look like it was walking on the page for an extra decorative feel. I thought it was a great idea to orient the paw prints as if it was walking along the registration process with the user.


After this project, I learned the importance of user flow and how it would apply to a sign up form for a pet adoption site. I learned that design decisions should always be user centered first and reflect what they need, want, and that is very convenient for the user while also meeting business needs.

I also loved how I experimented with adobe illustrator. Im not too too too familiar and strong with illustrator but this project was a great was to go ahead and to experiment with the program. I really loved how the logo icon came together in the end, even though it took a lot of time, patience, and iterations to get there.