An Educational Website Remake
What is OWLET?
OWLET is a non-profit educational website for middle school kids. It contains many lessons on many different technology topics such as math, physical science, digital design, coding, etc.
The website is a part of Code for Denver Club projects and is developed by the volunteers of the club. I was fortunate enough to join in and assist them in designing the website.
What seems to be the problem?
In general, the website is designed for middle school students and does not require such detail to make it look complicated. But it does not mean that the website could not look professional and aesthetic.
The thing is, when the designer and developers created the website, they did not have a proper design scheme to help them understand how to create a website that meets the needs and expectation of the users.
​
The website is full of colors and looks pretty easy to use. But the design of use flow and visual component can use some improvement. So I jump in and help the team.
This is the current website. As we see, there are many small details that can use some improvements in visual, such as the font choice, the arrangement and the design of the topic boxes, etc.
At first, they only asked me to fix the design a bit to make the text positioning and appearance look better. So I tried to adjust the design a bit to make it look prettier.
For example, the website target audience ar middle school children. So I changed the sharp font into a rounded font to make it look more children friendly. Also, I rearrange the position of the text to make it stand in the middle of the boxes instead of on one side. Also, the text would not have a black highlight around it.
Enjoying what I do, I decided to kick it up a notch by re-designing the site with reasonable justification.
First, there will be a big hero image on top with various beautiful pictures on different topics to make the student feel the awe when they explore - the goal of the website - the lessons.
The next design is I decided to modify the boxes from rectangle bars into square boxes. The grided design makes it easier to look at. Also, when hovering over, the image will appear on each box to show a clearer view compare to the smaller rectangle design.
Another thing is the "tag bar" is now gone. Instead, there will be an option to "filter" the tag that the users can view all of them at once. This is easier for the students to select the specific topics that they want instead of "horizontally scrolling" to find what they want.
So far, that's what I've been doing with the project. It is promised more to come in the future as the club only meets once a week. My design was well received by the team and I am really excited about that.
​
​
​
Let's see what happen next. But I'm really happy to be able to help the community around me in improving the future of education for the younger generations.