Overview
Pacto Estudio is an architecture firm that needed a modern, interactive portfolio to showcase their projects. The goal was to launch fast — they were attending an architecture expo in Milan — to validate direction with clients, and later scale the platform without the complexity of a custom backend.
Role & Tools
Role & Tools
- Lead Designer & Developer
- UX/UI Design
- Front-End Development (HTML, CSS, JS, PHP)
- Lightweight database integration (Sheet.best)
- Media hosting (Cloudinary)
Core problem
The studio needed a quick release while keeping a clear path for future scalability. The challenge was balancing time-to-market and good design, with a flexible technical setup that avoided heavy infrastructure.
Constraints
- A tight deadline and a limited budget.
- This was a side-hustle for me, so time was scarce and complexity had to stay under control.
Solution
A two-step approach ensured both speed and sustainability.
- Rapid MVP to test and validate early — using Sheet.best (Google Sheets as a simple backend) and Cloudinary for media.
- Scalable implementation — replacing Sheet.best and Cloudinary with PHP and a custom admin panel to improve performance, content management, and long-term maintainability, without building a heavy backend.
Gallery
12 screens
Process
- 01
Understand the goal
The client already had a site on Wix, but it was dated and off-brand. With Milan around the corner, I needed a direction quickly, so I asked the team to collect top-tier architecture websites they admired to align on information architecture and look & feel fast. Because of the deadline I skipped formal research steps like audience definition and in-depth context studies. We assumed most visitors would browse on mobile, so the site should be mobile-first — and ironically, moving too fast, I initially designed for desktop only. A rookie mistake I had to correct later.
- 02
Align on inspiration
We reviewed a shortlist of reference sites together and chose one as the main inspiration to guide UI behaviour, component interactions, and content presentation — while honouring Pacto's brand guidelines.
- 03
Wireframing & reviews
I created quick wireframes to align with stakeholders before their trip to Milan. We met in person, discussed how to capture the essence of the Pacto brand, and iterated. The first session was long and intense; by the second meeting, integrating feedback, we had a final direction. I didn't prototype at this stage due to time constraints — stakeholder validation and a clear goal mattered more — and I didn't use a UI kit, to preserve creative flexibility.
- 04
MVP development (Sheets + Cloudinary)
With UI direction approved I had one week to deliver a working site and a simple way to upload projects and images. Building a backend in PHP from scratch would have taken too long, so I used Sheet.best to turn a Google Sheet into a lightweight database and Cloudinary for media hosting. The content team could add and edit project fields in Sheets, upload media to Cloudinary, and see everything rendered on the site through a JS integration with the Sheet.best API. This let us ship fast and test real content — what information to show, how much of it, image count and weight — which freed up time for polish, interactions, and animations, so the first release felt like a real product rather than a demo.
- 05
Scale-up (PHP + custom admin panel)
Post-MVP, the team found Sheets limiting for editing data, organising projects, and managing team details. For the second release I rebuilt the site in PHP and added a custom admin panel to streamline content management and improve performance. They returned from Milan with great feedback, we incorporated all the learnings from v1, and the PHP + admin version was adopted with no further changes.
Results
0
Week to first release
0
Releases shipped
0
Change requests on v2
- Shipped an MVP in about a week, enabling early validation ahead of the Milan expo.
- Content autonomy from day one via Sheets, then streamlined operations with the PHP admin panel.
- Improved performance and maintainability after removing external dependencies.
- High stakeholder satisfaction: v2 was approved without additional changes.
Conclusion
Don't let urgency erase fundamentals: remember the full design process, especially mobile.
A two-step approach — MVP first, then a scalable build — lets you ship fast and then harden what works.
With tight budgets and timelines, simple infrastructure like Sheets and Cloudinary can be a powerful bridge to a robust solution. We first considered Framer or Webflow because of budget, but the client needed behaviours and management flows that were easier to deliver with custom code.
Links