The Plan Collection

Optimizing usability and increasing findability

Project Summary
The Plan Collection is a website that offers a massive collection of over 20,000 quality house plans. While starting out as a UX Designer at Fruition I led the design of this complex e-commerce website.
Role
User Survey, Mood Boards, Wireframes, Mockups

Year
2016
The Plan Collection
The Problem
The Plan Collection’s website was littered with major usability issues, compromising both accessibility and findability. In addition, it was not optimized for use on mobile devices.
Project Goals
•  Improve accessibility by fixing major usability issues and improve the overall user experience on all devices.
•  Increase the conversion rate for purchases while decreasing shopping cart abandonment.
•  Increase findability and visitor engagement by introducing new features and resources.
The Process
User Survey
In order to gain valuable insight into how The Plan Collection’s visitors used the website, we conducted a customer survey using SurveyMonkey. We surveyed both non-builders and builders/developers. The knowledge cultivated from this survey helped inform our design decisions for many of the website’s key pages.
The Plan Collection — User Survey
The Plan Collection — User Survey
Mood Boards
The Plan Collection already had a well-defined brand in place so we created four different mood boards using their logo and color palette. We mocked up key areas of the website using various fonts, color schemes and imagery so the client could get a good feel for how their site might look. From here, a final visual design direction and style guide was established for the new site.
The Plan Collection — Mood Board 1
The Plan Collection — Mood Board 2
The Plan Collection — Mood Board 3
The Plan Collection — Mood Board 4
Wireframes
During the wireframes phase, we explored a number of different solutions for the main stage area of the home page.
The Plan Collection — Wireframe 1
The Plan Collection — Wireframe 2
The Plan Collection — Wireframe 3
The Plan Collection — Wireframe 4
Mockups
We mocked up several key page templates that were reused across the site: a product grid page, a product detail page and a product category page. The checkout process was streamlined and divided into three easy steps.
The Plan Collection — Mockup — Home Page

Home Page

The Plan Collection — Mockup — Advanced Search

Advanced Search Page

The Plan Collection — Mockup — Product Grid Page

Product Grid Page

The Plan Collection — Mockup — Product Detail Page

Product Detail Page

The Plan Collection — Mockup — Checkout Page

Checkout Page

Optimizing the Mobile Experience
In order to accommodate visitors using mobile devices, we optimized the experience for smartphones. A slide-out navigation menu was utilized and the entire design was simplified. Sliders were also used on both the home page and grid pages, allowing users to adjust their search terms in an intuitive way.
Mobile Menu Design
The Plan Collection — Mobile Menu Design
Various Mobile Views
The Plan Collection — Various Mobile Views
Results & Client Feedback
Results
We gave The Plan Collection’s website a much-needed refresh, improving its visual design, usability and overall user experience. We improved the findability of both the website itself and the company’s vast collection of house plans. In addition, we optimized the site’s content offering to increase organic search results.
Client Feedback
Brian had outstanding things to say about Anca, Nathan and Chance. Two years later, Brian was still able to name each one of them by name and describe how much he enjoyed working with them. From Nathan’s design (which he raved about), Anca’s keen ability to deliver on SEO and Chance’s skillful technical knowledge to wade through Magento. Thank you for making this a great company and caring for our clients.”
— Sara Villegas, Chief Operating Officer, FRUITION
Interested in hiring me for a project? Get in touch!

More Projects

Back to Top