The team at 1-800 CONTACTS was on a mission to update their main e-commerce storefront. The website was currently on a five year old design and had served the company well for those years, but the time had come to send this design out to pasture. A lot of work had been done to update the design of their mobile apps and the newly created mobile watch application and the team asked me to update the 1800contacts.com website to match their other digital storefronts. The project also included updating the front-end code base to be on a full responsive design.

I worked to identify the best user experience possible by analyzing the user flow. Each week I would present my work in progress to the team for review and gather feedback in a cross team collaboration meeting that I created called “The Bob Ross Meeting”. During this process, I tape up the new proposed user flow and as a group we looked at the concept from a birds eye view. The discussion was then framed around “knowing that our customers want to accomplish _____, how are we going to move them from point A to point B? And what technology is available to accomplish that goal as easily as possible?”

I created a set of wireframes to help identify the general layout for the difference sections that would exist throughout the website. The wireframes served as a starting point for myself and the team to start blocking out the interaction models and how the content would be laid out.

One of the objectives for this project was to create a sense of cohesiveness across all of the 1-800 CONTACTS digital storefronts, including the mobile app redesign and the mobile watch. To accomplish this, I created a full responsive and comprehensive UI design system. This design system would serve as a guide for the entire design team and to keep things feeling like they belonged within the same digital brand family.  These UI kits also allowed us to produce design concepts quickly; allowing us to prototype and test out our concepts through rapid prototyping, allowing the team to gain insights and validate the design direction we were heading.

After the user flows, wireframes, and UI kit was created, I applied the final look and feel and visual language to the wireframes to give the site it’s final polish look.

To enhance the experience, motion was added to the user interface. Animation has the ability to bring the overall experience to life. It adds personality and playfulness, helps drive attention and engagement and brings the overall experience up in quality. The animations chosen for this project were to further communicate the 1-800 CONTACTS brand as quick, responsive and a premium customer experience.

The interactive prototype posted below was built to help establish and test the direction of the design with user groups prior to moving the design concepts into the full development process. The prototype below was built using Adobe XD.