Astronav is a website that is aimed to educate kids on outer space. As a user of Astronav, you are also an astronaut traveling through space. You must learn as much as you can and answer every question prompted in order to continue your journey. I was challenged with making this website heavily interactive with the user, while designing compelling and smooth animations.
ASTRONAV
INSTRUCTORMatthew McGlynn
INSTITUTIONTYLER SCHOOL OF ART AND ARCHITECTURE
We were tasked with creating a heavily interactive website, with unique animations, and UI kit, all backed by user research.
After about two weeks of concepts and brainstorming, I chose to create a space-themed website, but did not have a full scope on precisely what. After researching, I found that many schools use websites to educate kids—websites like PBS, National Geographic for Kids, CoolMathGames, and Wonderopolis. With everything we do being on computers, I wanted to create an educational website where elementary students can learn about the planets in our solar system.
Many schools have embraced incorporating technology into the classroom, whether it is completing and submitting assignments online or doing research online, most teachers rely heavily on the internet to run their classes. In an article written by Kristen Purecell, Judy Buchanan, and Linda Friedrich who are researchers for the Pew Research Center, they found that 92% of teachers say the internet has a major impact on accessing resources for teaching. They also found that 45% of teachers allow their students to use laptops or tablets in the classroom. Although, about 85% of teachers say that they still are looking for new ways to incorporate technology into their classrooms.
After doing more research on educational websites, I found that there are not many kid friendly websites that teach about space. Most of the websites are very wordy, with little to no graphics or animations. I thought back to when I was in elementary school and my teacher taught a lesson on space. The content was exciting and fun, but her only option to teach it was to show multiple YouTube videos and find a plethora of other mundane and wordy websites that were not captivating the young minds of me or my classmates.
Astronav is a website that gamifies learning. With fun animations and user friendly graphics, I intend on making a website that kids have fun using while learning about space.
Even though Astronav is a website for elementary school students to learn about space, it was important for me to understand that teachers will be the ones using this site every year for their classes. The students will be engaging with the content, but the problem being solved is primarily for teachers. Knowing that, I created a user persona for my specific target audience.
USER PERSONA
USER journey
information Architecture
UI KIT
Since young students will be interacting with the website the most, I wanted to keep the graphics bold and simple. I felt that simple bold graphics were best for children because they are easily recognizable and create a fun and friendly environment. I created Astronav with the intention to make it feel like a video game so that students would want to look and interact with the site. I also used bright colors on the planets so they can contrast nicely off of the space back ground, which further implements the encouragement of having fun while learning and using Astronav.
PRIMARY LOGO
The best website I found for an educational website was NASA’s very own website. It has features that are very similar to ones I have, but like the others, the designs are not appealing. The 3D visuals are very realistic and create an immersive experience, but are very glitchy and does not provide a great user experience.
WORDMARK
Wireframes
As an Astronav user, you are an astronaut exploring space. To make the experience as immersive as possible, I made the animations seem as if you are in a spaceship, giving you the ability to fly close to a planet, then into its atmosphere, and then ultimately land on it while you learn more and more as you travel.
The animations were the most important part of this website. Astronav is a website that does not function like other websites do. Rather than having buttons that link to a new web page, I wanted to make the user feel as of they are in space and can have access to any planet they want to, right at their finger tips. When you click on a planet, your screen moves to the planet like you are flying to it. The planet gets bigger as you get closer, and some facts about the planet show up. If you choose to get closer, you then go into the planets atmosphere where you can read more facts. Then if you are feeling ambitious, you may land on the planet, but make sure to read all the facts before landing… it could be very dangerous and you want to make sure you know everything about the planet just in case something goes wrong!
Another element of Astronav I added were little quizzes. The quizzes test you on the information that you just read and are your right of passage to continue exploring space. Some planets allow you to land on them, while other planets warn you to not continue. Here you are landing on Mars since we know that it is achievable, and in order to explore Mars you must answer the rovers questions correctly. The farther out into the solar system you go, the more dangerous it gets. So make sure you read all the facts throughly in order to make the right decision!
