Concrete Innovations, an architecture, and interior design firm, aims to increase brand awareness and attract more projects in Egypt and the Middle East. The goal is to create a website that highlights their excellent services, showcases their portfolio, and provides a seamless user experience to convert visitors into clients.
Increasing brand awareness and showcasing Concrete Innovations' architectural and interior design expertise.
Client
Concrete Innovations
Duration and outcome
2 Months 10+ Screens
My role
- Senior Product Designer
As a Senior Product Designer for the Concrete Innovations website project, my duties included conducting stakeholder and user research to understand business goals and target audience needs, creating a clear information architecture, developing wireframes and prototypes, designing visually appealing and user-friendly interfaces, conducting usability testing, and collaborating with developers to ensure a seamless implementation. Additionally, I was responsible for overseeing the project’s overall design strategy, ensuring mobile responsiveness, optimizing for SEO, and continuously iterating based on user feedback to enhance the user experience and achieve business objectives.
Tools used
Introduction
Concrete Innovations, a premier architecture and interior design firm, sought to revamp their online presence to better communicate their expertise and innovative approach. The primary objectives of the project were to enhance brand awareness and attract new projects in Egypt and the Middle East.
This case study details the process and methodologies employed in the redesign of the Concrete Innovations website, aiming to create a visually compelling and user-friendly interface that effectively showcases the firm’s high-quality services and impressive portfolio.
Objectives
The primary goals for the new website are:
Increase Brand Awareness
Establish a strong online presence to reach a broader audience and highlight the firm's unique value propositions.
Showcase Expertise
Present a comprehensive portfolio and detailed descriptions of architectural and interior design services to build credibility and trust.
Attract New Projects
Provide a seamless user experience to convert website visitors into potential clients, ultimately driving business growth in the target regions.
The process
Research and Discovery
Design
User Testing
Implementation
Launch and Post-Launch Optimization
Research and Discovery
Learning about the business’s needs, goals, and expectations through stakeholder interviews
I began my research with stakeholder interviews to understand the vision, goals, and expectations of key individuals within Concrete Innovations. I conducted semi-structured interviews, which allowed for flexibility and enabled stakeholders to freely express their thoughts while ensuring all key topics were covered.
I conducted in-depth interviews with key stakeholders, including the firm’s founders, project managers, and marketing team. We discussed the current challenges and limitations of the existing website, which helped me gather insights into the company’s vision, mission, and long-term goals.
For note-taking, project management, and collaboration, I used Notion, which allowed me to organize interview insights and share them effectively with the Concrete Innovations team.
Learning about competitors by conducting competitive analysis
To effectively position Concrete Innovations in the competitive landscape of Egypt and the Middle East, I thoroughly analyzed leading architecture and interior design firms in these regions.
This analysis focused on identifying strengths, weaknesses, and opportunities for differentiation to ensure the new website stands out
This foundational understanding guides our research efforts and steers the project’s direction.
Next, I organized a workshop to assess the likes and dislikes of competitors among stakeholders. This allowed diving deeper into the competitive landscape, evaluating key competitors based on what stakeholders appreciate and dislike about their websites.
This analysis helped in pinpointing best practices and areas for improvement, informing the redesign of the Concrete Innovations website.
Understanding experiences, preferences, and pain points with User interviews
Once I had a solid understanding of the competitive landscape, I was able to proceed with conducting user interviews to gather in-depth qualitative insights from existing and potential clients about their experiences, preferences, and pain points when interacting with architecture and design websites.
I conduct interviews with users who engage with the website and potential clients of the firm. These individuals encompass architects, interior designers, project managers, contractors, real estate developers, and individuals seeking architectural and design services for residential or commercial projects.
These insights helped in understanding their needs, preferences, and challenges when navigating and interacting with the Concrete Innovations website
”How often do you visit architecture and design websites?
Website Usage and Preferences
”What factors influence your decision to visit a particular architecture and design website?
Website Usage and Preferences
”Can you describe a positive experience you've had while interacting with architecture and design websites?
Website Usage and Preferences
”On the flip side, have you encountered any challenges or frustrations when using such websites?
Website Usage and Preferences
”Is there anything else you'd like to share about your experiences or preferences when it comes to architecture and design websites?
Website Usage and Preferences
“When visiting architecture and interior design websites, how do you typically explore the services offered?”
Service Interaction
“Have you ever encountered difficulties in finding specific services on architecture and design websites?”
Service Interaction
“What features or functionalities would make it easier for you to identify and inquire about services on such websites?”
Service Interaction
“How important is it for you to have clear and detailed descriptions of services offered by architecture and design firms?”
Service Interaction
“Have you ever contacted a firm directly through their website to inquire about their services?”
Service Interaction
Research and Discovery Key Findings
By addressing these key findings and integrating insights from stakeholder interviews, competitive analysis, and user interviews, the firm can significantly improve its online presence, showcase its expertise more effectively, and attract new projects, driving overall business growth.
Key Findings
Increase Brand Awareness
Showcase Expertise
Attract New Projects
Design
Persona Design and User/wire flow
Using data gathered from user research, I developed detailed personas representing the primary user groups. Then I created a User/wire flow for each persona to visualize their interactions with the website.
This helped identify key touchpoints and areas where the design could be optimized to enhance their experience
By mapping these user flows, Concrete Innovations can ensure that each persona has a tailored and intuitive journey through the website, ultimately leading to increased engagement and conversion rates. Each flow highlights the key interactions and navigation paths that align with the specific needs and goals of the personas.
Information Architecture and Wireframes
Navigation Structure
Creating and Sharing Ideas Through Low-Fidelity Wireframes
Created low-fidelity wireframes to outline the basic structure and layout of key pages. These wireframes served as a blueprint for the website, detailing the placement of content, navigation, and interactive elements.
Entry Points
Feedback and Iteration
Once the wireframes were completed, I shared them with key stakeholders, including product managers, developers, designers, and users, to gather feedback.
Based on their input, I made several iterations and refinements, addressing concerns around usability, content layout, and user flow.
User Interface (UI) Design
Brand Integration
Incorporated Concrete Innovations’ brand elements, such as the logo, color scheme, and typography, into the website design. Ensured that the visual design reflected the firm’s innovative and high-quality ethos.
High-Quality Visuals
Used high-resolution images and professional photography to showcase the firm’s portfolio. Integrated visual storytelling techniques to highlight key projects, including detailed project descriptions and client testimonials.
Color scheme
Applied a cohesive color scheme that enhances readability and usability across all interface elements.
White
#FFFFFF
Blue (NCS)
#0083C2
Dim Gray
#696969
Chinese Black
#444444
Typography
Choose an appropriate typography to ensure clarity and consistency throughout the platform.
Aa
Nunito Sans - Headings
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Aa
Duru Sans - Sub Heading
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Aa
Poppins
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
High fidelity design
Created a high-fidelity prototype with polished visual design and interactive elements to simulate the final product experience, preparing it for usability testing.
User Testing
Wireframes
I developed wireframes to define the app’s layout and structure, emphasizing easy navigation and clear information organization. These wireframes were crafted in alignment with the user journey maps to depict the app’s flow and structure accurately.
Implementation
Frontend Development
Translated the visual designs into responsive HTML, CSS, and JavaScript code, ensuring the website looked stunning and worked flawlessly on all devices and screen sizes. For instance, the use of CSS Grid and Flexbox allowed for a flexible and dynamic layout that adapted to various screen resolutions, providing an optimal viewing experience on both mobile and desktop devices.
Responsive Design
Ensure the platform is responsive and adapts seamlessly to various devices (desktops, tablets, mobile phones).
Content Management System (CMS)
Implemented a user-friendly CMS (WordPress) that allowed the Concrete Innovations team to easily update and manage website content. The CMS was customized with specific templates and modules tailored to the firm’s needs, such as a portfolio section where new projects could be added with detailed descriptions, images, and categories.
Cross-Browser, Cross-Device Testing and Performance Testing
Conducted rigorous testing across various browsers (Chrome, Firefox, Safari, Edge) and devices (smartphones, tablets, desktops) to ensure consistent performance and appearance. Identified and fixed issues such as inconsistent button styling on different browsers and layout misalignments on certain screen sizes.
Used tools like Google PageSpeed Insights and GTmetrix to test and optimize the website’s performance. Addressed issues such as large image sizes and render-blocking resources, resulting in faster load times and a smoother user experience.
SEO Optimization
Implemented on-page SEO best practices, including optimizing meta tags, headings, and alt text for images. Created an XML sitemap and submitted it to search engines to improve indexing and visibility.
Launch and Post-Launch Optimization
Launch Strategy Development
Concrete Innovations launched its website during the summer break to capitalize on high property investment interest. They created anticipation with social media teasers and email newsletters offering sneak peeks of the new website features.
Quality Assurance
Thorough testing was conducted to ensure the website worked flawlessly across all devices and browsers. Any issues, such as a mobile contact form problem, were resolved before the launch to guarantee a smooth user experience.
Deployment
The website was launched during off-peak hours to minimize disruption, with continuous monitoring to swiftly address any issues, ensuring users experienced no downtime.
Post-Launch Optimization
Monitoring and Analytics Setup
Analytics tools were implemented to track user behavior and website performance, with metrics like page views and conversion rates helping identify areas for UX improvement.
Regular analysis of user data-informed refinements to the website’s design and functionality, such as enhancing the portfolio section based on heatmap insights.
A/B Testing, Technical Maintenance and SEO Updates
A/B tests were conducted on elements like call-to-action buttons to optimize user experience, with the most effective designs and placements being implemented to increase conversion rates.
Regular maintenance and SEO updates ensured the website’s security, stability, and performance. Image compression and script optimization were performed to improve page load speed, enhancing the overall user experience.
Concerete Innovations
Concerete Innovations
Responsive and User-Friendly Interface
A clean and intuitive interface that is easy to navigate for users of all tech-skill levels.
Focusing on Credibility and Transparency
Users can preview the report before purchasing, ensuring credibility and transparency by showing exactly what they’ll get, with the added benefit of being able to download the sample report.
Buy a report with just a few easy steps
Users can purchase reports effortlessly in a few simple steps
Create and update your profile easily
And much more..
Outcome and Impact
The redesign of the Concrete Innovations website achieved its primary objectives of increasing brand awareness, showcasing expertise, and attracting new projects. Through a meticulous process of research, design, usability testing, and implementation, the new website now effectively communicates the firm’s innovative approach and high-quality services, positioning them for continued growth in Egypt and the Middle East.
Enhanced Brand Awareness
The new website greatly enhanced online visibility, drawing a wider audience from Egypt and the Middle East. Additionally, it elevated brand perception with a polished and professional online presence.
Showcased Expertise
The firm's portfolio and services were effectively highlighted, bolstering credibility and trust with potential clients. Additionally, storytelling was enhanced through high-quality visuals and engaging content.
Attracted New Projects
The smoother user experience resulted in more inquiries and project leads, along with higher conversion rates due to easier navigation, clear calls to action, and a seamless contact process.
If you've got a brilliant concept itching to become a reality, let's talk!
Whether you need help from initial brainstorming to prototyping and final design, I'm here to provide comprehensive product design services tailored to your vision. Let's work together to create a seamless and user-centric design solution that resonates with your audience and brings your product to its fullest potential.
Let's Talk