Responsive Redesign

Redesigning my High School's Outdated Website, From Start to Finish

Overview

Companies and organizations often need to update and adapt in order to stay competitive and thriving in their space. The same goes for their websites. Frighteningly often, the website of an organization can be very outdated, disorganized, and very confusing to navigate. It is an important skill to be able to identify the issues of a website page, and go through the process necessary to refresh it into something better. In this project, I have taken a website of a place I am very familiar with, and have had trouble with in the past, and went through the full redesign process from start to finish, at the end coding my idea of what a much better version should look like!

Identifying Usability Problems

The website I chose to redesign is the site for my hometown school district in Mississippi. More specifically, it’s the page of the place I attended for two full years: Starkville High School. I chose this website because it hits close to home. I personally remember many times I have tried to look for something on the site and been absolutely confused about placement and overall design. It could use a facelift!

As for the problems the website has, there are many! I believe that the main issues stem from the fact that there is too much clutter on the site, with no rhyme or reason as to why things are where they are. There are two sets of of header menus, along with a third menu going along the left side of the site. None of these menus have any particular organizations, and the labels they do have are unhelpful to say the least. Another problem is that the entire site lacks responsiveness, with the info part of the site stuck in the center with large amounts of ugly yellow space surrounding it, making it look like a site from the 90s. If I had to distill the problems the page has into a few bullet points, it would be the following:

– The disorganization of topics

– The overuse of menus

– The clutter/lack of breathing room

– The old vertical design

My goal for the redesign would be to touch on these key points, making the website more spacious, which should also kill the yellow space on the sides, and redo the menus in a way where they are clean and simple, without having to have such a clutter at the top and sides. The important things should be front and center, and there should be space for it to breathe! The website should hit the three usability guidlines of effectiveness, usability, and satisfaction. As of now it maybe has usability, but has a severe lack of effectiveness and satisfaction that I would like to add to the site in my redesign!

I also did an accessibility check using WebAIM WAVE to look for any accessibility problems, and although there were not as many as I thought there would be, I saw a lot of warnings concerning unordered lists (I agree), and 5 total errors that were all missing labels. Many of the other 24 warnings were about the sites lack of hierarchy structure, and exceedingly small text, both of which I agree with. Overall it did fairly well on the accessibility test, but I am sure I can improve on these key points!

Sketches

After picking the site I wanted to redesign, and identifying the main problems that need improvement, it was time to do some sketching! I made 9 quick sketches all side by side, taking 1 minute on each one to just draw my ideas down, and afterwards taking a look at what worked and what did not.

Looking back on all of my sketches, they all follow a similar pattern, focusing on taking advantage of more space, and condensing menus together for easier storage of topics. I believe that the sketches that worked best were the ones that categorized the different menus and kept them off to the side, while also giving the info page space to breathe. My favorites would be the ones on the top row, as they follow the design principles of being efficient, usable, and satisfying. I combined the elements of these sketches, taking inspiration primarily from the top middle sketch, to make one final drawing before moving on to Figma.

Low-Fidelity Wireframe

Now that I had finalized the general plan for what I wanted the redesign to look like, I recreated it in Figma through a low fidelity wireframe. It’s a simple no-nonsense version of the design, with the bare bones of how I want the website structured. There are three versions of it to accomodate three screen sizes: computers, tablets, and phones. The Figma also has annotations on how they solve the problems caused by the original design, which came in handy for the next step of the process!

The Style Guide

While going from the low fidelity to the high fidelity phase of Figma, it’s incredibly important to introduce a clean consistency throughout the design. I therefore made a full style guide for the components, colors, and typography that I employed in my high fidelity mockup. The guide I created contained many components that I went back and reused multiple times as instances while making my mockup, so the guide was very helpful overall!

For color, I decided to go for a very simple palette as to not overcomplicate things. The orange and yellow are my school’s colors, which made them essential to have, and I combined them with a smoky white and a dark gray. That along with the poppins and montserrat fonts I chose should give the final redesign a more modern and sleek vibe, while staying true to the spirit of the school!

High Fidelity Mockup

I combined the designs I finalized through the low-fi wireframe with the consistency and components I created in the Style Guide to make my high fidelity mockup of the website! It turned out quite similar to my original sketch, and I am very happy with the style and capability that comes with it! With the finalized high-fi mockup ready, I could move on and code the website into reality!

The Responsive Redesign

Arguably the most important step of the process is to step in the code and actually redesign it! I used HTML/CSS in Visual Studio Code to do it, and deployed the website through github pages. The link is available below! Note that the redesign extends only to this page, so any buttons or navigational elements present are not interactable.

The end result actually ended up very similar looks wise to my Figma, and was very accurate to the vision of what I wanted the redesign to look like. I have experience in programming in HTML, and I think that may have subconsciously come out while I was creating the sketches and Figma’s, as I made sure to create a good design that would also be easily implementable. I believe the hardest part of the coding processes was making the webpage responsive and accessible. It took a while to make sure every piece of heading and alt text was there, but WebAIME was helpful in checking for that! As for responsiveness, as seen by my mockups, the sidebar is meant to go to the top of the page when the window becomes too thin. I did implement this into my code, but there is still one or two small bugs with text alignment that could be worked on for future reference! Overall I am very proud about how the coding worked out!

Conclusions

At the end of the day, I believe that my redesign was effective, as it covered the key points of effectiveness, usability, and satisfaction. The ordered and tucked away menus at the side of the screen bring effectiveness to the experience, the usability comes in the form of a nice and simple reading experience, and satisfaction comes from the open space and the consistent colors/typography.

This project gave me a lot of takeaways, but mainly serves as a road I can follow to be able to express myself fully. Going from start to finish put a lot of control in my hands, and allowed me to use my design and programming skills to plan and execute exactly what I wanted. This experience has acted as a blueprint that will allow myself to be a better creator in the future!