GTZ Consultants
GTZ Consultants
GTZ Consultants
GTZ Consultants
A responsive website for a small architectural firm
A responsive website for a small architectural firm
A responsive website for a small architectural firm
A responsive website for a small architectural firm
Scope
Scope
Scope
User research, User Interviews, Data Synthesis, Information architecture, Branding/UI Kit, Usability testing, Prototyping
User research, User Interviews, Data Synthesis, Information architecture, Branding/UI Kit, Usability testing, Prototyping
Tools
Tools
Tools
Figma, Figjam, Notion
Figma, Figjam, Notion
Role
Role
Role
UX Researcher & Product Designer
UX Researcher & Product Designer
Background
Background
Background
GTZ Consultants, an experienced Architectural-Civil Engineering firm in Alexandria/Annandale, Virginia, brings over a decade of expertise to residential and commercial projects across the DC area, spanning Virginia, DC, and Maryland. They are looking to redesign their website to better connect with new clients and unlock fresh business opportunities.
GTZ Consultants, an experienced Architectural-Civil Engineering firm in Alexandria/Annandale, Virginia, brings over a decade of expertise to residential and commercial projects across the DC area, spanning Virginia, DC, and Maryland. They are looking to redesign their website to better connect with new clients and unlock fresh business opportunities.
GTZ Consultants, an experienced Architectural-Civil Engineering firm in Alexandria/Annandale, Virginia, brings over a decade of expertise to residential and commercial projects across the DC area, spanning Virginia, DC, and Maryland. They are looking to redesign their website to better connect with new clients and unlock fresh business opportunities.
The Problem
The Problem
The Problem
Over the past decade, the company website has lacked updates, hindering the showcase of current projects and effective client attraction. Problems such as poor navigation, absence of information hierarchy, and non-responsiveness impede user experience, preventing the site from fully engaging and drawing in the desired audience.
Over the past decade, the company website has lacked updates, hindering the showcase of current projects and effective client attraction. Problems such as poor navigation, absence of information hierarchy, and non-responsiveness impede user experience, preventing the site from fully engaging and drawing in the desired audience.
Over the past decade, the company website has lacked updates, hindering the showcase of current projects and effective client attraction. Problems such as poor navigation, absence of information hierarchy, and non-responsiveness impede user experience, preventing the site from fully engaging and drawing in the desired audience.
The Solution
The Solution
The Solution
The redesigned responsive website showcases an updated project gallery, transforming the informational hierarchy. This process involved incorporating clearly defined headings, visual cues, a consistent layout, and an intuitive navigation system, providing users with a seamless pathway through the site.
The redesigned responsive website showcases an updated project gallery, transforming the informational hierarchy. This process involved incorporating clearly defined headings, visual cues, a consistent layout, and an intuitive navigation system, providing users with a seamless pathway through the site.
The redesigned responsive website showcases an updated project gallery, transforming the informational hierarchy. This process involved incorporating clearly defined headings, visual cues, a consistent layout, and an intuitive navigation system, providing users with a seamless pathway through the site.
Research
In order to determine the appropriate information to incorporate into the website, I conducted market research, consulted with an industry expert, performed competitive analysis, and conducted insightful interviews with potential users. My inquiries were designed to reveal the specific requirements individuals might have when considering hiring a professional for renovations.
Market Research- Competitve Analysis
I began market research to understand the target audience and gain insight into the market dynamics shaping their needs and behaviors.
I began market research to understand the target audience and gain insight into the market dynamics shaping their needs and behaviors.
I began market research to understand the target audience and gain insight into the market dynamics shaping their needs and behaviors.
Architectural firms, as part of the service industry, rely significantly on referrals and repeat business.
Architectural firms, as part of the service industry, rely significantly on referrals and repeat business.
Architectural firms, as part of the service industry, rely significantly on referrals and repeat business.
Industry Expert
To gain a deeper understanding of the industry trends, challenges, and opportunities I reached out to an industry professional who has expertise in running their own business.
To gain a deeper understanding of the industry trends, challenges, and opportunities I reached out to an industry professional who has expertise in running their own business.
To gain a deeper understanding of the industry trends, challenges, and opportunities I reached out to an industry professional who has expertise in running their own business.
Title/ Position
Licensed Architect for 19 years
Field
Residential
Interview Findings
01
01
Residential clients often lack architectural experience and they appreciate detailed information about the design process.
Residential clients often lack architectural experience and they appreciate detailed information about the design process.
Residential clients often lack architectural experience and they appreciate detailed information about the design process.
02
02
Showcasing awards on a website, alongside displaying reviews, enhances the firm's reputation by building trust and emphasizing credibility.
Showcasing awards on a website, alongside displaying reviews, enhances the firm's reputation by building trust and emphasizing credibility.
Showcasing awards on a website, alongside displaying reviews, enhances the firm's reputation by building trust and emphasizing credibility.
03
03
Smaller firms may struggle to showcase recent projects due to infrequent website updates, often lacking professionally photographed content.
Smaller firms may struggle to showcase recent projects due to infrequent website updates, often lacking professionally photographed content.
Smaller firms may struggle to showcase recent projects due to infrequent website updates, often lacking professionally photographed content.
Heuristic Evaluation
Faced with limited user data access, I initiated the website redesign with a quick heuristic evaluation to uncover usability issues early and inform design decisions effectively.
Faced with limited user data access, I initiated the website redesign with a quick heuristic evaluation to uncover usability issues early and inform design decisions effectively.
Faced with limited user data access, I initiated the website redesign with a quick heuristic evaluation to uncover usability issues early and inform design decisions effectively.
Key Findings
Visibility of system status
Blue-highlighted services imply click-ability, potentially causing confusion. The goal: optimize presentation for a clear, intuitive display, guiding users through interactions seamlessly.
Blue-highlighted services imply click-ability, potentially causing confusion. The goal: optimize presentation for a clear, intuitive display, guiding users through interactions seamlessly.
Consistency and standards
Deviation from web standards, such as all-capitalized letters and a fixed layout, creates visual noise. Aligning service presentation and layout with recognized standards is crucial for a cohesive, user-friendly interface.
Deviation from web standards, such as all-capitalized letters and a fixed layout, creates visual noise. Aligning service presentation and layout with recognized standards is crucial for a cohesive, user-friendly interface.
Aesthetic and minimalist design
The website highlights services, but issues like small text, unclear hierarchy, errors, and limited white space create clutter. Goal: streamline, prioritize, and harmonize visual elements.
The website highlights services, but issues like small text, unclear hierarchy, errors, and limited white space create clutter. Goal: streamline, prioritize, and harmonize visual elements.
Market Research- Competitve Analysis
Key strengths include clear project categorization and high-quality, professional photos in the standout portfolio. However, lacking distinctive branding and design process visibility may impact overall client appeal.
Key strengths include clear project categorization and high-quality, professional photos in the standout portfolio. However, lacking distinctive branding and design process visibility may impact overall client appeal.
To gather ideas for potential website features, I examined competitors, focusing particularly on those within the same geographic area.
Interview Overview
Demographic
Male and Female aged between 27 to 55
Interview Method
30 Minute google meet calls
Number of Participants
4
Target Audience
Homeowners & Future Homeowners
Interview Insights
Stacey
Home Owner
“I like to review their background experience and past projects to get a sense of their expertise.”
Stacey
Home Owner
“I like to review their background experience and past projects to get a sense of their expertise.”
Stacey
Home Owner
“I like to review their background experience and past projects to get a sense of their expertise.”
Raitha
Designer
“After exploring their website, I read reviews and consider any recurring issues.”
Raitha
Designer
“After exploring their website, I read reviews and consider any recurring issues.”
Raitha
Designer
“After exploring their website, I read reviews and consider any recurring issues.”
Rachel
Home Owner
“A gallery is essential to quickly understand their vision and see if it aligns with mine.”
Rachel
Home Owner
“A gallery is essential to quickly understand their vision and see if it aligns with mine.”
Rachel
Home Owner
“A gallery is essential to quickly understand their vision and see if it aligns with mine.”
Andy
Future Home Owner
“When you travel with five or six people there’s too many to account for and so many feelings to consider. “
Andy
Future Home Owner
“When you travel with five or six people there’s too many to account for and so many feelings to consider. “
Andy
Future Home Owner
“When you travel with five or six people there’s too many to account for and so many feelings to consider. “
Affinity Mapping
Upon completing user interviews, I compiled the gathered insights and was able to see recurring patterns.
Upon completing user interviews, I compiled the gathered insights and was able to see recurring patterns.
Key Findings
01
01
Users prioritize architects with expertise for home renovations, seeking experienced professionals to handle projects confidently due to the substantial commitment and expense involved.
Users prioritize architects with expertise for home renovations, seeking experienced professionals to handle projects confidently due to the substantial commitment and expense involved.
02
02
Credibility is crucial in decision-making. Users highly value reviews and see awards positively. Some also find a social media presence enhances the architect's credibility perception.
Credibility is crucial in decision-making. Users highly value reviews and see awards positively. Some also find a social media presence enhances the architect's credibility perception.
03
03
Users prefer architects whose style matches their vision. A vital step in assessing this compatibility is a thorough examination of the architect's portfolio.
Users prefer architects whose style matches their vision. A vital step in assessing this compatibility is a thorough examination of the architect's portfolio.
04
04
Users stress the importance of a well-designed website, viewing it as an extension of the architect's work. A poorly designed website raises doubts about the architect's ability to meet their needs.
Users stress the importance of a well-designed website, viewing it as an extension of the architect's work. A poorly designed website raises doubts about the architect's ability to meet their needs.
Define
After completing research via user interviews, synthesizing insights, and compiling a competitive analysis, a clear understanding of user needs emerged, allowing me to define the associated problems.
After completing research via user interviews, synthesizing insights, and compiling a competitive analysis, a clear understanding of user needs emerged, allowing me to define the associated problems.
User Persona
For those prioritizing vision and transparent communication with experts.
For those prioritizing vision and transparent communication with experts.
For those prioritizing vision and transparent communication with experts.
After conducting the interviews, I documented numerous goals, preferences, behaviors, and pain points, which I categorized into two distinct personas that I believed most accurately represented the users' insights. These personas continued to guide my decision-making process as I progressed redesigning the website.
After conducting the interviews, I documented numerous goals, preferences, behaviors, and pain points, which I categorized into two distinct personas that I believed most accurately represented the users' insights. These personas continued to guide my decision-making process as I progressed redesigning the website.
Defining The Problems
How might we improve the selection process for clients based on effective communication, reassurance, experience, and credibility?
How might we improve the selection process for clients based on effective communication, reassurance, experience, and credibility?
How might we improve the selection process for clients based on effective communication, reassurance, experience, and credibility?
Understanding Mia and Jaime's needs and insights, my aim was to explore more deeply to discern the most critical problem to solve. By formulating (POV) statements, I crafted questions that facilitated the determination of the most effective solution.
Understanding Mia and Jaime's needs and insights, my aim was to explore more deeply to discern the most critical problem to solve. By formulating (POV) statements, I crafted questions that facilitated the determination of the most effective solution.
Brainstorming
I used mind mapping to brainstorm and communicate content organization ideas with the stakeholder after identifying the HMW question.
I used mind mapping to brainstorm and communicate content organization ideas with the stakeholder after identifying the HMW question.
I used mind mapping to brainstorm and communicate content organization ideas with the stakeholder after identifying the HMW question.
After analyzing competitors and user personas, I used mind mapping to address website pain points (communication, reassurance, experience, credibility). The stakeholder provided valuable feedback for refinement.
After analyzing competitors and user personas, I used mind mapping to address website pain points (communication, reassurance, experience, credibility). The stakeholder provided valuable feedback for refinement.
Mind Mapping
Business Goals
I made a list of both business and user goals to better understand where they meet, figuring out which features to prioritize along the way.
I made a list of both business and user goals to better understand where they meet, figuring out which features to prioritize along the way.
Business Constraints ❗
Before progressing in the design, I needed to address and resolve a couple of challenges, seeking input and discussing them with the stakeholder.
Before progressing in the design, I needed to address and resolve a couple of challenges, seeking input and discussing them with the stakeholder.
Before progressing in the design, I needed to address and resolve a couple of challenges, seeking input and discussing them with the stakeholder.
After analyzing competitors and user personas, I used mind mapping to address website pain points (communication, reassurance, experience, credibility). The stakeholder provided valuable feedback for refinement.
After analyzing competitors and user personas, I used mind mapping to address website pain points (communication, reassurance, experience, credibility). The stakeholder provided valuable feedback for refinement.
Limited content available❗
Limited service details posed an initial challenge, impacting website development. Crucial client communication ensured accurate service representation on the redesigned website.
Limited service details posed an initial challenge, impacting website development. Crucial client communication ensured accurate service representation on the redesigned website.
Limited high quality photos❗
Limited high-quality project photos impacted the website's portfolio, potentially affecting user engagement and perception, posing a challenge for the project.
Limited high-quality project photos impacted the website's portfolio, potentially affecting user engagement and perception, posing a challenge for the project.
Prioritization
Through competitive analysis and interviews, I noted numerous features that I believed could address the problem. While initially struggling to determine which features to focus on, I recognized the necessity of developing an MVP. In exploring various prioritization techniques, I landed on creating a feature set.
Through competitive analysis and interviews, I noted numerous features that I believed could address the problem. While initially struggling to determine which features to focus on, I recognized the necessity of developing an MVP. In exploring various prioritization techniques, I landed on creating a feature set.
Must Have
Must Have
Must Have
Contact
Services
Portfolio List
Project Page/Case study
About
Free Consultations
Nice To Have
Nice To Have
Nice To Have
Testimonials
Design Process
Client List
Surprising
Surprising
Surprising
Social Media
Awards and Recognition
Can Come Later
Can Come Later
Can Come Later
Can Come Later
Blog
Design
With the problem distinctly outlined, I ventured into creating user flows, task flows, and sketches to create a foundation for the optimal journey the user would take. As the sketches evolved to mid and hi fidelity I made iterations along the way to make it flow better.
With the problem distinctly outlined, I ventured into creating user flows, task flows, and sketches to create a foundation for the optimal journey the user would take. As the sketches evolved to mid and hi fidelity I made iterations along the way to make it flow better.
Creating Credibility
Creating a credible website was all about prioritizing intuitive navigation, professional design, testimonials, social media integration, and clear branding.
Creating a credible website was all about prioritizing intuitive navigation, professional design, testimonials, social media integration, and clear branding.
Creating a credible website was all about prioritizing intuitive navigation, professional design, testimonials, social media integration, and clear branding.
I started by creating a user flow to determine the most intuitive navigation users would take when visiting the website.
I started by creating a user flow to determine the most intuitive navigation users would take when visiting the website.
Having a user flow determined I moved onto focusing on the landing page and communicated with the client about what important information we would want to include .
Having a user flow determined I moved onto focusing on the landing page and communicated with the client about what important information we would want to include .
1
Problem:
The client thought that, even though the portfolio matters, showcasing services first would help them better understand if the firm fits their needs.
1
Problem:
The client thought that, even though the portfolio matters, showcasing services first would help them better understand if the firm fits their needs.
1
Problem:
The client thought that, even though the portfolio matters, showcasing services first would help them better understand if the firm fits their needs.
2
Solution:
Switched the location of the services and portfolio.
2
Solution:
Switched the location of the services and portfolio.
2
Solution:
Switched the location of the services and portfolio.
Lo-Fidelity: Landing Page
Lo-Fidelity: Landing Page
Hi-Fidelity: Landing Page
Hi-Fidelity: Landing Page
Test Users..
Test Users..
Test Users..
📝 Test users on visual design perceptions. Have them describe overall ease of use and navigation experience.
📝 Test users on visual design perceptions. Have them describe overall ease of use and navigation experience.
Showcase Experience
To offer insights into the design style, approach, and foster informed decision-making, detailed pages were created in the portfolio, providing a transparent showcase of expertise.
To offer insights into the design style, approach, and foster informed decision-making, detailed pages were created in the portfolio, providing a transparent showcase of expertise.
To offer insights into the design style, approach, and foster informed decision-making, detailed pages were created in the portfolio, providing a transparent showcase of expertise.
I started by creating a task flow to understand how to encourage the user’s exploration of the different projects available.
I started by creating a task flow to understand how to encourage the user’s exploration of the different projects available.
Lo-Fidelity: Portfolio Page
Lo-Fidelity: Portfolio Page
Hi-Fidelity: Portfolio Page
Hi-Fidelity: Portfolio Page
Test Users..
Test Users..
Test Users..
📝 Test users to assess how effectively they could locate and access a specific project and to evaluate the intuitiveness of the filter interaction.
📝 Test users to assess how effectively they could locate and access a specific project and to evaluate the intuitiveness of the filter interaction.
Establish Reassurance
Transparent and detailed service descriptions, along with insights into the design process, provide users with a confident understanding of each service's scope, eliminating uncertainties.
Transparent and detailed service descriptions, along with insights into the design process, provide users with a confident understanding of each service's scope, eliminating uncertainties.
Transparent and detailed service descriptions, along with insights into the design process, provide users with a confident understanding of each service's scope, eliminating uncertainties.
With so many different services offered I had to think about how I could present this information in a way that would not overwhelm the user so I started with sketching ideas and then moved onto creating a task flow to ensure a structured and intuitive navigation.
With so many different services offered I had to think about how I could present this information in a way that would not overwhelm the user so I started with sketching ideas and then moved onto creating a task flow to ensure a structured and intuitive navigation.
1
Problem:
There is a lot of text and can cause cognitive overload, making it hard for users to absorb the information.
1
Problem:
There is a lot of text and can cause cognitive overload, making it hard for users to absorb the information.
1
Problem:
There is a lot of text and can cause cognitive overload, making it hard for users to absorb the information.
2
Solution:
Switched to accordion to reduce the visual clutter and give the user control based on their specific needs and preferences.
2
Solution:
Switched to accordion to reduce the visual clutter and give the user control based on their specific needs and preferences.
2
Solution:
Switched to accordion to reduce the visual clutter and give the user control based on their specific needs and preferences.
Lo-Fidelity: Services Page
Lo-Fidelity: Services Page
Hi-Fidelity: Services Page
Hi-Fidelity: Services Page
Test Users..
Test Users..
Test Users..
📝 Test users to evaluate their effectiveness in locating and accessing specific services and to comprehend their experience.
📝 Test users to evaluate their effectiveness in locating and accessing specific services and to comprehend their experience.
Testing
After completing the hi-fi wireframes, I conducted moderated usability testing with 5 participants aged between 25 and 50. Following the insights gathered, a few adjustments were implemented.
After completing the hi-fi wireframes, I conducted moderated usability testing with 5 participants aged between 25 and 50. Following the insights gathered, a few adjustments were implemented.
Key Findings
01
01
📝 Test users on visual design perceptions. Have them describe overall ease of use and navigation experience.
📝 Test users on visual design perceptions. Have them describe overall ease of use and navigation experience.
02
02
📝 Test users on visual design perceptions. Have them describe overall ease of use and navigation experience.
📝 Test users on visual design perceptions. Have them describe overall ease of use and navigation experience.
03
03
📝 Test users to evaluate their effectiveness in locating and accessing specific services and to comprehend their experience.
📝 Test users to evaluate their effectiveness in locating and accessing specific services and to comprehend their experience.
04
04
📝 Test users on how effectively they were able to find a way to get in touch with the company.
📝 Test users on how effectively they were able to find a way to get in touch with the company.
Key Results
Task Completion Rate for task #2 & 4
Task Completion Rate for task #3❗
Found the overall visual design and navigation experience to be intuitive and engaging.
Iteration
Priority Revisions
Priority Revisions
Priority Revisions
After conducting user interviews and taking what I learned from the feedback grid, I began to make iterations.
After conducting user interviews and taking what I learned from the feedback grid, I began to make iterations.
Services Page: Introduced Visual Cues for Clear Service Text Interaction
Services Page: Introduced Visual Cues for Clear Service Text Interaction
Services Page: Introduced Visual Cues for Clear Service Text Interaction
About Us Page: Addressed white space and improved Services
About Us Page: Addressed white space and improved Services
About Us Page: Addressed white space and improved Services
UncGet In Touch Page: File Attachment Option in Contact Formear FAB icons
UncGet In Touch Page: File Attachment Option in Contact Formear FAB icons
UncGet In Touch Page: File Attachment Option in Contact Formear FAB icons
Branding
Moodboard
Moodboard
Moodboard
During the client meeting, a preference for a modern, minimalist design was expressed. I selected images reflecting brand values—client-centric approach, community, expertise, problem-solving, integrity, and collaboration—to shape a contemporary design aligned with their core principles.
During the client meeting, a preference for a modern, minimalist design was expressed. I selected images reflecting brand values—client-centric approach, community, expertise, problem-solving, integrity, and collaboration—to shape a contemporary design aligned with their core principles.
Logo
Logo
Logo
In market research, I noted a widespread need for improved branding in architectural firms. Shifting to logo design, I aimed to create an authentic Isometric logo "GTZ," blending minimalism with a 3D element to visually represent architectural practice.
In market research, I noted a widespread need for improved branding in architectural firms. Shifting to logo design, I aimed to create an authentic Isometric logo "GTZ," blending minimalism with a 3D element to visually represent architectural practice.
Typography
Typography
Typography
Colors
Colors
Colors
In market research, I noted a widespread need for improved branding in architectural firms. Shifting to logo design, I aimed to create an authentic Isometric logo "GTZ," blending minimalism with a 3D element to visually represent architectural practice.
In market research, I noted a widespread need for improved branding in architectural firms. Shifting to logo design, I aimed to create an authentic Isometric logo "GTZ," blending minimalism with a 3D element to visually represent architectural practice.
Results
Next Steps
Continue adding content
Continue adding content
Continue adding content
Continue adding content by collaborating with the client to gather information on additional services. Ensure the inclusion of essential details for potential clients. Also, keep working with the client to acquire information about other projects and incorporate that content.
Re-Test
Re-Test
Re-Test
With the latest revisions, I intend to conduct another round of testing to ensure the usability of the design.
With the latest revisions, I intend to conduct another round of testing to ensure the usability of the design.
Explore My Other Work
