01 — Context
EDUC Solutions presents itself as a digital transformation agency in the United States, with eight disciplines under one team, including websites and portals, custom software, corporate LMS platforms, content, marketing and AI. The site is bilingual, in English and Spanish.
The brief was to condense that broad, technical offer into a narrative that’s easy to follow, one that conveys seniority to enterprise buyers without reading like a catalogue and ends in qualified enquiries. I designed the UX/UI and built the site as a single-page React app.
02 — My role
I defined the information architecture and the order of the home page, designed the bilingual header, the capabilities grid, the home page close and the qualification form, and built them. I set up GA4 and reviewed heatmaps in Clarity. The client supplied the copy and photography.
03 — Diagnosis
Eight disciplines compete for the same first impression
It was a new site, with no earlier version to fix, so the risk lay in the brief itself: an offer so broad it would read as a cold catalogue or an implausible promise. My read of the cause: eight equally weighted disciplines force visitors to sort themselves before they understand what the company does, and an enterprise buyer probably arrives with a specific problem, not the name of a service.
It costs the buyer, who is comparing vendors and leaves if they can’t quickly see who to talk to or what happens next. And it costs EDUC Solutions, which needs the project type, budget and timeline before giving a session of its senior team.
04 — Decisions
A. A promise to leaders and a single booking action
- Problem
- A hero with several equally weighted actions splits the attention of someone who doesn’t yet know whether the agency fits.
- Decision
- The headline and paragraph speak to leaders who need clarity and execution under one team, and the hero carries one primary button, "Book a strategy session", which opens the contact page; "View case studies" is secondary, with less visual weight.
- Why this one
- I weighed opening with all eight disciplines on the first screen; I chose a single promise because, with eight services in view, visitors would have to pick one before understanding the offer. The cost: the home page doesn’t say which services exist until the first scroll.
- What I expected
- People who already had a project finding the booking without looking for it, and the rest moving on to the grid or the cases.
B. Four items, language in plain sight and a single coloured button
- Problem
- The audience is bilingual, and a language switch hidden in the footer makes people start reading in the wrong language.
- Decision
- A fixed header with four items (Services, Portfolio, Resources and Contact), the EN/ES switch with its "Language" label and "Start project" as the only turquoise button. On mobile, the panel repeats the items, the language switch and the button, and adds "View cases". After the first scroll, "Start project" floats at the bottom right.
- Why this one
- I weighed relying only on the browser language, which the site also detects and remembers; I chose to add a visible switch because, for a bilingual audience, the browser language isn’t always the one the visitor prefers to read. The cost: on mobile the header takes two rows, 131 px of the screen’s 844, and the floating button covers part of the text while scrolling.
- What I expected
- Every visitor reading the site in their language from the first screen, with the main action one tap away anywhere on the page.
C. Eight disciplines in a ranked grid; on mobile, a rail
- Problem
- Eight services at the same size read like a price list, and on mobile eight stacked cards make the home page long.
- Decision
- A grid of eight cards where two take more space, Digital Experiences and Corporate Platforms, and the rest cluster around them; each card has a tag, title and one sentence, and opens its service page. On mobile, the same grid becomes a horizontal rail with one card per view and arrows.
- Why this one
- I weighed eight equal cards and, on mobile, a long list; I chose hierarchy and a rail because the two core lines had to read first and the mobile home page shouldn’t grow longer. The cost: on desktop, attention is steered to two disciplines; on mobile, seven cards sit behind a swipe, with no position indicator.
- What I expected
- Visitors spotting the two core lines at a glance and opening any discipline without hunting for it in the menu.
D. Three exits of different commitment at the end of the home page
- Problem
- By the end of the home page not everyone is ready for a meeting, and a single booking button loses those who just want to write.
- Decision
- A close with three staged buttons: "Book a 45-Minute Consultation" as primary, "Complete Qualification Form" as secondary and "Email Our Corporate Team", which opens email, as third.
- Why this one
- I weighed repeating the hero button; I chose to stage by commitment because the end of the home page holds both people who want a meeting and people who just want to write. The cost: three buttons compete for attention right where the visitor decides.
- What I expected
- Each visitor picking the exit that matched their moment, instead of leaving without getting in touch.
E. Qualify step by step before asking for details
- Problem
- To prepare a session, the team needs the project type, budget and timeline, and a long single-screen form slows the buyer down.
- Decision
- A four-step form with one question per step: the project domain, with six options; the budget range; the timeline; and finally name and email as required, with company and message optional. Alongside, the company email and phone.
- Why this one
- I weighed a single-screen form with every field; I chose steps because each one is a one-tap choice and personal details come last, once there’s commitment. The cost: more clicks before submitting.
- What I expected
- Enquiries arriving qualified by project type, budget and timeline, without a preliminary discovery call.
05 — System
The result was a home page with one primary hero action (Fig. 0), a bilingual header with a single button that on mobile repeats in the panel and in a floating pill (Fig. 1), a grid of eight capabilities that becomes a rail on mobile (Fig. 2), a close with three exits (Fig. 3) and a four-step qualification form (Fig. 4). Each card opens its service page, and I also designed and built the services, portfolio and resources pages.
The scope ended at delivery and instrumentation, not impact reporting, so this case reports no figures.
06 — What I’d test now
Today the booking buttons on the home and service pages lead to the contact page, which says there’s no public calendar (Fig. 0 versus Fig. 4). I’d test aligning the promise with the destination: a button that says what happens and opens step 1 of the form.
- Hypothesis
- If the buttons that now say "Book" promise what actually happens ("Tell us about your project") and open step 1 of the form directly, more sessions that click finish the form, without fewer clicks on those buttons.
- Primary metric
- Qualification forms submitted per session that clicks a booking button, measured in GA4.
- Guardrail
- Clicks on the booking buttons per session landing on the home page: if they drop, the new promise pulls less than "Book".
- Control
- The current "Book" buttons, which lead to the contact page. 50/50 split until the sample size calculated from the baseline; with low B2B traffic, probably several weeks.