Back in the summer of 2022, I was approached by optician Chris Richards who was looking to redevelop his existing opticians’ website as an e-commerce WordPress site.
Chris’ business, Faversham Optical, dispenses designer glasses from home. He’s been running his successful business since 2009 and initially set up a website and store using a specialist optical provider.
However, he was becoming dissatisfied with the service he was receiving and reached out to see if I could help.
Collaborative approach
After speaking with Chris to fully understand his requirements and having looked at his old site, it was clear he needed a robust e-commerce solution, but with additional customisation to cope with the technical aspects of dealing with customer prescriptions.
The site also needed a thorough design refresh and a review of all the copywriting.
I proposed a solution using WordPress and WooCommerce, with additional custom programming. To assist me with the back-end coding, I partnered with another local web developer, Paul Evanson of Woodland Web Design. I would design the site, review the copy and manage the project, and Paul would provide the build, hosting and back-end programming.
Design approach
One of the issues with Chris’ old site was it wasn’t particularly easy to read. As a website for an optician, I thought this was something I needed to fix. So I spent some time researching legible font pairings that could be created from Google web fonts.
After considering a whole bunch of alternatives, I settled on a combination of Inter Extra Bold for headers and Source Serif Pro Regular for the body text. There is some debate on whether serif or sans serif fonts are better for readability online, but I preferred the serif choice.
Having settled on typefaces, I went about creating flat designs for key pages of the site.
One other design issue to solve was the cropping of photos. The site contains well over 1000 products, featuring at least three images in each gallery. The previous site used default square photos, but because of the nature of the product, most of each picture was redundant background space.
If I could work out the optimum proportion to crop the product shots, I could save a lot of space and loading time on every page throughout the site.
After some experimentation, I settled on a 16/9 crop that allows the product photos to look clear while saving 43.8% of the file size on every shot.
Site development
Once the site designs were approved and the website copy edited, the project was passed to Paul to build. Much of the project was exporting the existing product database, cleaning it and re-importing.
The second technical barrier to overcome was custom coding the forms that handle the customer’s prescription data, which Paul managed with the help of a plugin for WooCommerce.
Once the existing database was converted and new photography and wording assigned, we added payment processing integrations and the site went live in February. Chris is now adding new stock to the site, and we are working with him to optimise the back end to streamline that process further.
Successful collaboration
This is an e-commerce WordPress site I would not have been able to create on my own. I am, by definition, a “front end” designer first and foremost, and while I have created e-commerce shopping sites in WooCommerce before, I hadn’t at this scale, and the custom programming element is way beyond my pay grade.
Working with Paul Evanson has allowed us to create a site that’s pushed us both, but the results have been a great success.
I’m a firm believer in partnerships, and I have a wide range of specialists on hand to assist me in delivering complex projects.
If you have a complex (or simple) web project on the horizon, I’d love to help you with it. Just drop me a message.