Redesigning my high school's webpage.
Role
Designer
Front-End Developer
Date:
Feb 2024
Skills
Web Design, Responsive Design,
HTML/CSS, Figma
In this project, I set out to redesign the homepage of my high school's (Nanyang Girls' High School) website. This school is home to all of my fondest memories, and I do not think that her current website adequately captures all the joy, creativity, and excellence that she inspires. Currently, it is a visually uninteresting website which fails to highlight key information that primary users would be interested in.
Nanyang Girls' High School is a premier independent school in Singapore. It has a rich and proud bicultural history, and is one of the oldest schools in the country. The school website primarily serves as a point of information and a collection of resources for three groups of users:
To ensure that I was tackling a real problem, I reached out to friends and family who fell into the three user groups. Their insights were useful in helping me pin point the key issues with the current website.
With the needs and interview responses of these key users in mind, I identified the following problems with the current website:
The current website of Nanyang Girls' High School is bland, unmemorable, and fails to prioritize the correct pieces of information. The design of the buttons and interactive elements also lack affordance.
To redesign the website such that it is 1) Memorable 2) Prioritizes information relevant to the primary users 3) Representative of the school's culture and spirit.
A responsive web design that supports memorability and user efficiency. Popular information (such as Announcements) should only be 1-click away.
As part of my redesign process, I started by hand-sketching new homepage wireframes.
Then, I used my final sketch as a reference to build a low-fidelity wireframe.
Using Figma, I focused on creating a responsive design (desktop, tablet and mobile) that addressed all the problems with the existing webpage that I had identified previously. The annotated graphics below explain how the new design has improved upon the existing webpage.
Before I embarked on designing a high-fidelity prototype, I created a style guide so that the styles would be consistent.
With the style guide as my reference, I translated the low-fidelity wireframes into high-fidelity prototypes. I focused on using color to enhance intuitive design, and designing with good affordance. I also added more elements of Chinese culture to the webpage, since the school is renowned for having the top bicultural studies program in the country.
Using HTML/CSS and JavaScript, I translated the high-fidelity prototype into a webpage! The website is responsive, and can be viewed on a phone (~375x667px), a tablet (~768x1024px) and a large computer (~3840x2160px).
I wanted to take this assignment as an opportunity to sharpen my skills in web design, so I added some flourishes to my webpage:
Feel free to interact with the webpage and test the above features out!
I really enjoyed working on this project, because my high school means a lot to me. I believe the redesigned website truly does justice to what the school represents. Through this project, I was able to execute a full front-end development process-- from research, to design and sketches, to prototypes, to code. Playing the role of both a designer and a front-end developer was an invaluable experience. I'm excited to apply the new skills I've gained in future projects.
Future Direction
In a future design sprint, I would love to keep building out the webpage to:
The four years I spent in Nanyang were some of the best years of my life. Thank you for taking this trip down memory lane with me!
A fond memory: My netball teammates and I holding up lunar new year couplets that we wrote. The school has an annual tradition of writing calligraphy couplets together to celebrate lunar new year!ヾ(≧▽≦*)o