Sutton Lodge is a website design and development project that I worked on during my time at EASOL (an experience based website design agency). I was tasked with creating a digital space for Sutton Lodge, a distinguished floristry company with a flower farm in the UK.

CLIENT: Sutton Lodge

SERVICES: Figma UI design & EASOL CMS development

The initial challenge was to address the client's need for a comprehensive online presence, replacing their use of their Instagram profile to manage their business. Sutton Lodge wanted a centralised platform for service inquiries and workshop bookings, aiming to eliminate disorganisation and streamline their business operations.

To understand the target audience, I conducted observational research during the R&D phase, analysing images of workshop attendees at the flower farm. This provided valuable insights into customer behaviour, guiding the design process.

For the UI design phase, I designed the visual blueprint by creating early wireframes to plan the layout of each website section and strategically present the content. Considering the client's highlighted areas of focus, I ensured simplicity and sophistication in the wireframes, with a deliberate emphasis on optimising white space.

Closely following the client's provided branding guidelines, encompassing typography, colour palette, and illustrations, I created a design that was minimalistic and professional, aligning with the client's vision. By incorporating the colour palette sparingly, using generous padding between sections, and using only two font weights, I successfully achieved a website that not only met but exceeded the client's expectations, showcasing their services with clarity and refinement.

For the development phase, I used EASOL's Content Management System (CMS), similar to Shopify but with a distinctive focus on user-friendly customisation and an integrated booking system. The development of this website was quite straightforward as the design was quite minimal, this CMS also has an integrated responsive feature, so it was very easy to view how the website responds to various devices.

Powered by Liquid and Bootstrap, the tech stack demanded a nuanced approach to advanced customisation, particularly in areas like overriding Bootstrap and Liquid code for the layout of the four gallery images on the homepage.

Despite Liquid and Bootstrap not being my preferred coding languages, I navigated coding-related challenges by using resources like Bootstrap's Documentation website and online directories for Liquid code. Making sure I followed coding standards, I made sure to use correct syntax, documentation, and tags during code overrides, ultimately delivering a seamlessly functional and visually cohesive website that responded effortlessly across various devices, amplifying the client's digital presence.

Testing and deployment were streamlined through EASOL's CMS, ensuring functionality across browsers and devices. The post-launch period saw increased workshop sales and improved engagement with wedding flower services. The client praised the website's user-friendly interface and streamlined booking process, validating the project's success.

Reflecting on this website project, I recognise the importance of adaptability in overcoming coding challenges and the significance of user-focused design. This project has enriched my expertise, emphasising the impact of a well-crafted digital presence on business outcomes.