Creating a digital presence for a product growth agency on web and mobile
Creating a digital presence for a product growth agency on web and mobile
Creating a digital presence for a product growth agency on web and mobile
Creating a digital presence for a product growth agency on web and mobile
GROHAUS is a product growth agency specializing in messaging strategy, campaign execution, analytics, and insights. Their founder was looking to establish a compelling online presence to showcase their expertise and unique value proposition.
GROHAUS is a product growth agency specializing in messaging strategy, campaign execution, analytics, and insights. Their founder was looking to establish a compelling online presence to showcase their expertise and unique value proposition.
Client
Client
GROHAUS
GROHAUS
Industry
Industry
Marketing & Advertising
Marketing & Advertising
Project Type
Project Type
Web Design
Web Design
Web Design
Role
Role
Sole UX Designer
Sole UX Designer
Sole UX Designer
Timeframe
Timeframe
Summer 2023
Summer 2023
Summer 2023
Tools
Tools
Figma, Miro, Zoom
Figma, Miro, Zoom
Figma, Miro, Zoom
OVERVIEW
OVERVIEW
OVERVIEW
Problem
Problem
Problem
GROHAUS lacked a compelling website and brand identity, limiting their ability to enhance brand awareness, build credibility, and generate leads.
GROHAUS lacked a compelling website and brand identity, limiting their ability to enhance brand awareness, build credibility, and generate leads.
GROHAUS lacked a compelling website and brand identity, limiting their ability to enhance brand awareness, build credibility, and generate leads.
Solution
Solution
Solution
I designed a responsive website to spotlight GROHAUS' unique brand identity, expertise, and diverse services. I worked closely with their founder, David, to integrate his feedback and preferences, particular in renaming the agency. The outcome was a design that positions GROHAUS as leading product growth experts — focusing on building trust and attracting new clients.
I designed a responsive website to spotlight GROHAUS' unique brand identity, expertise, and diverse services. I worked closely with their founder, David, to integrate his feedback and preferences, particular in renaming the agency. The outcome was a design that positions GROHAUS as leading product growth experts — focusing on building trust and attracting new clients.
I designed a responsive website to spotlight GROHAUS' unique brand identity, expertise, and diverse services. I worked closely with their founder, David, to integrate his feedback and preferences, particular in renaming the agency. The outcome was a design that positions GROHAUS as leading product growth experts — focusing on building trust and attracting new clients.
Challenge
Challenge
Challenge
Design a visually appealing and responsive website that showcases GROHAUS’ expertise and builds credibility among potential clients.
Design a visually appealing and responsive website that showcases GROHAUS’ expertise and builds credibility among potential clients.
Design a visually appealing and responsive website that showcases GROHAUS’ expertise and builds credibility among potential clients.
Goals
Goals
Goals
Showcase technical expertise and credibility
Promote services and solutions in a compelling way
Increase lead generation
Improve brand visibility
Gain a competitive edge
Showcase technical expertise and credibility
Promote services and solutions in a compelling way
Increase lead generation
Improve brand visibility
Gain a competitive edge
Showcase technical expertise and credibility
Promote services and solutions in a compelling way
Increase lead generation
Improve brand visibility
Gain a competitive edge
Constraints
Constraints
Constraints
Limited technical resources: GROHAUS lacked a developer pre-implementation, leading to a design influenced by no-code solutions for simplicity
Expanded scope: an unexpected project expansion to rename the agency required redefining goals and expectations
Client logo permission constraints: our inability to feature client logos led to exploring alternative ways to showcase their track record
Limited technical resources: GROHAUS lacked a developer pre-implementation, leading to a design influenced by no-code solutions for simplicity
Expanded scope: an unexpected project expansion to rename the agency required redefining goals and expectations
Client logo permission constraints: our inability to feature client logos led to exploring alternative ways to showcase their track record
Limited technical resources: GROHAUS lacked a developer pre-implementation, leading to a design influenced by no-code solutions for simplicity
Expanded scope: an unexpected project expansion to rename the agency required redefining goals and expectations
Client logo permission constraints: our inability to feature client logos led to exploring alternative ways to showcase their track record
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS
Research & Analysis >
Since this project began with a clean slate, I initiated conversations with current or past clients of GROHAUS to gain a comprehensive understanding of the problem space. I interviewed five executives across various industries (consumer apps, e-commerce, and SaaS), who shared criteria they consider when selecting agencies to collaborate with.
Since this project began with a clean slate, I initiated conversations with current or past clients of GROHAUS to gain a comprehensive understanding of the problem space. I interviewed five executives across various industries (consumer apps, e-commerce, and SaaS), who shared criteria they consider when selecting agencies to collaborate with.
Since this project began with a clean slate, I initiated conversations with current or past clients of GROHAUS to gain a comprehensive understanding of the problem space. I interviewed five executives across various industries (consumer apps, e-commerce, and SaaS), who shared criteria they consider when selecting agencies to collaborate with.
Transparent track record is a priority for potential clients.
Transparent track record is a priority for potential clients.
Transparent track record is a priority for potential clients.
Clients prioritize agencies with a transparent history of previous clients and the relevant industries served.
Clients prioritize agencies with a transparent history of previous clients and the relevant industries served.
Clients prioritize agencies with a transparent history of previous clients and the relevant industries served.
Specific CRM expertise is emphasized.
Specific CRM expertise is emphasized.
Specific CRM expertise is emphasized.
Clients highly value agencies with expertise in specific CRM tools, considering it a critical factor in their decision-making process.
Clients highly value agencies with expertise in specific CRM tools, considering it a critical factor in their decision-making process.
Clients highly value agencies with expertise in specific CRM tools, considering it a critical factor in their decision-making process.
Building trust is a key factor in agency selection.
Building trust is a key factor in agency selection.
Building trust is a key factor in agency selection.
Factors like authenticity, direct referrals, and low-pressure engagement methods are crucial for clients in establishing trust during the agency selection process
Factors like authenticity, direct referrals, and low-pressure engagement methods are crucial for clients in establishing trust during the agency selection process
Factors like authenticity, direct referrals, and low-pressure engagement methods are crucial for clients in establishing trust during the agency selection process
"Whenever I see a website where they list basically every single marketing capacity under the sun, I don't trust those companies because no one can do everything."
"Whenever I see a website where they list basically every single marketing capacity under the sun, I don't trust those companies because no one can do everything."
"Whenever I see a website where they list basically every single marketing capacity under the sun, I don't trust those companies because no one can do everything."
— General Manager, E-commerce company
— General Manager, E-commerce company
— General Manager, E-commerce company
I examined several of GROHAUS' competitors to understand their user experience, service offerings, and differentiation strategies.
I examined several of GROHAUS' competitors to understand their user experience, service offerings, and differentiation strategies.
I examined several of GROHAUS' competitors to understand their user experience, service offerings, and differentiation strategies.
I examined several of GROHAUS' competitors to understand their user experience, service offerings, and differentiation strategies.
Intense market competition: the product growth agency landscape is highly competitive, emphasizing the need for GROHAUS to effectively differentiate itself
Navigating the tech economic downturn: since the tech recession of 2022, organizations have leaned towards in-house marketing teams, presenting challenges for external agencies like GROHAUS
Showcasing success: competing agencies effectively highlight their clients and showcase detailed case studies, offering tangible examples of their expertise
Diverse differentiation strategies: agencies use various tactics, including content marketing, development of CRM resources, professional networking, and a commitment to clean and intuitive website design, to set themselves apart
*For a full summary of my research findings, please refer to this presentation.
Intense market competition: the product growth agency landscape is highly competitive, emphasizing the need for GROHAUS to effectively differentiate itself
Navigating the tech economic downturn: since the tech recession of 2022, organizations have leaned towards in-house marketing teams, presenting challenges for external agencies like GROHAUS
Showcasing success: competing agencies effectively highlight their clients and showcase detailed case studies, offering tangible examples of their expertise
Diverse differentiation strategies: agencies use various tactics, including content marketing, development of CRM resources, professional networking, and a commitment to clean and intuitive website design, to set themselves apart
*For a full summary of my research findings, please refer to this presentation.
Agencies like Scalero and Phiture prominently feature client history and case studies
Agencies like Scalero and Phiture prominently feature client history and case studies
Agencies like Scalero and Phiture prominently feature client history and case studies
Ideation & Prioritization >
Using creative constraints to conceptualize solutions
Using creative constraints to conceptualize solutions
Using creative constraints to conceptualize solutions
After gathering the above insights, I used a constraints brainstorming technique to rapidly ideate solutions within predetermined themes, each constrained to a 1-minute time limit.
This process yielded approximately 20 ideas. Using a prioritization matrix, I evaluated and ranked each one based on its potential impact and implementation effort. My goal was to select solutions with the optimal impact-to-effort ratio.
After gathering the above insights, I used a constraints brainstorming technique to rapidly ideate solutions within predetermined themes, each constrained to a 1-minute time limit.
This process yielded approximately 20 ideas. Using a prioritization matrix, I evaluated and ranked each one based on its potential impact and implementation effort. My goal was to select solutions with the optimal impact-to-effort ratio.
Output of creative constraints brainstorm, with selected ideas marked with ❤️
Output of creative constraints brainstorm, with selected ideas marked with ❤️
Output of creative constraints brainstorm, with selected ideas marked with ❤️
Information Architecture >
Defining user interactions for navigating the website
Defining user interactions for navigating the website
Defining user interactions for navigating the website
Exploring services and client history
A potential client explores the agency’s services and client history to assess qualifications and fit. Navigating to the Case Studies page will direct them to real-world applications.
Exploring services and client history
A potential client explores the agency’s services and client history to assess qualifications and fit. Navigating to the Case Studies page will direct them to real-world applications.
Users can explore the agency's services and client history
Users can explore the agency's services and client history
Users can explore the agency's services and client history
Assessing CRM expertise
A potential client evaluate's the agency's CRM expertise to determine if the agency can support their needs. They can either preview tools on the Home page or find a comprehensive list in the Services page.
Assessing CRM expertise
A potential client evaluate's the agency's CRM expertise to determine if the agency can support their needs. They can either preview tools on the Home page or find a comprehensive list in the Services page.
Users can explore identify the agency's tools of expertise
Users can explore identify the agency's tools of expertise
Users can explore identify the agency's tools of expertise
Identity Crafting >
Collaborative brand development for GROHAUS
Collaborative brand development for GROHAUS
Collaborative brand development for GROHAUS
I partnered with David to develop a new brand identity for GROHAUS. This involved creating a new company name, logo, colors, typography, and more. We aimed for a brand to convey trustworthiness, aspiration, and a touch of fun — while maintaining a tech-savvy image.
My process involved concept generation, style guide development, exploration of new names (leading to the selection of "GROHAUS"), and logo development. After multiple iterations, the result was a cohesive visual identity that authentically represents GROHAUS as growth marketing experts.
I partnered with David to develop a new brand identity for GROHAUS. This involved creating a new company name, logo, colors, typography, and more. We aimed for a brand to convey trustworthiness, aspiration, and a touch of fun — while maintaining a tech-savvy image.
My process involved concept generation, style guide development, exploration of new names (leading to the selection of "GROHAUS"), and logo development. After multiple iterations, the result was a cohesive visual identity that authentically represents GROHAUS as growth marketing experts.
GROHAUS brand style guide
GROHAUS brand style guide
GROHAUS brand style guide
Wireframing & Prototyping >
Developing the digital blueprint and interaction design
Developing the digital blueprint and interaction design
Developing the digital blueprint and interaction design
With the agency's target users in mind, I sketched wireframes on paper, prioritizing a positive impression on the Home page. I decided on a navigation structure to guide users through the most relevant content for clients to select an agency.
The sketches were digitized using Figma, expanding to include various pages and mobile versions. Adopting a grid format, I created components and incorporated agency-specific copy for optimized prototyping.
With the agency's target users in mind, I sketched wireframes on paper, prioritizing a positive impression on the Home page. I decided on a navigation structure to guide users through the most relevant content for clients to select an agency.
The sketches were digitized using Figma, expanding to include various pages and mobile versions. Adopting a grid format, I created components and incorporated agency-specific copy for optimized prototyping.
Wireframing for desktop and mobile in low-fidelity
Wireframing for desktop and mobile in low-fidelity
Wireframing for desktop and mobile in low-fidelity
I went through multiple iterations before arriving at high-fidelity versions. With GROHAUS' new branding in place, I developed a cohesive identity across desktop and mobile. To streamline the user experience and prioritize content, I leveraged icons to represent various categories, and included images to complement the content. This allowed me to convey information more quickly and optimize the design for mobile responsiveness.
Notable updates:
While our initial plan was to feature client logos on the Home page, I removed them due to permission constraints
I combined the Services and Expertise pages in order to streamline navigation
Since the agency had not yet prepared case study content, I included placeholders for future additions
I added team profile cards for each teammate, introducing a more human touch to GROHAUS
I went through multiple iterations before arriving at high-fidelity versions. With GROHAUS' new branding in place, I developed a cohesive identity across desktop and mobile. To streamline the user experience and prioritize content, I leveraged icons to represent various categories, and included images to complement the content. This allowed me to convey information more quickly and optimize the design for mobile responsiveness.
Notable updates:
While our initial plan was to feature client logos on the Home page, I removed them due to permission constraints
I combined the Services and Expertise pages in order to streamline navigation
Since the agency had not yet prepared case study content, I included placeholders for future additions
I added team profile cards for each teammate, introducing a more human touch to GROHAUS
I went through multiple iterations before arriving at high-fidelity versions. With GROHAUS' new branding in place, I developed a cohesive identity across desktop and mobile. To streamline the user experience and prioritize content, I leveraged icons to represent various categories, and included images to complement the content. This allowed me to convey information more quickly and optimize the design for mobile responsiveness.
Notable updates:
While our initial plan was to feature client logos on the Home page, I removed them due to permission constraints
I combined the Services and Expertise pages in order to streamline navigation
Since the agency had not yet prepared case study content, I included placeholders for future additions
I added team profile cards for each teammate, introducing a more human touch to GROHAUS
High-fidelity wireframes for desktop
High-fidelity wireframes for desktop
High-fidelity wireframes for desktop
I developed mobile-responsive screens to optimize the user experience on smaller devices. Stacking content ensured that the website's functionality and visual appeal remain cohesive, regardless of screen size.
I developed mobile-responsive screens to optimize the user experience on smaller devices. Stacking content ensured that the website's functionality and visual appeal remain cohesive, regardless of screen size.
I developed mobile-responsive screens to optimize the user experience on smaller devices. Stacking content ensured that the website's functionality and visual appeal remain cohesive, regardless of screen size.
I developed mobile-responsive screens to optimize the user experience on smaller devices. Stacking content ensured that the website's functionality and visual appeal remain cohesive, regardless of screen size.
High-fidelity wireframes for mobile
High-fidelity wireframes for mobile
High-fidelity wireframes for mobile
Usability Testing >
Refining the user experience through testing and system usability scale (SUS) evaluation
Refining the user experience through testing and system usability scale (SUS) evaluation
Refining the user experience through testing and system usability scale (SUS) evaluation
I created a prototype for usability testing to evaluate the overall user experience, content, and site architecture. I also sent participants a post-testing questionnaire to measure their general satisfaction with the website.
I created a prototype for usability testing to evaluate the overall user experience, content, and site architecture. I also sent participants a post-testing questionnaire to measure their general satisfaction with the website.
User feedback highlights
User feedback highlights
User feedback highlights
100% of users were able to navigate the website to locate the agency's services
100% of users were able to navigate the website to locate the agency's services
Most users had a positive reaction to the branding and visual identity, giving the website a rating of 4.6 out of 5.0
Most users had a positive reaction to the branding and visual identity, giving the website a rating of 4.6 out of 5.0
Users considered client history, case studies, testimonials, and tools most relevant for selecting an agency
Users considered client history, case studies, testimonials, and tools most relevant for selecting an agency
Areas of improvement
Areas of improvement
Areas of improvement
Areas of improvement
Most users thought the website copy was too lengthy and generic, with only 40% stating that they trusted the information
Most users thought the website copy was too lengthy and generic, with only 40% stating that they trusted the information
50% of users had difficulty locating the agency's tools of expertise
50% of users had difficulty locating the agency's tools of expertise
Several users were confused when confronted with two options to contact the agency
Several users were confused when confronted with two options to contact the agency
In light of these results, I ran a prioritization exercise to guide post-testing improvements. Each issue was prioritized based on its frequency and impact on the user experience.
In light of these results, I ran a prioritization exercise to guide post-testing improvements. Each issue was prioritized based on its frequency and impact on the user experience.
In light of these results, I ran a prioritization exercise to guide post-testing improvements. Each issue was prioritized based on its frequency and impact on the user experience.
Identifying and addressing issues based on their occurrence and impact
Identifying and addressing issues based on their occurrence and impact
Identifying and addressing issues based on their occurrence and impact
Key revisions implemented:
Key revisions implemented:
Key revisions implemented:
Enhanced discoverability
Enhanced discoverability
Enhanced discoverability
Refined the Home and About Us pages for seamless scrolling
To address user confusion, I elevated the placement of tools on Home page and in a dedicated section
Refined the Home and About Us pages for seamless scrolling
To address user confusion, I elevated the placement of tools on Home page and in a dedicated section
Refined the Home and About Us pages for seamless scrolling
To address user confusion, I elevated the placement of tools on Home page and in a dedicated section
Original Home page
Original Home page
Original Home page
Updated Home page
Updated Home page
Updated Home page
Streamlined copy & imagery
Streamlined copy & imagery
Streamlined copy & imagery
Revised confusing/misleading copy
Standardized copy for clarity and improved SEO
Adjusted imagery for a cohesive brand identity
Revised confusing/misleading copy
Standardized copy for clarity and improved SEO
Adjusted imagery for a cohesive brand identity
Revised confusing/misleading copy
Standardized copy for clarity and improved SEO
Adjusted imagery for a cohesive brand identity
Original list of agency services
Original list of agency services
Original list of agency services
Updated list of agency services
Updated list of agency services
Updated list of agency services
Updated list of agency services
Improved contact experience
Improved contact experience
Improved contact experience
Clarified form submission process
Enhanced post-submission confirmation flow
Removed direct call scheduling for a streamlined contact experience
Clarified form submission process
Enhanced post-submission confirmation flow
Removed direct call scheduling for a streamlined contact experience
Clarified form submission process
Enhanced post-submission confirmation flow
Removed direct call scheduling for a streamlined contact experience
Original form: option to schedule a direct call upon submission
Original form: option to schedule a direct call upon submission
Original form: option to schedule a direct call upon submission
Updated form: simplified to one contact method
Updated form: simplified to one contact method
Updated form: simplified to one contact method
Updated form: simplified to one contact method
WRAP-UP & LEARNINGS
WRAP-UP & LEARNINGS
Design handoff & implementation
Design handoff & implementation
Design handoff & implementation
After implementing the improvements, I recreated this prototype to showcase the final design. I then led the transition of the design into Webflow, a no-code website builder. Collaborating with a developer, copywriter, and David, we successfully integrated the design across all aspects of the website. The website is now live, showcasing GROHAUS' new brand identity and CRM expertise.
After implementing the improvements, I recreated this prototype to showcase the final design. I then led the transition of the design into Webflow, a no-code website builder. Collaborating with a developer, copywriter, and David, we successfully integrated the design across all aspects of the website. The website is now live, showcasing GROHAUS' new brand identity and CRM expertise.
Personal learnings
Personal learnings
Personal learnings
Building a strong working relationship with GROHAUS
Collaborating closely with GROHAUS' founder was an essential part of my process, particularly when quick input was needed for refining the design.Learning to be flexible
One unexpected challenge I encountered was the task of renaming the agency. I adjusted the design process to prioritize renaming before other branding aspects. The outcome was a name resonating with the agency's vision.Navigating uncertainty
With an evolving set of requirements, I found it valuable to dive into research and adopt a user-centered approach. The insights I gained throughout interviews, testing, surveys, and analyses, helped me gain more confidence each of my design decisions.
Building a strong working relationship with GROHAUS
Collaborating closely with GROHAUS' founder was an essential part of my process, particularly when quick input was needed for refining the design.Learning to be flexible
One unexpected challenge I encountered was the task of renaming the agency. I adjusted the design process to prioritize renaming before other branding aspects. The outcome was a name resonating with the agency's vision.Navigating uncertainty
With an evolving set of requirements, I found it valuable to dive into research and adopt a user-centered approach. The insights I gained throughout interviews, testing, surveys, and analyses, helped me gain more confidence each of my design decisions.
CLIENT TESTIMONIAL
CLIENT TESTIMONIAL
"Kate has been an integral part of the Grohaus story. She not only designed a beautiful and practical website - she applied her UX skills to do super valuable industry research, interview people in my target market, and mockup user journeys that supported core actions. She led a company rebrand that would make my business more attractive and scalable. If you're looking for a UX designer that will go above and beyond to ensure the success of your project, give Kate a shot. It'll be worth it."
"Kate has been an integral part of the Grohaus story. She not only designed a beautiful and practical website - she applied her UX skills to do super valuable industry research, interview people in my target market, and mockup user journeys that supported core actions. She led a company rebrand that would make my business more attractive and scalable. If you're looking for a UX designer that will go above and beyond to ensure the success of your project, give Kate a shot. It'll be worth it."
David Brown
Founder & CEO, GROHAUS
