For this project, I took inspiration from a real Roofline company website. I identified that their site has a few problems so I redesigned it, changing the name and using my own images and text.
The problems I set out to address with the redesign are:
• It's not responsive - when viewing the website on a phone, it's the desktop site, but zoomed out really small. Not having a mobile optimised site can cause a number of issues, primarily the usability, but also search engines don't rank sites very highly that don't work on mobile.
• There's no clear value proposition.
• There are multiple call to actions (CTA), which is confusing - there is a contact form, but also buttons to request a call back and send a message.
• There's multiple confusing elements on the page that aren't needed - there is a search bar, when there isn't enough content on the site to need one.
After identifying the issues with the current site, I did research on competitors to see what their websites looked like and what sort of content they had. Following that, I did a full audit of all the existing content on the page, to see what was there and how it could be restructured in my new design.
From there I created a wireframe to create the structure of the page. Whilst working on the layout and content of the page for a desktop format screen, I was already thinking about how the elements would move, change and re-flow when the screen is narrower on a mobile device. I laid out elements that are side by side on larger devices, but stack on top of each other for mobile screens. Establishing a clear hero section with a value proposition and a clear, single call to action, was the first step of the redesign. I also wanted to start the 'Why work with us' section above the fold, in order to encourage the user to scroll down. Following that, I created a section to explain the different parts of a Roofline, as this was something that was on the original site, but didn't work properly. For a real client site, this may be a candidate to be on its own page, but for this fictional project, I wanted to keep more elements on the homepage.
Once the structure of the page was established, I moved onto the visual design. I kept the design fairly simple so that the information displayed on the page is clear to visitors of the site. I created a very simple logo and used similar (but different) colours to the existing site. A real client would have multiple images of the projects they've worked on, but I couldn't take any for copyright reasons. As this is quite a specialist subject, I struggled to find any suitable free stock images, so I took some photos of my own house to use, so I could get the exact angles and subjects I new I needed. Putting all the elements together in Figma to create the design was fun, and has helped me learn some more about the software. Once I completed the desktop design, I duplicated it and re-flowed the elements to make the mobile design. This process is very much like building out the design to be responsive in Webflow.
This project has taught me quite a lot, as well as helping me to refine my processes. I'm pleased with the way the project turned out.
