Design Portfolio 2022 | Zahaan Shafique

zahaan shafique

education

zahaan shafique

23, Indian

Languages: English, Hindi, Malayalam

Address: Calicut, Kerala Phone: +91 8606925695

Email: zahaan.sn@gmail.com

Click here to view my online portfolio

B. Arch 7.92 CGPA (till 9th semester) 2022 School of Planning & Architecture, New Delhi

XII CBSE 96.2 % 2017 Fahaheel Al Watanieh Indian Private School, Kuwait (DPS)

X CBSE 10 CGPA 2015 Fahaheel Al Watanieh Indian Private School, Kuwait (DPS)

certificate

Sep 2022Nov 2022 Google UX Design Professional Certificate Online Certificate from Coursera internship experience

Jan 2021Jun 2021 Intern at RGB Architecture Studio, Kochi 6 months

Responsibilities at the office included working on furniture layouts ,working drawings, electrical drawings, 3D modeling and presentations, with a special focus on interior details.

awards & achievements

2020 Selected for Erfurt Exchange Program Foreign Exchange Program - Erfurt, Germany

skills & expertise

research work

2D & 3D Modeling

Autocad, Sketchup, Rhinoceros, Revit, Archicad, Maya, Grasshopper, Physical Modeling

Interface Design Figma, Adobe xd

Presentation

Photoshop, Illustrator, InDesign, Sketchbook, Procreate

Aug 2021Dec 2021 Design of Learning Environments for Children on the Autism Spectrum (ASD) Guides: Prof. Jaya Kumar & Arpita Dayal

This research delves into the design of learning environments for children with Autism Spectrum Disorder (ASD) from the age of 3-8 in particular as a tool for successful early intervention.

Aug 2020Dec 2020

Forging Meaning and Building Identity Guide: Prof. Leon A. Morenas

This seminar paper carefully examines the dynamics of the system within urban landscapes by which a nation and its identity acquire their intra and international importance.

workshops + extra curricular activities

Jan 2018

Attended ‘Talk with Chalk’ Workshop

Annual NASA Convention 2018, Vagamon, Kerala

Aug 2022 Attended Natural Building Workshop

Organized by Earth Building at Stok, Ladakh

positions of responsibility

Jan 2019

Reubens Trophy Coordinator (College Representative)

Annual NASA Convention 2019, Bangalore, Karnataka

04 06 05

children’s house transit oriented development design development

for Kaira Looro Competition at Rohini Sector-18, New Delhi for NMAAHC, Washington DC

Project Vision

The product will enable users to sign up for local community service by helping them search and register for upcoming volunteering events and opportunities in their locality. This is done by creating a singular directory for volunteering opportunities that users can refer to and sign up for.

Singular Directory

Create a singular directory of all local volunteering events and opportunities in the area that users could refer to.

Search Filters

Help prospective volunteers by matching them to organisations that would benefit from their particular skill set.

Providing Incentive

‘Gamifying’ the volunteering process by offering users with special offers and rewards for their time and efforts.

User Persona

Anthony

Age: 18

Education: Computer Sciences

Hometown: Buenos Aires, Argentina

Family: Lives alone

Occupation: College Student

Anthony is a student from Brazil who recently moved to New York to attend college. He needs ways to spend time in the city when he is not attending classes at college. He feels that signing up for volunteering opportunities will help him become part of the community, make friends outside college and help him become more fluent in English.

Problem Statement

Goals

• Anthony wants to find ways to spend time in the city when he is not attending classes at college.

• He wants to search for and participate in community events so that he can contribute to the local community.

Frustrations

• The language barrier makes it difficult for Anthony to network and find out about volunteering opportunities.

• The events and organizations that he comes across do not really require volunteers with his specific skill set.

Anthony is a student who has recently moved to New York to attend college. He needs a streamlined and effective way of searching and signing up for volunteering events and opportunities in his locality because he wants to do his part for the community.

Site Map

I used the sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Wireframes & Low Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was the event registration flow, so the prototype could be used in a usability study.

View the low fidelity prototype using the link low-fidelity prototype

Wireframes for main user flow

Usability Study Findings 01 02 03

Confirmation Page

Users need a confirmation page so that they can confirm contact details and review event info before registering for the event.

Registration for multiple volunteers

There needs to be a way for users to register multiple volunteers at once.

Option to view Schedule

A calendar feature indicating all registered events would help users with scheduling.

Mockups & High Fidelity

Prototype

The final high-fidelity prototype presented cleaner user flows and included other features like ‘My Calendar’ and Profile Stats Dashboard.

View the high fidelity prototype for the mobile app using the link high-fidelity prototype for mobile app

Confirm Registration

Allows users to enter contact info, additional volunteers and confirm details before completing registration

Splash Screen, Log-In & Onboarding

Profile Dashboard & Calendar Feature

Main User Flow

Searching & Finding out event details. Filter aided search.

Responsive Website Designs

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.

View the high fidelity prototype for the mobile version of the website using the link high-fidelity prototype for mobile version

View the high fidelity prototype for the tablet version of the website using the link high-fidelity prototype for tablet version

View the high fidelity prototype for the desktop version of the website using the link high-fidelity prototype for desktop version

Takeaways

Designing an app and website together helped review UX design fundamentals while keeping in mind the variety of screens your product could be used on. It was also a unique experience this time, designing an app for social good.

Lack of Information

Visitors often have a tough time navigating through the exhibits and often get lost due to the lack of background information on the works presented.

Project Vision

The aim was to create an app that will let users discover more information about the art or artist whose work is presented at the gallery by scanning an artwork/QR code next to it. This is to help gallery visitors who have a tough time navigating through the exhibits and often get lost due to the lack of background information on the works presented. The goal was to develop an app that helps visitors immerse themselves in the gallery experience.

Accessibility

Text-heavy information boards and signage in galleries are often difficult to read and follow for visitors with visual impairment.

Fast Paced Tours

Tours normally provided at galleries are too fast paced for new visitors. Visitors would like to take these tours at their own pace.

Competitive

User Personas

Zareen

Age: 22

Education: Visual Communication Hometown: London, UK

Family: Lives with student Occupation: Graphic Designer

Zareen is a recent immigrant to London and wishes to experience all the art and architecture the city has to offer. She wishes to explore the contemporary art world in London by visiting art galleries and attending art exhibitions, but often finds herself lost at these events. English.

Problem Statement

Joseph

Age: 55

Education: Medicine (MD) Hometown: Buenos Aires, Argentina Family: Married Occupation: Doctor

Joseph is a doctor with a tight daily schedule. He is an art enthusiast who loves to collect pieces he comes across at various galleries in his spare time. Joseph has a visual impairment that causes him discomfort while reading undersized text, which makes it difficult for him to read information boards that are placed next to art pieces.

Zareen is a new young professional in the city who needs to get more information about the art she comes across when visiting a gallery because she wants a more engaging experience.

Main User Flow

Main Flow: Scan artwork to learn more about art/artist.

Paper Wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.

First sketches exploring different Homepage options

Wireframes & Low Fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to scan an artwork and learn more about it, so the prototype could be used in a usability study.

View the low fidelity prototype using the link low-fidelity prototype

Confusing Buttons

Users need to have labels under buttons for clarity of purpose.

Usability Study Findings 01 02 03 04

Complex In-app navigation

Users need a simplified and consolidated menu where users can access all features.

Underdeveloped tour menu

Users need more developed custom tour options for different purposes.

Less distracting app features

App features should not distract users from the gallery experience.

Mockups & High Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows and included other features like daily feed, events calendar, maps and advanced tour guides with customisation options.

View the high fidelity prototype using the link high-fidelity prototype

My Library

Scan Artwork Feature

Tour Features

Includes the option to customize routes.

Other Features

Includes events calendar, maps and daily feed. Accessible from the Homepage.

Takeaways

Designing the app from start to finish really helped grasped all the basic concepts when it comes to UX design ranging from research to ideation to wireframing and prototyping. Due to time constraints it was not possible to fully flesh out all the features I had intended for this project. I would definitely like to revisit this project in the future as it is an app I think could really open the art world and make it accessible to a larger audience.

Time Consuming Voting Process

Film Attendees find the current award nomination process time consuming and want a more quick and streamlined process instead.

Project Vision

The website will allow film festival attendees and critics to nominate and vote for their favorite films and performances at the festival. The website aims to streamline the entire process of nominating and voting for the various awards at a film festival into a smooth and quick process for festival attendees. Attendees can simply vote for all the awards through the website instead of having to go to specific voting events at the festival.

Lack of a Singular Source

Film Attendees often are confused about the events schedule as they are not regularly updated about timing changes.

Film Recommendations

Attendees want a reliable source with reviews and news on the latest films in theatres to help them decide which films to watch.

User Persona

Ida

Age: 42

Education: Film Studies

Hometown: New York, US

Family: Lives with partner

Occupation: Film Critic

Ida is a film critic who loves travelling across the country attending various film festivals, exploring the latest of all what cinema has to offer. But at these festivals, she often gets caught up in her responsibilities as a film critic and ends up having to miss quite a few films that are playing out of competition. She wishes for a more efficient system by which critics and attendees could actually attend all films instead of having to attend various events.

Problem Statement

Goals

• Ida wants a more streamlined and quick way to vote for her favorite films and artists.

• She wants to spend more of her time actually watching the films rather than attending various events and discussion forums.

Frustrations

• Ida loses a lot of time attending voting events, and ends up missing movies that are playing out of competition.

• She only gets to watch movies that are required to be watched by the voting body and as a result doesn’t necessarily get to experience films that are of interest to her.

Anthony is a student who has recently moved to New York to attend college. He needs a streamlined and effective way of searching and signing up for volunteering events and opportunities in his locality because he wants to do his part for the community.

Site Map

I used the sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.

Wireframes & Low Fidelity Prototype

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Special attention was paid to the homepage with shortcuts to the main user flow to assist users with navigation.

View the low fidelity prototype for the desktop version of the website using the link low-fidelity prototype

Wireframes for main user flow

Usability Study Findings 01 02 03

Language Settings

Users need to have an option to switch languages that is clearly visible.

Overcrowded Homepage

There needs to be breathing space between different elements on the screen so that users can easily identify different elements and components.

Confusing Image Carousels

Users need to have a clear sliding feature for image carousels, especially for the desktop version where users cannot swipe.

Mockups & High Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows and included other features like daily feed, events calendar, and ‘About Us’ page.

View the high fidelity prototype for the desktop website using the link high-fidelity prototype for desktop

View the high fidelity prototype for the mobile website using the link hi-fidelity prototype for mobile website

Takeaways

Designing a website from start to finish really helped grasped all the basic concepts when it comes to responsive web design. Hopefully, the product has the potential to make the voting and award nomination process easier for film critics and attendees; and will get attendees more involved in the festival events and activities.

Project Vision

The experience of the project is multifold, sensory, tactile as well as visual. The main users of the project, children are at the heart of the project. The warm textured mud walls and the cool, smooth, fragmented tile pieces underfoot offer different tactile experiences. The Kaira Looro children’s house’s grandest gesture lies on the roof. A continuous singly sloped double roof directs water into the water feature visible from the entry of the project.

During the rains, the gutters collect rainwater and harvest it to the tank in the courtyard. The rain offers many sensory experiences. It can be heard as it noisily patters onto the galvanized iron roofing and finally makes its way through the gutters and in a stream into the water body, it can be seen as it falls in sheets onto the ground and its presence can be felt in the puddles of water underfoot in the courtyard and through the water harvested.

01. Roofing using corrugated GI sheets

Exploded Isometric of Structure

02. Gutters bringing rainwater to the central water feature

03. Truss framing

04. Second roof using wood beams & fabric

05. Earth bag walls and rammed earth jali walls

The design also recognizes the importance of recreation space in the healthy development of children. Along with proper nutrition, green spaces are also necessary for healthy development. The secret garden is a patch of green that offers the children a place with an intimate scale to rest and relax.

External Wall Section

View into Courtyard Entry from Garden

The Children’s House has the potential to act as a social infrastructure capable of functioning beyond the capacity of a resource and care center. In order to unlock this potential, a multi-purpose indoor-outdoor activity space has been integrated into the project.

Section through Courtyard

National Museum of African American History

Design Development

The semester involved taking up an unresolved design (competition entry) left at the schematic stage, and putting it through a design development process This project involved detailing out the initial design, making it work with respect to the structure, facade and HVAC without compromising on the architects vision. The project chosen was the design for the National Museum of African American History & Culture (NMAAHC) , done by Diller Scofidio & Renfro in 2009 , located in the National Mall in Washington DC.

Smithsonian

Capitol

Building

National Gallery of Art East Building

National Gallery of Art

National Sculpture Garden

Smithsonian National Museum of Natural History

National Museum of American History

Washington Monument

Lincoln Memorial

Section through National Mall, DC

Structure

The NMAAHC steel frame can best be described as a table-like structure supported on four main interior legs. The table plan, comprised of four crossed multi-floor trusses, gathers primary building floor and perimeter façade loads, transmitting them down through the main support points at the building cores. Tensile forces imposed by the façade cable net are similarly applied to the secondary perimeter trusses, with the horizontal load from the cables resolved internally in the floor diaphragms. The elliptical core at the heart of the building transmits tributary internal floor loads to a system of diagonal elements that in turn transfers loads back to the main support at the building’s base. The entire superstructure of the building rests on a pier-supported foundation mat with increased pier density at the locations of the main column supports.

Structural Framing and External Facade

Perimeter channels to hold cable net glass on the roof

Vertex Framing

Internal Multi floor trusses from 5th floor to roof

Incase of sub levels, beam is raised/lowered to support the stepped slab, which is then connected to the perimeter girder via struts

Added struts to support the cantilevered portion of the mass, and to support the external glass facade

Beam Network on each floor, responsible for transferring tributary loads Cores with shear walls, framing networks are attached to the shear walls of the core,which assist in carrying the load

Exploded View of Structural Framing

Theatre Lobby

Segregation Gallery

Outdoor Roof Court

Visual Arts Gallery

Slavery & Freedom Gallery

Section through Focus Area

Main Entry Pathway Cafeteria

Central Hall

Vortex

The vortex is supprted by an eliptical ring that is formed by two I Sections welded together. There are cable holders drilled into the I sections to hold the cables that are running along the length of the vortex. There are floor to floor high glass panels that are held together by cable clamps. We have used an I section that runs along the puncture in the floor plate. The I section is supoorted by clets and bolted to the floorplate.The Cable is supported by a holder that is welded to the I beam running along the floor plate. The cables hold the glass panels with clamps.

Vortex pierces through the central gallery spaces to create multi level connections.

Mechanical Systems

Displacement Ventilation System

The building is zoned into sensitive & nonsensitive areas. All air distribution will be served by dedicated air intakes with LEED certified filtered air, pre-heated or cooled with a heat recovery system, and delivered through the central atrium to local fan rooms throughout the building.

Heat Recovery is a ventilation system which works by extracting and supplying air to ensure good indoor air quality. A heat recovery system provides fresh filtered air into habitable rooms while retaining heat that would be normally wasted.

A displacement ventlation system will serve lobbies, theatre and major public areas. A ground source heat pump provides heating and cooling for the displacement ventilation system.

Radiation Analysis

Section through Focus Area

Project Background

The main concept in this scheme was the seamless transition between the three land parcels through green underground plazas and over-head bridges. The commercial and residential areas have been separated using green buffers. The massing for the overall scheme has been stepped down towards the site boundaries to meet the scale of the existing residential colonies in the context.

Aerial View

Creating an Underground Plaza

Mixed Massing creating Dynamic Spaces

Connecting parcels through central green spine

Seamless Integration of Sites

Creating connections within and around the site

Creating functions with overhead bridges

DESIGN DIRECTIVES

MASSING

Retail Office Social Infrastructure Hotel & Service Appts. Housing

SECTION through Office & Retail