Piksel S.r.l

ROLE

UX/UI Design, Development, Technical SEO

TIMELINE

Oct '25 - Apr '26

Overview

Piksel S.r.l needed a new website that reflected the evolution of the company and its position as a software development partner. The previous website had become outdated and did not effectively communicate the company's services, expertise, or approach.

The goal was to create a modern digital presence that could present Piksel's capabilities clearly, transforming complex business and technical information into a structured and engaging user experience.

My role

I was responsible for the end-to-end redesign and development of the website. The project involved:

UX/UI design, including high-fidelity wireframes and prototypes in Figma;
content architecture and CMS implementation;
custom WordPress development (PHP, HTML5, CSS3, JavaScript, and Bootstrap 5);
technical SEO;
deployment.

Redesign

The redesign started with a substantial amount of new content provided by the CEO. The challenge was turning it into a clear structure that could accommodate different types of content while keeping the website consistent.

Working with the CEO and a Senior Product Designer, I reorganised the content and established a shared foundation across the site: header, hero, content areas, and footer. From there, I created different layouts and structures depending on the type of content.

For example, the Services, Specialties, and Products overview pages share a common card-based structure, giving users a quick overview of each offering and a clear path to explore its dedicated page. In contrast, their individual pages could be more flexible, with structures adapted to the content, such as steps for Services, tabs and accordions for Specialties, and tables for Products.

The same approach was applied across the rest of the website, from Case Studies and Blog to About, Contact, and Careers pages: creating consistency where content had similar needs, while allowing each page to work in the way that made most sense for its purpose.

I explored and refined these structures through wireframes and interactive prototypes in Figma, focusing on clear hierarchy, navigation, and making the content easier to scan.

Development

The website was built as a custom WordPress solution, using Picostrap 5 as the foundation. Its lightweight, Bootstrap 5-based structure provided a solid starting point for the frontend, while its child theme provided the development environment for implementing and customising the project's designs, templates, and functionality without modifying the parent theme.

The WordPress architecture was designed around the content structure established during the redesign. Services, Specialties, Products, Case Studies, Open Positions, and Team Members were set up as custom post types because each represents a distinct type of content with its own fields and templates.

On the frontend, this structure was reflected by translating the design system into reusable PHP templates and components. These contained shared HTML structures and were included where needed across the site, allowing elements such as cards and layouts to be maintained consistently without duplicating markup.

Advanced Custom Fields provided structured fields for the different content types, while Gutenberg blocks gave editors more freedom on content-heavy pages such as Case Studies and Blog Posts. This combination provided structure where consistency was important and flexibility where editors needed more control.

I also integrated Polylang for multilingual support and used GitLab for version control, collaborating with a Senior Developer through branching and code reviews.

Outcome

The redesigned website gave Piksel S.r.l a clearer way to present the full breadth of what it does, while the WordPress setup gave the team the flexibility to manage and expand the content independently.

Following the launch, I've continued to work on it, developing new pages, extending existing components, and improving technical SEO as the site evolves.