Status: In progress

Date: January 2021 - now

Tools: Figma, WordPress, Elementor, Microsoft Sway, Google Analytics

Password: test

For this project, a friend and I co-created a website that currently serves as our school’s official blog, hosting dozens of student blog posts. We decided to build it using the WordPress CMS, as it would allow other students to easily help collaborate while having many functions such as blogging. 

We hosted StangTalk on a DigitalOcean droplet, my personal go-to WordPress host due to the versatility and free LetsEncrypt SSL. Starting small, we decided to first create a single-page website in order to nail down the theme we wanted. We eventually settled on a more “Instagrammy” and clean design, with the intent of appealing to an audience of teenagers.

However, due to StangTalk being a school-sanctioned platform, concerns over student data required that the website couldn’t be accessible by random people, meaning that it couldn’t appear on search engines as well. Adhering to district policy, we implemented a password-protection system with a simple plugin and hosted all our articles on a similarly password-protected platform called Microsoft Sway. Currently, we are communicating with the district in an effort to formally approve our website so we can actually host our own articles on the website.

With district policy compliance settled for the moment, we started thinking about how we could actually implement the “Instagrammy” style we wanted. We first established the color theme–a toned-down and more pastel version of our school’s spirit colors, green and gold–using Figma. Then, after much trial and error, we decided to make a blocky and round structure that entailed a grid of blog posts that looked like Instagram stories. Using a little CSS, I added hover animations to each box in an effort to make the user experience much smoother and satisfying. 

Then came the prospect of accepting student blog submissions, so I created a small page that both summarized the submission process and allowed students to send in their posts. Original and Community Figma illustrations complemented the page nicely while maintaining the color theme.

Even though we faced many challenges and roadblocks along the way, I felt like this project went well and am particularly proud of the design. We compromised nicely while still complying with our school district’s stringent policies, and I can only see improvement in the road ahead.