Where people came from
I reviewed paths into projects from Home, About, Careers, and Contact.
B2B engineering websiteResearch, UX/UI + WordPress/ACF
I designed and built KFI Engineers’ website.
KFI wanted more people to explore its engineering projects. I used interviews, analytics, SEO research, and heatmaps to guide the work, then built every page in WordPress using Elementor and Advanced Custom Fields, including custom widgets I created with HTML, CSS, and JavaScript. I worked with a creative director on the website design.
I designed and built the website. Research, UX/UI, and the complete WordPress build.
What I did
I used interviews, analytics, SEO research, and heatmaps to plan the website. I created wireframes and responsive page designs, then built every page in WordPress using Elementor and Advanced Custom Fields. I created my own custom widgets with HTML, CSS, and JavaScript. I worked with a creative director on the website design.
Visitor questionHas KFI done relevant work, and what could I work on here?
Next stepExplore projects, understand the services, or find current openings
Research to working siteI planned, designed, and built the pages
Built for phonesReading order, project information, and controls
30 to 900+Project-page views across 90-day reporting periods
+64%Sitewide form submissions
708 in the review period
708 in the review period
+48%Visits starting on Careers
11,449 to 16,989
11,449 to 16,989
Project views compare 90-day reporting periods. Careers and form results come from a separate 90-day comparison that included recruitment campaigns. Results and context.
KFI Engineers · redesigned website
KFI Engineers
01 People
KFI’s project work needed a clearer place in the story.
Prospective clients and candidates both wanted to understand the work, with different reasons for exploring it.
The interviews emphasized current examples, the breadth of KFI’s experience, and what a career there could involve. I used those needs to plan connections among projects, services, markets, and next steps.
The question behind the redesign
Can visitors find relevant projects and understand what KFI contributed?
Research
I connected what people said with what the site showed.
Interviews, site paths, search research, and heatmaps gave me different views of the same problem.
What people clicked and reached
Click and scroll maps showed activity and reach on the earlier website.
What the interviews emphasized
Relevant experience, current work, credibility, and a clearer picture of a career.
How people found individual projects
Historic search results showed project pages could be entry points.
People
Different visits needed different next steps.
These are audience needs drawn from the research, not named participants or validated personas.
Prospective clients
Examples that show relevant experience.
Needs to know: Has KFI done work like mine?
Prospective employees
Current work that makes a possible career concrete.
Needs to know: What kinds of projects could I join?
Visitors researching a service
Project context connected to KFI’s capabilities.
Needs to know: How does this work relate to the service I need?
Visitors ready to act
A useful route to contact or current openings.
Needs to know: Where do I go next?
Interviews + audience needs
I asked what people needed to learn from KFI’s work.
The interviews connected project discovery to two needs: judging KFI’s experience and understanding the kind of work a career there could involve.
-
Prospective clients
Evidence of relevant experienceThe interview themes emphasized project history, current work, and the breadth of KFI’s capabilities. Project examples needed enough context to help a visitor evaluate the firm.
-
Prospective employees
A clearer picture of the workCurrent project examples helped explain the variety of engineering work and what a possible career could involve. Careers and openings still needed their own direct route.
How the findings shaped the design
I brought project evidence into the website’s main story.
I used the findings to plan connections among project examples, service information, markets, and contact routes. The same work could help both audiences without forcing them into the same next step.
- Relevant project examples
- Related service information
- A distinct Careers route
- Readable mobile content
Paraphrased interview themes and design implications. Audience labels summarize needs; they are not participant identities or validated personas.
02 Design
I made the project work easier to discover and explore.
Three decisions shaped the redesign: make relevant work visible, connect examples to useful information, and keep the phone experience readable.
1. Bring relevant project work forward.
The old site already had project cards and categories. I worked on how the portfolio connected to services, markets, and the wider company story.
Redesigned siteEnlarge image
Supplied redesign artwork; the homepage presentation matches the live site.
Original website and redesign artifacts. The change focused on discovery, context, and connections, rather than inventing project browsing for the first time.
Representative reconstruction
2. Connect each example to a useful next step.
The earlier site already had project categories and cards. I worked on how projects connected to the services and markets they represented, with clear routes for people who wanted to learn more or make contact.
This explanatory HTML wireframe shows the page hierarchy, using simplified blocks. Choose a label to highlight each part. It is not a screenshot of the delivered website.
View the original KFI wireframe
The original planning artifact is preserved separately from the simplified illustration above.
Enlarge image ↗
Project examples
Next steps
Mobile path
3. Make the work readable on a phone.
I treated mobile as its own reading path. Project information, images, and controls needed a clear sequence on a narrow screen.
- Relevant project information before extra detail
- Readable headings and content order
- A clear route toward services or contact
- A distinct Careers and openings path
01
Is this work relevant?
Find an engineering project connected to the visitor’s interest.
02
What did KFI contribute?
Understand the work and its context.
03
What expertise is behind it?
Explore related services and markets.
04
Could I work here?
Use the examples to understand a possible career.
05
What do I do next?
Continue to contact or current openings.
03 Build
I built every page in WordPress using ACF.
I built every page in WordPress using Elementor and Advanced Custom Fields, and created custom widgets with HTML, CSS, and JavaScript. I carried the research, wireframes, and website design into the working site.
I built the pages and custom widgets.
I created every page in WordPress using Elementor and ACF, with custom widgets built in HTML, CSS, and JavaScript.
HTML + CSS
I built the responsive HTML and CSS.
I translated the wireframes and website design into responsive HTML and CSS for desktop and phones.
The page order followed the research.
I connected project examples with the context visitors needed to evaluate KFI.
WordPress + ACF
I used Advanced Custom Fields.
I built the complete site in WordPress using Elementor and Advanced Custom Fields.
I created every page.
I carried the page designs into the build, with the portfolio and Careers experience central to the work.
JavaScript
I created my own custom widgets.
I wrote HTML, CSS, and JavaScript for custom widgets within the WordPress/Elementor build.
I kept design and development connected.
I carried the page designs into the working website and reviewed the pages against their intended purpose.
Design into the website
I built the pages behind the design.
The supplied market and portfolio artwork shows more of the redesigned page system. I worked with a creative director on the website design, and I personally built every page in WordPress using ACF.
- Custom widgets built with HTML, CSS, and JavaScript
- WordPress, Elementor, and Advanced Custom Fields
- Project, service, and Careers context
More of the website I designed and built.
Original KFI showcase artwork, preserved in full.
Supplied project artwork. Select it to inspect the complete view.
Enlarge image04 Behavior
Heatmaps helped me examine how people explored the work.
I reviewed click activity and scroll reach on the earlier site alongside the interviews, search research, and page paths.
Earlier website · Click heatmap
How visitors explored the Projects page.
The earlier page already had category filters and project cards. The heatmap records click activity; it does not show eye gaze or explain why someone acted.
The original filters and project cards are part of the evidence. I used this alongside interviews, navigation paths, and search research to plan the redesign.
Open full heatmap ↗Content structure
I connected project work to useful next steps.
The planning connected projects with services, markets, and contact while keeping Careers direct. This diagram shows proposed page connections, not a measured funnel.
Home
- Projects
- Services + markets
- Contact
- Careers
- Project examples
- Current openings
For prospective clients
See relevant work, understand the expertise behind it, and find a useful contact route.
For prospective employees
Explore the kind of engineering work they could join, then reach current openings directly.
A planning illustration informed by the interviews and pathway review. The branches do not represent completed conversions.
Research notes and original captures
Earlier Projects snapshot
May 14–August 11, 2024
- Projects-index views
- 896
- Projects-index users
- 660
- Sessions starting on /projects
- 69
The views and landing sessions describe the same period. They are separate from the confirmed 30-to-900+ before-and-after result.
Pathway + search context
- Home → Projects
- 304
- Homepage starting users
- 5,252
- Separate Projects starting node
- 800
- Project URLs in historic search export
- 28
Separate analyses and branches; counts are not additive conversions. Search positions are research evidence, not a claimed ranking gain.
Original research captures
Optional full-size evidence from the earlier website.
05 Results
More people explored KFI’s projects. Recruiting activity also grew.
Project-page views grew from 30 to more than 900 across 90-day reporting periods after the website work. That addressed KFI’s goal of getting more attention on its engineering projects.
30 to 900+
Project-page views
Before and after website work, measured over 90-day reporting periods.
+64%
Sitewide form submissions
708 submitted forms in the separate post-build review.
+48%
Visits starting on Careers
16,989, compared with 11,449 in the preceding period.
1,819 clicks to View Current Openings during the separate review period.
Project views compare 90-day reporting periods. Careers and form results come from a separate 90-day comparison that included recruitment campaigns.
The separate post-build review also recorded growth in Project and People page views and time on page.
More reported activity
- Recruitment-page users
- +37%
- Recruitment-page sessions
- +47%
- Overall site visits
- 32,972 · +4.9%
Engaged visits rose 8.5%. The report gives a Careers action rate of 12.7% to 32.8%, but does not define that key action. Organic sessions declined, so the findings are not a blanket organic-growth claim.
I researched, designed, and personally built the complete WordPress/ACF website so project examples could help people evaluate KFI and choose a useful next step. The later reporting gave us evidence to guide further improvements.