A Site for Natural Dog Supplies

This small natural dog supply company was in need of a website, to reach out to potential suppliers and make online sales. In e-commerce ease of use is particularly important or users will abandon their carts, leaving money on the table.

By defining the site goals and users, I was able to define clear goals to create a site that would be appealing and give the user the information they need to make a purchase.

User Personas: The Human User and Canine Consumer

Before designing any website you must who the user is, what are their needs and motivations; why are they visiting your site. The user profile personifies the user, making them a person and not just an abstract concept.

For Roxie & Ricki, I not only defined the human users, but the canine consumers as well. After all, the the pet parent is shopping for their dogs, using their best judgement of their pet’s needs and wants. I defined the dog’s activity level, health concerns becuse they are important factors when purchasing dog food.

Read the complete Roxie & Ricki User Personas.

Design and Build

I did extensive research to figure out where to place content while making my wireframes. This involved me ordering three months of dog food! I wanted to see what made the shopping experience easier, what made me decide the dogs also needed treats, and what frustrated me making me abandon my cart altogether.

This wireframe then serves as an outline for the visual design to take place. I wanted lots of locations for showcasing the products and quick ways to find products quickly. While still be friendly, and inviting for the shopper to browse but not too busy that the user gets overwhelmed.

The Logo

Once the design is completed, it was time to build the site. I love to code and see a design take shape and become functional.

I wanted to create a logo for this site that was all made of code. It’s easier to create the image in PhotoShop, but there are benefits to having logo text coded. It loads faster, is easier for screen readers and is more responsive on mobile devices.

I started with Google Fonts because they are easy to implement, the library is huge, and the style fit the brand:

<link href="https://fonts.googleapis.com/css?family=Damion|Fredericka+the+Great" rel="stylesheet">

I added the HTML for the logo:

<div class="logo">
<h1>roxie <span>&</span> ricki</h1>
<h2>natural pet supplies</h2>
</div>

Now the CSS:

.logo {
display: inline;
width: 31.24%;
padding-left: 33.333%;
padding-bottom: 0;
}

.logo h1{
/*Google Font */
font-family: 'Fredericka the Great', cursive;
font-size: 3em;
padding-bottom: 0;
margin: 0;
font-weight: normal;
display: inline;
color: whitesmoke;

.logo h1 span{
color: #73C6B6;
display: inline;
font-size: 1em;
}

.logo h2{
/*Google Font for h2*/
font-family: 'Damion', cursive;
font-size: 2.25em;
margin-top: -20px;
margin-left: 150px;
font-weight: normal;
display: block;
text-align: left;
color: whitesmoke;
padding-left: 0;
padding-bottom: 0;
}

.logo a:active{
color: whitesmoke !important;
}

The CSS wasn’t really difficult, it just took a while to get just right. I worked in Chrome Developer mode to experient with negative margins, manipulating the code to get the location of the text right. The result is a fluid responsive logo and doesn’t just shrink in the corner, but moves with site changes.

Final Thoughts

All the research that went into the site paid off. The site is professional, but still has a fun feel to it. More importantly, the site is easy to use, and guiding the user to the products they need to to checkout. The protosite serves as an excellent model for a complete site to come.

See the complete protosite.

Back to Portfolio