Creating a design system for Lowes.com
I designed a detailed component directory for a web content management system for Lowes.com, including 30+ reusable components and 10 page templates for the website publishing team to use in the CMS. The outcome was a CMS that was streamlined and easy for web authors to use and delivered an engaging user experience on the front-end.
The situation
Lowe’s had a significant number of content-rich blog posts that offered home renovation guidance and step-by-step instructions, but the articles weren’t effective at encouraging visitors to shop on Lowes.com and they were housed in an old CMS that was difficult to use. The articles also weren’t responsive for mobile devices – in fact, they were hidden from search results for users on mobile devices. So there was much to be gained by migrating to a new CMS and redesigning both how the articles looked on the front-end and how they were built by web authors.
My approach
I was the UX lead for the project, working alongside a production designer, a PM, engineers, writers, and a huge group of stakeholders in multiple departments. I started having weekly meetings with the entire project team because there were so many people involved that needed to be kept in the loop – sometimes we’d have 30+ people in attendance.
Once we had an inventory of all the page templates and content components that we needed to support the articles that would be migrated to the new CMS, I created annotated wireframes in Axure. These detailed wireframes described how the component would behave on the front-end of the website and how it would function in the CMS for web authors. The annotations included instructions on character counts, whether a field was required or not, or if a field was generated by the system and not editable in the CMS (some SEO tags worked this way). For page templates, the annotations would specify which components were optional vs required, how many components could be added, etc.
The wireframes were ultimately for the developers to use, but they also were part of our regular design reviews with the product manager and our stakeholders – they helped everyone understand what we were building and why.
Here’s what I did:
- Redesigned the article templates to:
- optimize the location of links to product category, list, and/or detail pages, ensuring users could easily enter the shopping funnel.
- be responsive on mobile devices.
- optimize content for search engines (SEO).
- Created initial wireframes and a clickable prototype for usability testing.
- Conducted unmoderated usability testing via the User Testing platform, using a screener to find participants that were actively researching a home renovation project or had completed one in the past.
- Synthesized insights for usability tests and improved the designs based on the findings.
- Created annotated wireframes with all the details of how each component worked alone and within the design system, along with clickable prototypes to demonstrate to the engineers how interactive elements would work.
- Later, once the engineers had the designs built out, I conducted design QA to ensure everything was working as expected and reported all the many bugs/issues to fix.
Tools used:
- AxureRP for wireframes & prototypes
- UserTesting.com for usability testing
Impact
The new components were so flexible and useful that they were adopted by the ecommerce teams, too.
Visit Lowes.com to see the blog in action
- 230% increase in conversions (# of customers who made a purchase after viewing a DIY article or page)
- 146% increase in clicks to product detail pages
- 8% reduction in bounce rate
- 35% improvement in keyword rankings (avg. position)
- Subsequent visits to search pages went down by 33%, indicating that customers are finding what they need in the articles.
“Rebekah is extremely thorough and conducts research to ensure she is putting our customer first. She does a great job summarizing her research and sharing it back with the team. Her wireframes include all details and she is extremely patient with all of my questions.”
Product Manager, Lowe’s