contract UX services provided for Callahan Agency for their client PetAg
PROJECT PetAg.com Website Redesign
DURATION 9-12 months
UX DESIGN SERVICES
PetAg, Inc., a provider of pet products such as milk replacers and nutritional supplements for newborn animals, needed their website updated to better showcase their premium products, revamp their navigation to increase discoverability of their products and thus drive purchase. As lead UX designer, I guided the agency team through the UX process, advocating for quality usability, and emphasized strong user experience decisions at each step.
PetAg’s old website architecture was confusing and disorganized making it challenging for the user to find the right product. I rearranged and reorganized the information to provide the user a much easier and efficient path to find the specific products to suit their needs.
Since the old website was not mobile optimized, we knew we needed to take a mobile-first approach beginning at the wireframing step. The clickable wireframe showcased a highly organized navigation, a product filter on the product listing pages, revamped product details pages and a product comparison page.
information architecture (site map)
view wireframes
The home page of the wireframe of PetAg.com redesign.
To tackle the challenge of revamping the confusing navigation, the adaptive-view, clickable high-fidelity wireframe utilized a megamenu on desktop and a robust hamburger menu on mobile that showcased the subpages within each species category. This allowed users to see a broad but organized range of available content to click into and browse.
This megamenu wireframe (top image) guided the user to browse the subcategories within each species and served as a template for the visual design (bottom image).
Since the client had a limited budget, we decided to user test the high-fidelity wireframes rather than create a full high-fidelity prototype. We ran a qualitative, moderated, in-person user test with pre-defined tasks. This testing identified only a few confusing experiences but overall confirmed that our design was successful. After completing some design iterations as a result of the initial test feedback, we ran a modified, shorter version of the original user test to confirm our revisions. We then finalized the experience to prepare for the visual design stage.
In the second round of user testing, we asked participants to interact with three
different iterations of the megamenu to observe their experience.
In the visual design step, I collaborated and consulted with the art director and creative director to ensure the design layouts incorporated solid UX principles. As they created the look and feel of the site, we engaged in regular discussions about how best to create a good experience for the user while keeping the integrity of the visual design.
Designs created by Callahan designers.
Elevating the structure and organization of the PetAg.com site and ensuring the navigation made sense to users was key to creating a new website design for this popular brand. Providing the user with much clearer experience, refreshing the brand and giving their audience a highly usable site will help this brand to grow for years to come.
i’d love to discuss how to incorporate UX intoyour clients’ next website project
785-691-9876
