E-Commerce for Wolf and Lion

Constructing a model for the friendly competitor

***Concept project for web***


Wolf and Lion Pet Supplies wants to move their friendly neighborhood shop into the world of e-commerce without compromising their signature customer service or high-quality products.


Solo web project over a two-week period


  • Competitive and comparative analysis
  • User testing
  • Information architecture
  • Flowcharting
  • Rapid iteration
  • Service design
  • Prototyping
  • Agile design


Market research, competitive analysis and stakeholder interviews revealed the following insights:

Information is the top priority

Wolf and Lion is a store that prides themselves on their high-quality products. However, two of the three personas we developed for this project were concerned and dissatisfied with their current pet store experience because of a lack of information. For that reason we decided to work with Wolf and Lion to design a site that packed descriptive information within a simple structure.

We need to revamp every page to include subtle personal touches

Customer service is king at Wolf and Lion and it’s crucial that customers feel as valued on the website as they do in the store. The new site features both prominent (recommended orders, a custom homepage based off pets) and minor details (changing the language of “users also purchased” to “other products your pet might enjoy” to sound more familiar) to emphasize the importance of the customer and their interests.

All the content on the site should be easy to manage

It’s important to draw a line between feasible and idealistic. The perfect consumer website will be pretty useless if it’s impossible for the owners of Wolf and Lion to maintain.

Mary is a new pet owner who just needs a little assurance


The preliminary site map for Wolf and Lion

The site begins and ends with the store, but makes sure to advertise the communal, egalitarian qualities Wolf and Lion hold near and dear to their neighborhood business.



The current Wolf and Lion website features no personalization and extremely truncated functionality.





In this workflow, a customer searches for resources for their German Shepherd, finds a product their dog might enjoy, adds that product to their cart and checks out.


A conceptual sketch of the Wolf and Lion homepage. The page margin contains notes from a recent usability test. Note the suggestion to make the browse feed more customizable.

Competitive research of local pet stores, pet supply giants (PetCo and PetSmart), and e-commerce giants (Amazon) showed the majority of pet supply websites organize their stock by pet instead of topic. In other words, you’re more likely to find a Blue Buffalo dry food product in the “Dog” aisle instead of “Food.” To confirm this hypothesis, I developed a card sorting activity which asked users to take products from the Wolf and Lion inventory, sort them into different categories, and then label each as they saw fit. As expected, the majority of categories were labeled according to pet type.

Comparative research of brands like Blue Apron, Tavour, and REI offered insight into how sites are currently placing recurring orders, getting customers excited about a product, and allowing customers to compare similar items.

Usability testing and iterative design helped refine my design into a cleaner, friendlier looking interface. Friendly volunteers offered suggestions as to how the UI might be more intuitive (“move the compare button over”; “condense this second column of categories”) how the homepage could be more personal (“why would I want to see dog products when I only own cats?”) and cleaner (“I don’t understand why there’s an ‘About’ and a ‘Help’ section”) and served as another reminder why iteration and feedback will always be the most important steps in the design process.


  • Work with a behaviorist to develop resources for new owners
  • Work with Wolf and Lion to develop a feasible delivery plan (are we only delivering within a certain zip code radius? On specific days of the week? etc.)
  • Take feedback and continue iterating designs. One stakeholder asked for a simpler and more iconic homepage, so we can begin testing with designs that like the following.