A Construction Website
Duration
5 weeks
Platform
Web
Role
UI/UX Designer
Tools
Figma / Wix Studio
Project Overview
Context
Research Shows Websites Influence 97% of Clients' Purchasing Decisions. Although JR Construction has no trouble finding clients by word of mouth and business cards they're missing out on a ton of opportunities by not having an online presence. Having a website acts as a 3 in 1: business card, sales pitch, and portfolio. I convinced JR Construction in investing into a website to offer an easier way of attracting clients.
Problem
Though JR Construction has been sustainable off word of mouth and business cards they were missing out on a whole new client reach. They also needed to improve on a smooth way of handling quote requests while showcasing who they are and their work.
Solution
To address the requirements outlined, I proposed the development of a comprehensive website for JR Construction. This website would serve as a powerful promotional tool, effectively communicating the identity and services offered by JR Construction to its target audience.
Research Analysis
Competitive Anlysis
Embarking on this project I was overwhelmed. I had no idea what a construction website looks like let alone a good one. I initiated my research by studying leading construction company websites, seeking inspiration and insights into effective design and content. Subsequently, I focused my investigation on companies within the San Francisco Bay area, aiming to identify the websites against which JR would be competing.
Interview Reasearch
Another form of research I did was to ask homeowners and see what people look for when settling on a contractor company. The most common answers I got were experience and reputation. My last form of research was Google. Just by surfing, I was able to grasp the essentials of a construction website.
Questions
-
What are the essentials for a construction website
-
What should site visitors do next
Findings
-
Include a service page
-
Include the service area so client time isn't wasted
-
Make it ridiculously easy for people to do business with you
Personas
Creating a persona allowed me to step inside the world of my client. It gave me the ability to look at my website through the lens of the target client which then allowed me to design a better experience as I designing for the consumer.
Journey Mapping
There is always a back-and-forth interchange between a consumer and at least one other interaction point, regardless of the nature of the customer experience. I wanted to feel what the client would feel through the experience of looking for a contractor. The journey map gave me that type of insight giving me a better idea of how I can design for the consumer.
Design Process
Site Map
The site map served as a blueprint, outlining the hierarchy of information and the relationships between different sections. This view helped identify potential bottlenecks, optimize navigation pathways, and ensure a logical and user-friendly experience.
Wireframing
Creating a sitemap first gave me a better scope of what pages I needed to design and how they would interact with each other. After looking back at my list of inspiration I began drafting multiple wireframes that would help visualize the different opportunities I have.
Low-fidelity
I created low-fidelity wireframes to show how the content would be arranged on each screen based on research I had done. I made sure the business needs were satisfied before going on to the next stage of the process by using my persona and the combined results of my research to inform my design.
Mid-fidelity
Reevaluating my design choices on the early wireframes, I made a few changes. I felt that the layout of some of the pages felt dated and didn't capitalize on the amount of space I had. I did a few user tests comparing the two iterations gathering feedback on how they felt about the changes. Overall the feedback was positive, stating that the second iteration guided the user a lot better than the V1 wireframes.
High Fidelity Design
Combining the findings from my initial test and studies, I produced a High Fidelity Design for JR Construction.
Prototype
In the course of the project's development, following the completion of my fifth iteration of wireframes, I proceeded to construct a prototype for presentation to the client. This proactive step aimed to identify and address any potential issues with the website's design and functionality. The intention was to solicit feedback and ascertain whether the client harbored any specific preferences or desired modifications before progressing to the implementation phase in Wix Studio. By adopting this approach, my goal was to minimize the expenditure of both time and resources, ensuring a more efficient and cost-effective execution of the final website.
Reflections & Takeaways
Understanding the target audience was paramount in shaping the UX. Employing user personas and conducting usability testing, I aimed to create a website that fulfilled the needs of both potential clients and industry professionals. Clear information architecture facilitated a logical flow of content, making it easy for users to find relevant information about JR Construction's services, projects, and contact details. I believe this was my best work yet when it comes to layout design. If there was one thing I would change it would be how I presented it to the client.
​