Ilies AllaliPutting a face on electrical trades
Thirty-seven pages held up by six templates, and a two-minute quiz for an audience that leaves a site as soon as it doesn’t get what it’s for.
The SERCE wants to draw young people to electrical trades that are hiring and that few people know. The site presents the trades, the training and the companies, for middle and high school students and adults changing careers, and I took the whole chain, from user journeys to the site built in Framer.
- visits in the first month, campaign included
- 18,590
- of visits on mobile
- 82%
- visitors on the orientation quiz
- 3,010
- pages live on September 15
- 37
Young people first
Before anything was drawn, NéNo brought together five young people aged 15 to 22 in a workshop, exactly the site’s audience. Their verdict fit in one sentence, if they don’t understand what a site is for within seconds, they leave. They rejected dense pages and technical vocabulary and named Netflix or TikTok as examples of clear interfaces, which pushed the institutional tone out of the project.
Mobile first
A middle schooler exploring doesn’t need what an adult changing careers needs, who wants to know how long the training will take. I set the personas and journeys before the site map, then designed mobile first, and the first month proved it right, 82% of visits happen on a phone. Navigation rests on two entry points, trades and training, which forces every page to pick one.
A palette that labels no one
The base is light and warm, with a handwritten highlight on the words that matter, far from the sector’s technical blue. The brand has twenty-nine colours, and I didn’t give any of them to a trade family, so a young person doesn’t file themselves into a box before exploring. The pale tints set a rhythm as you scroll, and only pale yellow carries a meaning, the training levels.
37 pages, six templates
Six templates cover most of the site, the homepage, the trades hub, a family, a trade page, the training hub and a training level. It’s quick to extend, except a flaw in a template repeats everywhere, so most of the validation happened on those six pages before duplicating.
A six-question quiz
The quiz points to four fields in six questions, about two minutes, and more than 3,000 visitors opened it in the first month. A clear winner gives the result, a tie gives a hybrid profile, and the 2-2-2 case is settled by the sixth question, a rule agreed with the client before acceptance testing.
Search, compared for real
Rather than debating search, I built four working prototypes on the same index, a command palette, a panel under the magnifier, a bar that unfolds a card grid and a filterable results page. It took an extra day, and the discussion was about what we saw on screen rather than impressions.
Testing the motion in HTML before Framer
I prototype in HTML before building a page in Framer, to judge the real interactions, a thread running through the page, an eraser effect on hover, colours that follow the scroll. It means building the same page twice, but no document lets you judge a motion.