Ruffwear Dog Gear
CLIENT
FOCUS
ROLE
TIMEFRAME
Design Lead
4 Months
Web, UX UI
Ruffwear
Project overview
Mondo Robot partnered with the industry leader Ruffwear to re-design and modernize their flagship online store. Focused on connecting customers to the wide array of products for dogs, the website allows users to navigate the catalog of high-quality dog wear, easily finding the right gear for their furry pal.
As Design Lead, it was my responsibility to own all aspects of design from discovery to handoff. Responsive designs for 4 breakpoints were designed for all pages and included preliminary wireframes, to a final visual design and motion design. The project was engineered in-house by the Mondo Robot team and was seen as a huge success by the client. You can visit Ruffwear.com for more information.
Challenge
Ruffwear’s website was failing its users in several key areas. Dominated by story-driven content, the homepage featured subject matter that was better suited for a blog section. Analytics showed us most users were only interested in shopping, and are primarily mobile users. Finally, some pages and modules across the site were failing common accessibility standards.
Solution
The redesign of Ruffwear.com alleviated these issues by focusing on a mobile-first strategy, reimaging the homepage content by putting the shopper first, and doing a full accessibility sweep. Story content was reorganized in the blog section and featured prominently on the homepage, and the site architecture was revised to accommodate the growing product catalog.
A new homepage & blog experience
Ruffwear’s new homepage design is all about helping the shopper find exactly what they need with clear visual design and rich micro-interactions. Designed to feature lifestyle and product photography, we made sure dogs are the star of the show. Flexible modules gave the client the power to customize the site however they want in the future.
Mobile users first
Focused on accomodating mobile traffic first, all pages are designed with highly responsive modules and elements. larger screen sizes will be greeted with beautiful fullwidth imagery, with max width breakpoints designed up to 1920px.
Simplified shopping
The Ruffwear product catalog grows every season. To help customers find their way, we designed a robust navigation system, dynamic product filters, and a dedicated size selector for difficult-to-choose products like harnesses, boots, and collars.
Keeping things consistent
A design system was built to make sure all UI elements speak the same language and pass accessibility standards. The system can scale into the future when new pages or modules need to be built, and ensured a clean handoff to the engineering team.
