Overview
Introduction
ProStruct360 entrusted me with the task of crafting a website for their software. I collaborated with the Director of Marketing on this project, and our goal was to translate the company’s vision into an engaging online platform that effectively showcased the software and catered to their target audience. Throughout the project, I gained valuable experience in web design and created a user-friendly and visually appealing website that aligned with ProStruct360's branding and objectives.
My Role
Utilizing WordPress Elementor, I designed each page, ensuring seamless integration of branding elements and intuitive navigation. Initially, ProStruct360 as a brand had no online presence or branding assets besides a logo and color palette. I designed captivating visuals and backgrounds that look modern and clean while resonating with the target audience - primarily contractors within the construction industry. Collaborating with stakeholders, I iteratively refined the website, incorporating feedback to align with both user needs and business objectives.
My role extended beyond design; I delved into search engine optimization (SEO), conducting comprehensive keyword research to optimize content for maximum visibility. Additionally, I took charge of content creation, generating engaging blog articles to enhance the website's relevance and authority.
Company Background
ProStruct360 is a construction management software designed by contractors, for contractors. Operating within the construction industry, their primary audience comprises contractors seeking efficient solutions for managing and enhancing their businesses. Their overarching goal was to establish a robust online presence, showcasing their software to fellow general contractors. They envisioned a website that seamlessly combined a clean, modern aesthetic that was still tailored specifically for contractors.
Project Objectives
Develop a user-friendly website for ProStruct360, facilitating easy access to information about the software.
Create cohesive branding assets for the website, ensuring consistency across digital platforms.
Showcase ProStruct360's array of services, including coaching, software offerings, podcast episodes, events, and more, in a centralized location.
Implement clear calls to action for scheduling demos and contacting the company, ensuring streamlined user interaction.
Design the website with a modern aesthetic, maintaining a cohesive and consistent style of branding throughout.
Pre-Design Research
Competitor Analysis
Before beginning the website design process, thorough research and analysis laid the foundation for success. Conducting competitor analysis provided invaluable insights into the construction industry and the preferences of our target audience: contractors. Recognizing the need for a design that resonated with this demographic, we opted for a masculine aesthetic, incorporating geometric elements to symbolize building and strength. Given contractors' varying levels of tech-savviness, clarity, and ease of navigation were essential; every aspect of the design was considered to ensure ease of usability.
Identifying Crucial Decision-Making Points
Identifying the home page and pricing page as pivotal touchpoints, we prioritized their clarity, understanding that they serve as the initial entry points for visitors and critical decision-making hubs. Collaborating closely with stakeholders, we honed in on their objectives, resulting in strategically placed calls to action for scheduling demos throughout the website. Acknowledging demos as lead conversion catalysts, we positioned these prompts strategically for maximum engagement and streamlined customer journeys.
Iterative Design Process
Our primary objective was to effectively showcase the software's capabilities while crafting a visually engaging user experience. We recognized the importance of incorporating screenshots of the software to provide tangible demonstrations of its features. To incorporate the '360' aspect, I integrated circular elements throughout the design, symbolizing completeness and comprehensiveness. These geometric circle patterns served as versatile assets, doubling as backgrounds and overlays for the software screenshots. We started out with the establishment of page structures, gradually refining and enriching them with feedback from stakeholders. Through this iterative approach, we achieved a cohesive and visually appealing design that effectively communicated ProStruct360's offerings while maintaining user-friendly navigation.
Visual Design
Colors
I introduced a dark blue color to the company’s color palette to provide a contrast with their existing brighter colors. This helped give the brand a more professional feeling and balanced out the intensity of the bright orange and bright blue.
Pattern Creation
To underscore the ‘360’ aspect of ProStruct360, we wanted to incorporate circles throughout the website and the company’s branding. I came up with and designed a geometric circular pattern that was used throughout the website and has been used across ProStruct360’s other platforms such as social media and emails.
Software Graphics
Utilizing the shape pattern I made, I arranged the shapes to use as frames to showcase the various functionalities of the software. Since the software is mostly white, it needed a background to contrast with the white and light blue sections of the website. Here are a few of the graphics I created using screenshots from the software:
Final Website Design
Designing ProStruct360 website design project has been a valuable learning experience on multiple fronts. I gained experience with WordPress Elementor and have been continually improving and optimizing the website. Collaborating with stakeholders and integrating their feedback into the design process taught me the importance of adaptability and responsiveness in meeting client needs. The project also deepened my understanding of responsive web design principles, ensuring optimal user experience across various devices. Moving forward, these insights will undoubtedly inform and enrich my future endeavors in web design and development.
