This project came across my radar one day in 2023 from a man who owns a local Chimney Sweeping business and was looking a simple website to help further promote his business.
To date all he had been using to promote his business was social media on Facebook or Instagram. He was looking a website as another way for people to see what he offers.
So I met with him one night over a coffee and went over what would be the best way to go about making the website an what I can offer him, in terms of helping him with his social media presence as well.
UX Researcher
Developer
UI Designer
Illustrator
tester
To come up with new ideas for how I wanted the website to look I went online and looked at different websites to see what inspiration I could get and things that I could re use to fit my own idea.
Another new tool that I used when thinking up ideas was the new generative AI feature now in Framer where you can give it a prompt of what you are looking for and how you would like it to be designed and it will give you a webpage that you can use and re-design if you want. I did this about 5 times and I got loads of ideas.
This was a fun new tool to use and was was interesting as I had never used anything like it before and it gave me really good ideas for the website.
03 User Research
Empathy Mapping
My next stage of my design process was to create an empathy map for a potential users of the website.
It is a good way to find out what potentially the users will say, do, think and feel during their time of using the website and also what they gain from using the site but also their pains ad any troubles they might have along the way so that I can identify them and fix the issue
By creating an empathy map I was able to uncover user needs that we were not aware of before. I discovered different gaps in my research that I had not thought of before and from here I can now go and create different user personas based on my empathy map.
So I can better design my web page so that I can suit all the needs for any of my users.
After creating my empathy map I was then able to create a few user personas for the different types of people who may need the services of a chimney sweep.
So I created 3 different user personas for people with different needs and wants. I looked at their demographic and the tech they have access to. The subject as to why they need a chimney sweep and their different goals and frustrations.
I tried to make them as different as possible so I could get a different range of personas.
This task really helped me figure out who would be using the website and allowed me to create a good picture so that I could design and develop this website to make it easy and user friendly to use so users can carry out their tasks quickly
All of these allowed me to paint a good picture of my users and helped me when deciding on what to include in my app.
I created different user flows for different tasks that my users will do when using the website to complete a task.
The flows take them from when they enter the website, through the steps towards a successful outcome and final action such as booking a chimney sweep.
These flows allowed me to understand my user's needs and meet those needs the easiest way possible.
As my website is just the one page my flows were pretty simple and do not have the user clicking through different pages to get their desired result.
Next, I created a user journey for one of my potential users of the website to show the different journey the user will have when going through the website to complete a task
This allowed me to visualise journeys, as it created a descriptive narrative that I could use and learn from to help me shape my web page and it tells me a user-centred story about the process from start to finish
My user journey map shows a potential user and puts them in a scenario and shows the different expectations they have when using the website.
My user journey describes the different stages that the user will go through from awareness, consideration, acquisition, service and loyalty. It also goes through the user's different steps, what they are thinking, what they are doing, the different pain points during each stage, how they feel during each stage and the different opportunities for me as the designer that I found that would make the webpage that bit better and easier to complete tasks.
After finishing my research phase and gathering all that I had discovered It was time to get on and start doing the part that I enjoy the most, putting pencil to paper of in this case pen to iPad and drawing out different screen ideas of how my web page could look.
My first idea was very simple it stats with the title and social media links in the header, then has a full width title image below that will include information on the business. Next the will be a simple about section telling the user about the company. Then an image separating that and the testimonies that I will have in below from different past customers. I then put in another image and finally the footer that will show the same personal info as the to so the user can find it easier at the bottom as well.
My second idea was more creative. It started the same way as the first idea, but below the header image, I will have the two sides of the company business card and then the company logo in the middle. Then below I will have the different services that the company offers along with images, then the About section. Again an image to split up the testimonials and the about section and then the footer section with all the personal info on it.
My third idea and the one that I think will come out the best when I move to the mid-fi and hi-fi stages, it has the same big header image as before that will draw the user attention from the start, a section that says scroll down to keep the user engaged and make them want to see more. the about section across two column ms making it easier to read. Then there is an image to split up the body copy and after the image there is the services section that will show and tell the user what each service is. Then there will be three different testimonials from past customers. Finally the same footer section as in the other two ideas.
After drawing my sketches and getting some feedback I then went on and designed my mid-fi mockups that allowed me to get a clearer picture of what the different ideas will look like.
Allowed me to see where and if all my elements would fit and work properly. It also allowed me to get my spacing between images and text down to the last pixel.
This is my favourite part of the design process where you can start to see the design coming together and it starts getting real.
After completing my Mid-Fi Mockups and tweaking a few things to get my design perfect I then went and created my Hi-Fi mockups and added all of my image and content.
After getting it all in the right place I then sent it off to the client for review to see what he thought and if he had any changes.
When I got it back there were a few changes to be made and a couple of things he wanted added in like his email and an extra line in the about section.
There were no major changes to be made and overall the client was very happy with what I presented him with.
This part is definitely the best as I can see what my final design will look like and really brings it to life and makes it real.
My next stage was to set up the SquareSpace site and get building. This did not take long and was easy to do as SquareSpace make it easy to layout your website and put all of your content were you want.
chrisdale.design
x
D.McMullan Chimney Cleaning & Stove Maintenance
A master sweep with over 12 years of experience. Darren McMullan is Banbridge's best chimney sweep trusted by many.
It was a pleasure to work alongside Darren these past few weeks to get this website just right. It was also a great learning experience for me as a designer.
Click on the image below to view the finished website.
