GépészPeti
From concept to click: a 100% performance site
Introduction
My client, GépészPeti, offers reliable handyman services across a wide range of home needs. To support this, I designed and developed a fully responsive, user-friendly website to elevate the brand’s accessibility and simplify booking. With clear service categories, instant requests, and trust-focused elements like stories, the site builds confidence while enhancing ease of use.
My role: UI/UX design, UX writing, Web Dev.
The challenge
GépészPeti, a local handyman entrepreneur, struggled with slow loading times and zero conversions on his outdated site. The website also lacked a strong visual identity and engaging copy. My goal was to revamp the site with a fresh UI/UX, introduce a new logo, and craft compelling copy to better showcase GépészPeti’s expertise and attract more clients.
Insights
Competitive analysis
The good
The sites offer various handyman services.
The bad
The navigation structure is confusing, the narrative is difficult to follow, and users feel overwhelmed by the excessive amount of information.
Persona and new ideas
I created a persona to empathize with her while considering the target audience and client needs. Based on this persona, I decided to:
Implement a strategic “Get free quote” CTA in the header for easy access.
Create an intuitive service navigation by organizing handyman services into clear categories with an icon tab bar.
Showcase authentic client photos on the homepage and “References” section as impactful testimonials.
Launch a blog to share relevant insights and behind-the-scenes content that builds trust.
Enhance the overall UX by rewriting the page in a clean, professional, and accessible style.
User flow
To improve Kata’s quote request process, I created a flow diagram mapping key user tasks. I introduced strategies to reassure users of the service quality and variety while preventing cognitive overload. This involved adding an icon tab bar for services and creating sections designed to build trust.
Design
Wireframe
5 new sections were added
After researching how cognitive overload impacts middle-aged users, I designed a wireframe. It captures attention quickly with the CTA and offers one-click access to the contact form, providing just enough context without overwhelming users. A sticky header and icon tab bar ensure clear and easy navigation.
The research articles are from NNG, Smashing Magazine, and Ergomania.
Logo, colors, and typography
I gathered inspiration from handyman visuals, focusing on their bold contrasts and vibrant colors. I chose a palette that aligns with this style, emphasizing the CTA while ensuring readability. I designed a minimal yet striking logo to showcase the services and selected the hybrid geometric-humanistic Onest font, ideal for reading long texts on any device.
Testing
Prototype and accessibility
After developing the new branding, I concentrated on the high-fidelity design. I adhered to accessibility contrast guidelines and created an interactive prototype to effectively present my concepts. I curated stock images relevant to the services and requested new photos to introduce the handyman, fostering user trust and engagement.
User testing and iteration
I conducted a comprehensive online testing process:
- CTA Placement Analysis: A/B testing indicated that a header-based “Free Quote” CTA performed 35% better than footer placement.
- Optimized Navigation Flow: Heatmaps and click tracking revealed friction points, leading me to simplify navigation paths for smoother browsing.
- Streamlined Service Categories: Testing showed that users struggled with broad labels, so I refined category names for clarity and accessibility.
- Responsive Design Testing: Testing across devices ensured a consistent and intuitive experience on mobile, tablet, and desktop.
- Feedback-Driven Iterations: Surveys and user interviews highlighted pain points, prompting iterative improvements that boosted usability scores.
- Accessibility Checks: Testing with accessibility tools ensured compliance with WCAG standards, enhancing inclusivity for all users.
Building the site
To address the site’s performance issues, I migrated the CMS to a more efficient hosting platform and optimized the database. Following my Figma design concept, I developed a streamlined site, meticulously implementing all elements and spacing to ensure optimal user experience and faster loading times.
Behind the scenes
Achieving pixel-perfect implementation of the design plans proved challenging. I rigorously monitored the site’s performance, continuously refining my custom CSS and JavaScript code to optimize loading times while maintaining visual fidelity to the original design concept.
Impact
- Client and marketing team praised intuitive navigation and design, enhancing branding.
- Responsive design and fast load times improved user engagement across all devices.
- Clear call-to-actions and the streamlined form substantially boosted lead generation efforts.
Learnings
Creating this site was both rewarding and challenging. Here are my main insights:
- Concept to click: Transforming Figma designs into a functional CMS site highlighted the importance of creating designs with implementation in mind.
- Custom code for performance: Writing custom code allowed for fine-tuned control, resulting in a 100% performance score and superior user experience.
- New interests: I discovered a strong interest in enhancing website performance.
- Next steps: I plan to further explore performance optimization techniques and stay updated on emerging web technologies to continue creating high-quality, efficient websites.