Website design / Development
ProTech Your Skills.
A website that makes a different approach to workplace learning clear, tangible and easy to explore.
- My role
- Website concept, art direction, information architecture, interface design and development.
- Project
- Website project
01 / THE BRIEF
Explain the difference.
ProTech teaches human skills to tech teams, with a neuroinclusive approach informed by behavioural science. The website needed to explain that difference without turning a complex training offer into a wall of theory.
A visitor should be able to understand the approach, explore a relevant workshop and get to know the person behind it. Katie also needed a practical way to publish articles as the business developed.
02 / THE IDEA
Make the method explorable.
Build the experience around the way the training works: clear choices, different ways into the content and room to explore at your own pace. The expressive pink-and-ink identity gives the site its character; the page structure gives that character a purpose.
The opening proposition leads into the learning approach, the NeuroSync methodology, evidence and workshops. A strong thread connects the visual world to a useful next step.
03 / THE BUILD
From curiosity to a useful next step.
I designed and built a complete responsive website, from the large typographic opening to the detailed workshop catalogue. An interactive four-stage NeuroSync diagram breaks the methodology into explorable parts. Workshop filters, detail views and a custom-programme route help visitors find a relevant starting point.
Research, founder photography, press and questions provide context around the offer. A protected publishing workspace supports article drafts, previews and updates, while the contact journey prepares an email draft for the visitor to review and send. Motion, keyboard behaviour and mobile layouts were developed as part of the experience.
04 / THE SCOPE
What went into it.
- 01
The content journey
Structured the proposition, approach, methodology, research, workshops, founder story, press and questions into a connected reading experience.
- 02
Interactive methodology
Translated the supplied NeuroSync method into a four-stage interface with connected diagram states, explanatory copy and navigation. The training methodology belongs to ProTech.
- 03
Workshop discovery
Built a catalogue of eight workshops, filters by team need, detailed workshop views and a route into customised programmes.
- 04
Responsive art direction
Carried the identity into type, colour, ribbon graphics, photography and page transitions, adapting the composition for small screens.
- 05
Editorial publishing
Created the article listing and reading experience with a protected editor for drafts, previews, cover images and publishing through the existing content service.
- 06
Practical interaction details
Worked through keyboard controls, reduced-motion behaviour, image delivery and the email-draft enquiry flow.
IN THE DETAIL
A closer look.
Designed for the smaller screen.
05 / THE RESULT
Where it stands.
A working digital home that connects ProTech’s proposition to its method, people and training offer. Visitors can explore the detail at their own pace, and the editorial workspace gives the business a way to keep publishing.
Website design and development. This showcase focuses on the digital experience.
Visit ProTech