Home Page Redesign
LensPure | A design overhaul of a contact lens retailer’s website.
Project Overview
The design overhaul of Lenspure.com was carefully considered and implemented in phases. Based on initial analyses conducted with Marketing tools such as Google Analytics, our team analyzed the areas of the consumer journey that needed to be improved. One such page was the homepage itself. I was tasked to roll out changes in phases to carefully test the waters.
My Tasks:
User Research & Analysis
Wire-framing
Prototyping
Coding (HTML, CSS, PHP, JavaScript)
Tools Used:
Pen & Paper
Google Analytics
Adobe XD
Adobe Photoshop
Adobe Illustrator
Background Info
The redesign of the home page was done as a whole. The actual implementation, on the other hand, was done in phases as a strategic decision. This was so that we could monitor how the changes would affect users. Since our site is a direct seller of contacts to consumers, it was more important that customers would not bounce immediately upon seeing new changes.
The first phase was the navigation menu on mobile and desktops. Thankfully, because we rolled out changes in phases, I had the chance to reiterate the design for this area before implementing changes across the entire home page.
For more details on this part of the project, you can view that here.
Brainstorm and Wireframe
There were a few limitations that I started with upon taking on this project. In an ideal world, we would have the perfect persona with the most complete user story. However, we only had access to a handful of resources at the time: Google Analytics, our own CRM system as well as client feedback from customer service. So, upon consolidating that information, I was able to garner that our site had redundant information and it was difficult to find products right away.
The second problem was mostly addressed by the navigation redesign, but I decided to propose a bit more: redesign the homepage that could not only reduce redundancy, but highlight popular products and commonly accessed information could be displayed in a more visible way.
Initial wireframe ideas for the desktop version.
Initial wireframes and brainstorming for the mobile version.
Deciding
Due to the limitations in our resources, I had to opt for more a more spontaneous style of user testing. Since our customer service department was in direct contact with customers and understood more of their thoughts, I consulted them and tested the wireframes on them.
In the end, we ended up deciding for a design that did not have a search bar as the first thing a customer sees. The reason being that existing clients would not need to use this; they would just click on the quick links. For newer clients, they may not know exactly what they’re searching for either, so having that as the main focus didn't make sense.
Afterwards, I prepared high-fidelity mockups for the teams to review internally. The redesign was warmly received within our internal stakeholders, and so I began development quite quickly. After about a week, I was able to code the new design and implement it.
Implementation & Results
After the implementation, we continued monitoring the updated home page’s analytics, as well as sent out a user feedback survey to our customers.
The redesign was welcomed and many customers were happy that the amount of redundancy on the page had been reduced and that the site looked much more modern than before. In fact, Desktop bounce rates dropped significantly (by almost half!) within a three month observation period.
You can also view the actual website :)