Smart Heminstallationer
Full UX process and frontend development for a real client, from research to a product ready for launch.
View Live DemoProject Overview
Smart Heminstallationer is a newly started company offering electrical work, IT installations and heat pumps, run by two owners who also operate several retail stores. They had a small team, no dedicated designer or developer, and a website that was costing them customers. I joined as a summer worker in 2025 and was later asked to do my LIA internship there. The assignment was to build a completely new website from scratch. I owned the entire project alone, from the first research session to a near-complete product deployed on Vercel, with continuous feedback from my supervisor and the company marketer. The scope covered everything: user research, information architecture, visual design, accessibility, full frontend development in Next.js, and backend contact form integration. The company had never had a real web presence. I was not updating something that already existed, I was building it from nothing.
The Problem
The company already knew the site was not working. Navigation was hard to follow, contrast made text difficult to read, and load times were slow. The owners themselves felt the overall impression did not reflect the quality of work they actually delivered. For a service business where people are inviting a technician into their home, trust is the deciding factor. A website that does not feel credible does not convert, regardless of how good the underlying service is. Visibility on Google was another shared concern. The site lacked the structure search engines need to index it properly, which meant customers searching for exactly what Smart Heminstallationer offers were landing on competitors instead.
Key Insight
I conducted five in-depth interviews with previous customers, ran a full audit of the existing site, and analyzed how comparable companies approached their web presence. The pattern across all five interviews was consistent: users do not read, they scan. They make a trust decision within seconds and leave if something feels off. This aligns with Jakob's Law: people expect a site to work like the sites they already trust. Anything that deviates from that expectation creates doubt. The research also surfaced that in this industry specifically, visible credibility signals matter more than content. A 4.8 out of 5 rating, a badge from Trygg-Hansa, certified technicians, and real customer reviews from Reco are not decoration. They are the reason someone picks up the phone instead of closing the tab. Those signals had to be present early, above the fold, before asking the user to do anything.
Why It Matters
For a local service business, a website is rarely just a marketing channel. It is how potential customers decide whether to get in touch or move on to a competitor. When trust is the deciding factor, a site that feels unclear or unprofessional costs real work. For a company like this, a site that actually works is not optional. It is the first thing a potential customer sees, and often the last before they move on.
Target Audience
The primary users are homeowners and businesses in Stockholm searching for electrical work, IT installations or heat pumps. They are comparing multiple providers, they arrived via Google, and they will make a decision based on first impression. Many also qualify for RUT or ROT tax deductions, which is a significant conversion factor when communicated clearly.
- Homeowners comparing service providers and deciding quickly
- Users who need to feel trust before making contact
- Mobile users expecting a fast and responsive experience
- Customers eligible for RUT/ROT deductions who need that communicated clearly
Design Approach
Five interviews may seem like a small number. Research by Jakob Nielsen shows that five users uncover approximately 85 percent of usability problems. Beyond that, additional interviews surface the same patterns rather than new insights. Given the project scope and the need to move efficiently, five structured interviews with real previous customers gave a sufficient foundation to identify the core problems and move forward with confidence.
From those insights I moved directly into wireframes to lock in structure before any visual decisions were made. The guiding principle was to make the path from landing to contact as short and frictionless as possible. Trust signals were placed above the fold. The hero communicated the offer immediately with a direct CTA. Service categories were made browsable in multiple ways to match different user behaviors.
Decisions were iterated continuously through A/B testing of key layout and content choices. One example: early versions used a top navigation for services, but A/B testing showed a side navigation significantly reduced the cognitive load when browsing over 100 service types. Another example: the customer reviews section was initially placed just after the hero, but was later moved further down the page after testing two versions made it clear the flow worked better with services and key information leading first. A third test compared 'See services' against 'Call us' as the secondary CTA on the contact page. During prototype testing, the second version consistently led users to reach for the phone rather than continue browsing, suggesting a stronger conversion path once the site goes live. These kinds of changes only emerge from actually testing the flow, not from planning it.
Design System
Before moving into the final UI, I built a design system in Figma covering brand colors, neutral and status palettes, typography scale for both desktop and mobile, and an iconography approach using Heroicons for consistency and accessibility. The decision was made to retain the company's visual identity while refining it. The strong orange was replaced with a warm peach tone as the primary color, used selectively so it carries more visual weight when it appears. Orange was kept in the palette but repositioned as a status color. A blue secondary color was introduced to create contrast and reinforce a sense of trust and reliability, qualities that matter in a service industry where customers are inviting someone into their home. Having a structured system meant every component in the build could reference a single source of truth, making iterations faster and the end result more cohesive.
The Solution
I chose Next.js with React and TypeScript instead of WordPress. Next.js enables server-side rendering, which means the site loads faster and is indexed properly by Google, directly improving how many people find the company organically. TypeScript keeps the codebase structured and catches errors early, which matters when building alone without a code review process. The entire site is component-based, meaning every section, card and button is a reusable building block the team can scale and maintain without needing a developer for every change. Throughout the build I used Claude AI as a coding collaborator, not to replace decisions, but to move faster, work through implementation details, and maintain quality while working solo across a full production codebase.
The visual layer was rebuilt to serve trust rather than aesthetics. Accessibility was addressed throughout: button contrast was fixed, icons were switched from outline to filled after testing showed they were significantly easier to read, and the layout was validated across screen sizes from the start. Credibility was built structurally into the page: a 4.8 out of 5 customer rating, Trygg-Hansa insurance partnership, certified technician badges, real Reco reviews, 24/7 availability and RUT/ROT eligibility are all surfaced early and clearly, before asking the user to do anything.
Feature Walkthrough
Multi-Entry Service Navigation
Over 100 services were organized into three main categories, each accessible in multiple ways: through a side navigation with category lists, as visual cards on the landing page, and through individual service pages. This structure gives users several natural entry points regardless of how they browse, reducing friction and making it easy to find the right service. The old site had no real structure here at all. Building it was one of the most impactful information architecture decisions in the entire project.
Contact Form with Backend Integration
The contact form sends enquiries directly to the company by email, with validation on both frontend and backend to prevent spam and ensure data quality. Fields were kept minimal and purposeful: name, phone, email, service of interest and a message. Phone number and availability are surfaced directly next to the form so users can choose how they want to get in touch.
Responsive, Optimized and Tracked
The site was built mobile-first and performs equally well across all screen sizes. Images are served in WebP format and optimized for fast loading. Google Analytics was integrated from the start so that once the site goes live, every future improvement can be based on real user data rather than assumptions. SEO was addressed at the structural level: semantic HTML, proper meta tags, page titles and a URL structure that Google can actually crawl.
Impact
The site is deployed to Vercel with the core experience complete. Structure is significantly clearer than the old site, load performance is improved, and the credibility signals that were previously absent are now front and center. A user landing on the page today can immediately understand what the company offers, read verified reviews and trust badges, and reach out in two clicks.
The remaining work before full handoff includes a booking flow via third-party API, an admin portal with role-based authentication so the team can manage content without needing a developer, and final UI polish. Google Analytics is already integrated and will start collecting real user data the moment the site goes live.
Reflection & Learnings
What this project taught me most is how directly small design decisions connect to real outcomes for the business. A button label, where a trust signal sits on the page, how many steps it takes to reach contact, these things determine whether someone picks up the phone or closes the tab.
Working alone across the full scope also changed how I think about accountability. There is no handoff to hide behind. If something breaks in the browser, it is yours to solve. That forced a kind of judgment that is hard to develop in a more divided role. The site is not live yet, but building it end to end has already changed how I make decisions.