TEACHING PORTFOLIO
RESPONSIVE TEACHING PORTFOLIO SITE
Responsive teaching portfolio site
RESPONSIVE TEACHING PORTFOLIO SITE
Visit Live Site
WEBSITE DESIGN & DEVELOPMENT
WEBSITE DESIGN & DEVELOPMENT
Project
Project
40 hours
40 hours
Timeline
Timeline
UI/UX Designer
UI/UX Designer
Role
Role
0
OVERVIEW
Background
My colleague from undergrad reached out mentioning she was completing her Masters in Teaching for Art Education at Tufts and needed a professional portfolio to submit for job openings but had no experience in web design, branding, or web development.
My colleague from undergrad reached out mentioning she was completing her Masters in Teaching for Art Education at Tufts and needed a professional portfolio to submit for job openings but had no experience in web design, branding, or web development.
My colleague from undergrad reached out mentioning she was completing her Masters in Teaching for Art Education at Tufts and needed a professional portfolio to submit for job openings but had no experience in web design, branding, or web development.
My colleague from undergrad reached out mentioning she was completing her Masters in Teaching for Art Education at Tufts and needed a professional portfolio to submit for job openings but had no experience in web design, branding, or web development.
CONSTRAINTS
The client had a limited budget to spend on a domain/site-building tool. Learning a new tool required additional time to navigate and framer's free plan had limited capabilities.
The client had a limited budget to spend on a domain/site-building tool. Learning a new tool required additional time to navigate and framer's free plan had limited capabilities.
The client had a limited budget to spend on a domain/site-building tool. Learning a new tool required additional time to navigate and framer's free plan had limited capabilities.
The client had a limited budget to spend on a domain/site-building tool. Learning a new tool required additional time to navigate and framer's free plan had limited capabilities.
1
RESEARCH
POV STATEMENT
I’d like to learn more information about the client’s target audience and what is valuable to them so that I can make more informed design decisions for my client.
I’d like to learn more information about the client’s target audience and what is valuable to them so that I can make more informed design decisions for my client.
I’d like to learn more information about the client’s target audience and what is valuable to them so that I can make more informed design decisions for my client.
I’d like to learn more information about the client’s target audience and what is valuable to them so that I can make more informed design decisions for my client.
RESEARCH OBJECTIVES
Determine my client’s target audience
Determine what makes a candidate appealing to the client’s target audience
Learn more about the arts education space
Understand why the client needs a portfolio
Determine what is successful about other portfolio (adjacent) platforms
Determine my client’s target audience
Determine what makes a candidate appealing to the client’s target audience
Learn more about the arts education space
Understand why the client needs a portfolio
Determine what is successful about other portfolio (adjacent) platforms
Determine my client’s target audience
Determine what makes a candidate appealing to the client’s target audience
Learn more about the arts education space
Understand why the client needs a portfolio
Determine what is successful about other portfolio (adjacent) platforms
Determine my client’s target audience
Determine what makes a candidate appealing to the client’s target audience
Learn more about the arts education space
Understand why the client needs a portfolio
Determine what is successful about other portfolio (adjacent) platforms
EMPATHY MAPS
Since I had no prior knowledge on art education teaching portfolios I gathered an extensive amount of secondary research on the matter. I researched what the hiring process was for public school art teachers, what a teaching portfolio should be, and how they were interconnected. I then used this research to create empathy maps so I could gain deeper insights into the intended audience groups whilst visualizing and categorizing these key “users.”
Since I had no prior knowledge on art education teaching portfolios I gathered an extensive amount of secondary research on the matter. I researched what the hiring process was for public school art teachers, what a teaching portfolio should be, and how they were interconnected. I then used this research to create empathy maps so I could gain deeper insights into the intended audience groups whilst visualizing and categorizing these key “users.”
Since I had no prior knowledge on art education teaching portfolios I gathered an extensive amount of secondary research on the matter. I researched what the hiring process was for public school art teachers, what a teaching portfolio should be, and how they were interconnected. I then used this research to create empathy maps so I could gain deeper insights into the intended audience groups whilst visualizing and categorizing these key “users.”
FINDINGS
Both administrators and recruiters have extremely limited time to look over candidate materials
Both are looking for student-centered, passionate, life-long learners who are able to communicate well and impact student lives
The teaching philosophy and evidence of student work are the top 2 most valuable assets of a teaching portfolio
Electronic portfolios are beneficial because they are more accessible (wider, faster distribution) and open the door to a non-linear display of teaching
Administrators sometimes have a say in hiring alone but recruiters almost always report back to administrators and cannot make the final decision themselves
Most teaching candidates apply during the same time/season which makes it more competitive
Both administrators and recruiters have extremely limited time to look over candidate materials
Both are looking for student-centered, passionate, life-long learners who are able to communicate well and impact student lives
The teaching philosophy and evidence of student work are the top 2 most valuable assets of a teaching portfolio
Electronic portfolios are beneficial because they are more accessible (wider, faster distribution) and open the door to a non-linear display of teaching
Administrators sometimes have a say in hiring alone but recruiters almost always report back to administrators and cannot make the final decision themselves
Most teaching candidates apply during the same time/season which makes it more competitive
Both administrators and recruiters have extremely limited time to look over candidate materials
Both are looking for student-centered, passionate, life-long learners who are able to communicate well and impact student lives
The teaching philosophy and evidence of student work are the top 2 most valuable assets of a teaching portfolio
Electronic portfolios are beneficial because they are more accessible (wider, faster distribution) and open the door to a non-linear display of teaching
Administrators sometimes have a say in hiring alone but recruiters almost always report back to administrators and cannot make the final decision themselves
Most teaching candidates apply during the same time/season which makes it more competitive
Both administrators and recruiters have extremely limited time to look over candidate materials
Both are looking for student-centered, passionate, life-long learners who are able to communicate well and impact student lives
The teaching philosophy and evidence of student work are the top 2 most valuable assets of a teaching portfolio
Electronic portfolios are beneficial because they are more accessible (wider, faster distribution) and open the door to a non-linear display of teaching
Administrators sometimes have a say in hiring alone but recruiters almost always report back to administrators and cannot make the final decision themselves
Most teaching candidates apply during the same time/season which makes it more competitive
2
DEFINE
USER PERSONAS
How might we help the client become as appealing as possible to school administrators and education recruiters?
How might we help the client become as appealing as possible to school administrators and education recruiters?
How might we help the client become as appealing as possible to school administrators and education recruiters?
3
DESIGN
→ SKETCH
→ WIREFRAME
→ PROTOTYPE
I sketched out a few initial concepts to show to the client with assessed the overall design on a basic level (ie. hierarchy, sections). Once I got the go ahead I continued fleshing out the site with higher fidelity wireframes. I found myself making a lot of adjustments to the final product once I moved into more high-fidelity iterations.
I sketched out a few initial concepts to show to the client with assessed the overall design on a basic level (ie. hierarchy, sections). Once I got the go ahead I continued fleshing out the site with higher fidelity wireframes. I found myself making a lot of adjustments to the final product once I moved into more high-fidelity iterations.
I sketched out a few initial concepts to show to the client with assessed the overall design on a basic level (ie. hierarchy, sections). Once I got the go ahead I continued fleshing out the site with higher fidelity wireframes. I found myself making a lot of adjustments to the final product once I moved into more high-fidelity iterations.
I sketched out a few initial concepts to show to the client with assessed the overall design on a basic level (ie. hierarchy, sections). Once I got the go ahead I continued fleshing out the site with higher fidelity wireframes. I found myself making a lot of adjustments to the final product once I moved into more high-fidelity iterations.
4
DEVELOP
WEB DEVELOPMENT
I took the final design from Figma and replicated it in Framer to be responsive on all devices.
I took the final design from Figma and replicated it in Framer to be responsive on all devices.
I took the final design from Figma and replicated it in Framer to be responsive on all devices.
I took the final design from Figma and replicated it in Framer to be responsive on all devices.
ITERATIONS
RESPONSIVENESS
RESPONSIVENESS
When scaling down the viewport certain sections were having issues on smaller viewports. I redesigned this section so those issues don’t occur.
When scaling down the viewport certain sections were having issues on smaller viewports. I redesigned this section so those issues don’t occur.
When scaling down the viewport certain sections were having issues on smaller viewports. I redesigned this section so those issues don’t occur.
When scaling down the viewport certain sections were having issues on smaller viewports. I redesigned this section so those issues don’t occur.
BUDGET CONSTRAINTS
If I wasn’t working within finanical constraints I would have used Webflow’s custom coding feature to create a snap scroll effect where it would only take one stroke to move through each section.
If I wasn’t working within finanical constraints I would have used Webflow’s custom coding feature to create a snap scroll effect where it would only take one stroke to move through each section.
If I wasn’t working within finanical constraints I would have used Webflow’s custom coding feature to create a snap scroll effect where it would only take one stroke to move through each section.
If I wasn’t working within finanical constraints I would have used Webflow’s custom coding feature to create a snap scroll effect where it would only take one stroke to move through each section.
FINAL PRODUCT
Visit Live Site
5
REFLECT
This project was a great growth opportunity. I was required to learn a lot about the field of arts education and web development.
Actually having to bring this project to life forced me to think under both design and time constraints I wouldn't've had with a theoretical project.
This project was a great growth opportunity. I was required to learn a lot about the field of arts education and web development.
Actually having to bring this project to life forced me to think under both design and time constraints I wouldn't've had with a theoretical project.
This project was a great growth opportunity. I was required to learn a lot about the field of arts education and web development.
Actually having to bring this project to life forced me to think under both design and time constraints I wouldn't've had with a theoretical project.
This project was a great growth opportunity. I was required to learn a lot about the field of arts education and web development.
Actually having to bring this project to life forced me to think under both design and time constraints I wouldn't've had with a theoretical project.
Back to Top