Case Study - Website

A step towards digital transformation.

Project Phases

Visual and performance analysis of the previous website

The planning process was decided by the performance of the previous website, which generated more than 60,000 organic visits over a ten-year period. This historical data helped identify the pages, service categories, and search behavior that had already created value for the company.

A screenshot of the old Makro Office's home page with a static Bootstrap layout.
Old Home page.

Definition of the new information architecture

The website is an extension of the printed portfolio, so we wanted to replicate its layouts, hierarchy, typography, to reflect tradition, authority, modernity, and trust.

A Screenshot of and internal page of the new Makro Office website, resembling the printed portfolio page on the right.
Makro Office website screenshot.
A screenshot of a page from the printed portfolio.
Printed portfolio sample page.

Initial wireframes and content hierarchy

A Screenshot of the wireframe explaining the layout structure for the Apple product landing page.
Wireframe for the Apple product page.
A Screenshot of the wireframe explaining the layout structure for the Cloud & Services landing page.
Wireframe for the Cloud & Services page.

UI exploration and visual-system development

We also took the time to explore different UI options by using the primary red color as a radical attempt to create a distinctive visual style. In the end, we reverted back to the almighty light background.

A Screenshot of the wireframe explaining the layout structure for the Cloud & Services landing page.
Screenshot of the Figma file with an alternate UI design.

Website construction, quality control, and delivery

After multiple revisions and feedback sessions, we finalized the website design and proceeded with the development and deployment phases.

A Screenshot of different screens of the website both in mobile and desktop views.
Final snapshot showcashing the completed website.