Senior UI/UX
and front-end
developer

case study

Connells Surveyors

#cms integration #front-end #UI design #UI development #umbraco
visit website

Connells Survey & Valuation is a national survey and valuation company based in the United Kingdom. Even though they have been active for more than 30 years, the company’s digital presence was still very dependent on the Connells Group corporate website. A dedicated website was needed, and I was asked to make it happen.

My role

Since I had all the necessary skills, I became both a designer and developer for this project. I was tasked to create a simple brochure site with easy UX, clean UI and Umbraco powered back office.

How I did it

My process in this project was:

  • Create a sitemap/information flow
  • Create a low-fidelity prototype based on a sitemap
  • Create a design based on the low-fidelity prototype
  • Create a style guide for the website
  • Build HTML files while using a style guide
  • Set up Umbraco CMS and integrate all HTML files
  • Set up on-page SEO

Very early in the process stakeholders told me that they want to separate two key areas of their business – B2B and B2C. Keeping that in mind, I focused on creating two separate sections dedicated to consumer and business services. It was essential to make both parts accessible from all website areas as some services overlapped in their definition. I achieved that by including links to both regions in the homepage and main navigation, thus making it very visible to the users no matter where on the website they landed.

Creating a style guide helped me to keep the website professional and consistent. It also meant that another developer taking over from me could easily understand the purpose of design elements and the code.

Since all I had to follow was a company’s logo, I had a free will to experiment with supporting colour schemes, imagery and font options. In the end, the client was delighted with my choices and result.

Results

A fast loading, smooth and on-brand corporate website with a personal touch that is easy to use for all types of users.

Next case study

HULT International

How do you animate 78 SVG shapes in less than 10 days?

  • CSS3 Animations
  • front-end
  • SVG Animations