UI UX Design

Architecture Studio

Scroll Down

Role

UX UI & AD

Client

Pi 31416

Client

Studio PI 31416, a small but busy architecture firm celebrated for its unwavering commitment to creativity, quality and excellence in urban planning, residential and commercial design, embarked on a journey to enhance its online presence and elevate the user experience on their debut website. The studio aimed to effectively showcase their portfolio.

UX UI Design Project

Introduction

Creating an interactive portfolio website for Studio PI 31416 to showcase their diverse projects.

Project Goals

Developing an engaging portfolio section, simplifying navigation and enhancing user engagement.

Design Process

Extensive research, wireframes, prototypes and responsive design to create an engaging website.

Conclusion

Successful website launch, monitoring engagement and integrating feedback mechanisms for Studio PI 31416.

Wireframes

This was an initial wireframe that served as the project's starting point, outlining how the web development process would unfold.

Prototype

An initial prototype, crafted in Figma, has been designed to encompass the desktop version. Aligned seamlessly with the wireframe and colour scheme, this prototype introduces numbered floors, creating a compelling sensation of traversing through a virtual building as you navigate the website.

Home Page Detail

Streamlined Social Media Integration

Clear Navigation and User-Friendly Design

Second Prototype

Following discussions with the client, we started tweaking the original design. The second version boasts a sleeker, more modern layout, using fewer colours and incorporating extra animations for a cleaner look. We've made it super easy for users to find different floors on the website, aiming for a friendlier and more intuitive experience.

You can explore the entire case study, complete with animation presentations, detailed descriptions and prototypes in the external link case study section.

External Link Case Study

UX UI Case Study

Figma Presentation >>

Wireframes and High Fidelity UI

Wireframes and UI in Figma >>

Website Prototype

Website with animations in Figma >>

Keep Scrolling