CASE STUDY · UX/UI + WORDPRESS
Redesigning and rebuilding Technobothnia’s website into a clearer, modern and maintainable digital experience for students, companies and research partners.
ROLE
UX/UI Designer & WordPress Developer
PLATFORM
WordPress
TOOLS
Figma, WordPress, WPBakery
TYPE
Website Redesign & Development
FINAL WEBSITE SCREENSHOT — ADD IMAGE
01 — THE CHALLENGE
A clearer route through complex information.
The existing website contained extensive laboratory and service information, but the structure did not make it easy for visitors to identify the information most relevant to them. The redesign focused on clearer pathways, more legible content groups and a system that could be maintained over time.
OLD WEBSITE — ADD SCREENSHOT
OLD WEBSITE — ADD SCREENSHOT
02 — UNDERSTANDING THE USERS
Information architecture designed around real audiences.
Companies
A direct path to services, laboratory capabilities and collaboration opportunities.
Students
Clearer entry points for discovering laboratories, projects and available opportunities.
Research & Project Partners
Structured access to project work, expertise and the people behind each collaboration.
03 — INFORMATION ARCHITECTURE
Simplifying the paths through the site.
04 — DESIGN PROCESS
From research to a refined, production-ready design.
EARLY CONCEPTS — ADD IMAGE
FINAL DESIGNS — ADD IMAGE
05 — DESIGN SYSTEM
A consistent toolkit for every page and audience.
Colors
Purposeful color use for clarity, hierarchy and accessible states.
Typography
A scalable text hierarchy that keeps laboratory content easy to scan.
Reusable UI
Buttons, cards, navigation and recurring components designed for consistency.
06 — FROM DESIGN TO DEVELOPMENT
A considered handoff into an editable WordPress site.
The visual system was translated into WordPress with WPBakery, creating structured, reusable page sections that support ongoing content updates without compromising the design.
DESIGN — ADD SCREENSHOT
WORDPRESS — ADD SCREENSHOT
07 — MULTILINGUAL EXPERIENCE
A consistent experience across EN, FI and SV.
EN — ADD SCREENSHOT
FI — ADD SCREENSHOT
SV — ADD SCREENSHOT
08 — RESPONSIVE DESIGN
Designed to work with clarity at every screen size.
DESKTOP — ADD SCREENSHOT
TABLET — ADD SCREENSHOT
MOBILE — ADD SCREENSHOT
09 — OUTCOME
The redesign introduced clearer navigation, structured laboratory information, dedicated journeys for the site’s primary audiences, a consistent visual system and a maintainable WordPress implementation for future content.
Visit Live Website