Challenge

I was asked to develop a Kindergarten teacher website design as a challenge. The project specified that the design should fit a screen size for a typical tablet width of 1024px at 72 DPI. Also, I could not use placeholder text; I needed to come up with text that would actually be on a teacher’s finished website. I could, however, use borrowed assets because the challenge was focused on the overall page design.

Approach

First, I envisioned a teacher persona named Mrs. Johnson to help represent Kindergarten teachers while considering their needs for a site design. Given my work as a school psychologist, I have a lot of first hand knowledge about different audiences the teacher might want to reach. I considered that Mrs. Johnson would primarily use her site to share information with families of her students such as:

• Her background and interests, so they can get to know her
• The classroom schedule and upcoming events, so she can keep them in the loop with what’s happening at school
• Resources, so they are empowered to aid in their child’s education and development
• How to contact her, so they can stay connected

I also considered Mrs. Johnson’s secondary audiences, her students and other teachers. She may want to share with them information like:

• Activities and resources for students to access at home
• Her knowledge and educational practices for other teachers
• A way for other teachers to contact her to ask questions

Solution

I set out to design an aesthetically pleasing, accessible, and user friendly site that would meet my persona’s needs. While considering Mrs. Johnson’s priorities and goals, I wrote copy for the page that would serve those purposes:

• Information about Mrs. Johnson
• A blurb from a potential blog post
• A classroom schedule
• An event list

For assets, I borrowed a logo from an existing primary school (again, only in fair use due to the educational nature of this project). For different sections, I also used royalty free images from Pexels. I then chose a color palette that would incorporate colors from my chosen assets because I wanted the design to look cohesive.

Wireframe

I then sketched out a wireframe using pencil and paper and added some color in Photoshop to distinguish page sections and buttons. I planned a linear page structure that features most of the relevant content on the home page. The main navigation links to each section on the home page to make it easy to reach information the user is looking for. Certain buttons link out for further information, such as to read the rest of the blog or to access the different resources, to avoid adding too much clutter to the home page. There is contact form to make it easy for parents and other teachers to reach Mrs. Johnson. I also added a button to return to the top of the page to allow users to easily scroll back to the main navigation.

Mockup

Next, I created the mockup in Adobe Photoshop using a grid layout to make it easy to align and space out elements consistently. I chose a sans serif font for online reading legibility. The final color palette was adjusted to make sure there was enough contrast for reading text. I made sure font sizes were big enough for readability. Additionally, I increased buttons sizes to be easy to select on mobile devices.

Result

I felt satisfied with the final product. Firstly, the design is effective at meeting the specified goals for the challenge as well as the needs of a Kindergarten teacher. Secondly, the design is also engaging for users. Thirdly, the navigation is efficient. Finally, as someone who has previously supported educators in the classroom, I enjoyed this opportunity to use my design knowledge to assist with those efforts.

• 

• 

Share:

Contact Me

Interested in my services? Let’s get in touch.