Ark Roofer
Designing responsive screens for a roofing company within a tight project deadline.
Background
Ark Roofer LLC is a Texas-based company specializing in roofing, solar, windows, and exterior services. The company needed a new website and consulted Building Brands Marketing agency of Victoria, TX, with whom I previously worked as a web copywriter, for the job.
The Project
While preparing to deliver proof of concept to the client, one of BB’s designers had to step back. The agency needed a designer to deliver two responsive screens— a landing page and an about page— within a two-week deadline. As an early career designer, it was an absolute privilege to step up to the task.
The Market Research
Building Brands had already collected sufficient market data, so it was my turn to familiarize myself with their research and deliver the screens. The primary goal for Ark’s landing page is to guide users to the services pages, but the client also envisioned a landing page that provides resources and information, even if site users don't choose Ark for their home project.
Users & Goals
When meeting with BB’s website coordinator and project lead, I learned that most site visitors arrive from branded searches on signs and vehicles. When users visit Ark’s website, they have two primary goals:
Locating the services page for their roofing project, and
Learning about the company and its exterior services.
New Feature Alert!
The team at BB and the client already had an eye-catching feature in mind for Ark’s landing page. They were inspired by Men in Kilts' website— more specifically, the "Services" feature on their landing page. This interactive feature provides a fantastic visual overview of the company’s exterior services while directing users to the necessary service page.
The Design Process
I received feedback from the client, the website coordinator, and the vice president of operations for building brand marketing while designing. Since I was only designing two responsive screens, the agency’s staff collaborated with me to implement changes in real-time. I was also granted temporary access to the agency's UX component library.
Challenges & Growth
Ark’s website before the redesign was very text-heavy, so BB’s copywriter had quite a task on their hands. The web copy for these screens was still under revision, and some paragraphs fit rigidly within the necessary sections. As an early career designer, I worried that my earliest screen iterations felt too clunky and cluttered at first.
Mistakes are, of course, a necessary part of the design process, but it was also my first project, and I had really hoped to get more things right on my first iteration. Through communication with the BB team and a few rounds of revision, I was able to reinvent the layout of several sections to create a better flow.
Final Mid-Fidelity Screens
After iterating, I passed the final screens off to Building Brands’ web designer and developer! As anticipated, the client and BB team made additional changes between my design handoff and publishing the final version of Ark Roofer’s website, but I was pleasantly surprised to discover that many of my design decisions made it into the final product!
What I Learned…
It’s clear (to me, my own biggest critic) that my final designs were those of an early career designer, and there were many things I couldn’t accomplish within this project’s scope. I worked quickly under this project’s time constraints, so naturally, some performance anxiety was inevitable. With that said, I’m quite proud of the final result.
With the benefit of experience and hindsight, I would’ve liked to spend more time prototyping the responsive landing page feature. If my contract had extended to the project’s end, I think I could have contributed some of my photography knowledge about how best to align the house for the services feature. Reflection aside, Building Brands’ team did an incredible job with this project, and I’m happy I got to be a part of it!
See For Yourself!
Thanks for sticking with me until the end of this project! Want to see these responsive screens in action? Tap the button below to interact with the fullscreen prototype in Figma!
