portfolio.
sabrina pan
urban planning + design
2019
hi, my name is sabrina. urban planner & digital designer I’m a multidisciplinary designer with a background in planning human-centred cities and a passion for creating digital design solutions. I am interested in the various dimensions of planning such as improving accessibility to transportation systems, creating opportunities for higher education, and planning urban development alongside technological growth. Having worked at the provincial planning level and within the tech industry, I hope to bring a fresh perspective to problem-solving. Aside from school or work, I enjoy photography, videography, and spending time with my friends and family.
Sabrina Pan
table of contents 01
urban 03 galt district project 05 celebration 2017: legacy project 07 redevelopment on erb
02
ux/ui 11 ginseng: a mental health app
03
illustration 17 urban planning apparel 18 hack the 6ix
04
photography 21 featured photographs
01 urban. research & design Urban design is the configuration of how a city functions and looks in order to improve the lives of its dwellers while encouraging sustainable growth. It combines an understanding of the existing urban fabric, policies governing city building, and people residing in the city. This section is a collection of urban design projects highlighting parts of the design process from research to final proposals.
1
urban design process
01
site visit
02
site inventory analysis & research
03
vision
04
concept design
05
final design
06
presentation
Visiting the site and speaking to locals to better understand the human-scale experience when walking through the site.
Analyzing field data and documents regarding the existing conditions of the site to gain insight into its characteristics, its context, and its issues.
Reviewing and highlighting the site’s opportunities and constraints to develop goals and objectives for the site.
Generating possible solutions and refining the vision through an iterative process of designing and discussing. Drawing proposed site diagrams and determining massing for the site’s focus areas.
Finalizing vision, design concepts, and diagrams for the site. Producing 3D perspective views of the site. Packaging design deliverables into a report and presentation panels.
Presenting the final design to stakeholders of the project.
2
01 URBAN | GALT DISTRICT PROJECT
galt district project DATED January – April 2019 TEAM
Anna Levytska, Anthony Plath, Anna Yu, Annie Yang, Hatim Jafferjee, Sabrina Pan
ROLE
Site inventory analysis & research, vision planning, concept planning, structural diagrams, perspective rendering, report design, panel design
TOOLS Illustrator, Photoshop, inDesign, SketchUp
problem statement How might we plan for growth while preserving the city’s cultural heritage for people living and working in downtown Cambridge?
vision The Galt District Project is a redevelopment plan for the downtown area of Cambridge, Ontario. The plan proposes a transformation of the downtown area that will cultivate economic opportunities, enhance existing cultural identity, and encourage transit-oriented development. This will be done through introducing an employment district, creating a charming pedestrian-oriented hub, and intensifying underutilized lots along the proposed LRT alignment.
3
3D PERSPECTIVE RENDER View of Water St. facing north
01 URBAN | GALT DISTRICT PROJECT
proposed bike circulation
proposed open space
Legend
Legend
Protected Cycle Path
Bike Share Station
Integrated Cycle Path
panel design
Soft Open Space
Existing Open Space
Hard Open Space
Revitalized River Front
report design
4
01 URBAN | CELEBRATION 2017: LEGACY PROJECT
celebration 2017: legacy project contest finalist DATED May – October 2017 TEAM
Erin Bernardo, Jenny Xia, Simran Bhatti, Siya Agarwal, Sabrina Pan
ROLE
Site inventory analysis & research, vision planning, concept planning, structural diagrams, perspective rendering, report design
TOOLS Illustrator, Photoshop, inDesign, SketchUp
purpose Celebration 2017: Legacy Project was a student competition hosted by the University of Waterloo to redesign Arts Quad (a student space) within the campus. Teams were given a budget of $210,000 and tasked to create a gathering space that captured the innovative spirit of the University while adhering to the Campus Master Plan.
problem statement How might we create an accessible gathering space on campus for University of Waterloo students and visitors to socialize with others?
vision The Legacy Project proposes to revitalize Arts Quad as a destination for students and visitors to gather and celebrate while embodying the University’s innovative identity. Existing steps will be redesigned to allow for seating, paths will intersect to encompass a central space, and pedestrian movement will be prioritized by the creation of guiding paths.
5
01 URBAN | CELEBRATION 2017: LEGACY PROJECT
site plan Site Plan
Figure 2: Site plan identifying major design elements
201723
perspective renders
Figure 1. Aerial view of site
Figure 3. View from central tree area towards Dana Porter Library
201723
201723
Figure 9. View of the steps
Figure 5. View of Celebration Plaza 201723
201723
6
01 URBAN | REDEVELOPMENT ON ERB
redevelopment on erb DATED September – December 2017 TEAM
Annie Yang, Erika Kohek, Sandy Wu, Sabrina Pan, Simran Bhatti
ROLE
Bubble diagram, planting diagram, perspective rendering
TOOLS Illustrator, Photoshop, inDesign, AutoCAD, SketchUp
problem statement How might we redevelop a building lot to reflect the existing commercial and residential characteristics of the area and incorporate mixed-uses for residents?
vision The redevelopment will incorporate both new and old design within a commercial and multi-residential building, and it will enhance the surrounding community and preserve heritage features. The redevelopment will compliment Uptown Waterloo’s vibrancy and ongoing efforts to make the area a complete community.
3D PERSPECTIVE RENDER View of 42 Erb St. E
7
01 URBAN | REDEVELOPMENT ON ERB
bubble diagram
planting diagram
8
02 ux/ui. research & design User experience (UX) and user interface (UI) design are two elements of creating digital product experiences. User experience design focuses on the logic behind how an experience flows from beginning to end as a person interacts with it. User interface design focuses on how an experience is visually displayed at every step of the experience. Similar to urban design, UX/UI design puts humans at the center of problem solving to deliver effective solutions. This section showcases the process and outcome of a UX/UI project.
9
ux/ui design process
01
research
02
synthesis
03
ideation
04
implementation
Discovering and understanding the problem area through primary and secondary research.
Defining the problem statement by analyzing insights, themes, and opportunity areas in the discovered problem areas.
Developing a variety of solutions to the defined problem and evaluating ideas against each other.
Delivering a finished product after many stages of building, testing, and iterating proposed solutions.
10
02 UX/UI | GINSENG: A MENTAL HEALTH APP
ginseng: a mental health app DATED January 2019 ROLE
Primary and secondary research, problem definition, ideation, information architecture, experience and interface design
TOOLS Sketch
problem statement How might we help young adults be more conscious about their mental health and promote a positive mental wellbeing?
solution Create a digital experience that will increase awareness of personal mental health, promote positive mindsets, improve self-management, and provide a sense of community.
overview of high fidelity user flow
11
02 UX/UI | GINSENG: A MENTAL HEALTH APP
information architecture
12
02 UX/UI | GINSENG: A MENTAL HEALTH APP
home
Types of quotes provided can be altered based on user input (e.g. career, heartbreak, sadness).
Pre-made challenges are provided based on theme. Users can also create their own challenges.
Guided exercises to tackle mental health challenges
profile
Users can edit their avatar by clicking on the image. Certain features are free to edit while others require in-game points awarded from completing challenges.
Users can view their mood trends on a weekly, monthly, or yearly basis. Advanced trends may include data on challenge progression rates. Future features could include data on more emotions beyond the 5-scale one provided.
13
02 UX/UI | GINSENG: A MENTAL HEALTH APP
diary
diary: new entry
Entries are shown by day and the accordion reveals same-day entries.
Pressing the ‘+’ button will open a box where users can input their mood and any relevant notes.
garden
garden: my garden
Users can grow their own garden by accumulating points when they complete challenges or log entries. Users can also join other users in growing community gardens by completing social challenges together (e.g. sharing small or big wins with each other).
14
03 illustration. visual illustration & design Illustration is the visual expression of ideas and words. This section highlights illustrative designs I’ve created for purposes such as marketing and apparel.
15
16
03 ILLUSTRATION | URBAN PLANNING APPAREL
urban planning apparel DATED 2017 TOOLS Photoshop, Illustrator
purpose Clothing designs created in association with the School of Planning to represent the planning students of the University of Waterloo.
17
03 ILLUSTRATION | HACK THE 6IX
hack the 6ix DATED 2019 TEAM
Joanne Vuong, Kelly Xu, Minda Yang, Sabrina Pan
ROLE
Designer
TOOLS Illustrator
purpose Hack the 6ix is a non-profit organization that hosts hackathons and tech-related workshops in downtown Toronto. Every summer, we host a hackathon where 400 professionals and students from across North America gather together for 36 hours of coding and designing.
project status Currently in progress of branding and designing illustrations with the team to market 2019’s hackathon.
Design for Hack the 6ix website’s landing page. 18
04 photography. digital Photography is the art of capturing information and memories in stills. This section showcases my photography of architecture and transit systems in different cities.
19
20
04 PHOTOGRAPHY
21
04 PHOTOGRAPHY
22
04 PHOTOGRAPHY
23
04 PHOTOGRAPHY
24