Kyle Alexander

The Inner Sketch


Project Description

When I was a teacher, I witnessed a need in the school system. A teacher’s main focus is to follow the required english and math curriculum, while all the other subjects are given very little attention. Since most teachers are constantly overwhelmed with fulfilling the english and math requirements, there is very little time left over for science, art, and physical education. I created this website following the physical education and art curriculum standards, so students are able to learn about their anatomy and health through observation and creativity. Since this is a prepackaged lesson for teachers to use, it will give them a chance to teach the previously mentioned subjects they might not have time for otherwise. The target audience for this site is students of upper elementary and middle school age, and it is meant to address all learning capabilities. The intention of this website is to spark a lifelong interest in how the body works and keeping it healthy.


The Challenge

The challenge was designing a website that teachers can use for lessons, or a student can use independently. To achieve that goal I needed to make a site that presented complex informational content in a way that was easy to digest and easy to navigate for students of all learning capabilities. 


As an answer to this challenge I focused on researching pain points for students by observing what they struggle with on existing sites, that way I could make a site that is accessible to all learners. I designed a simple interface that breaks the content into manageable sections, and a system of drawing steps that allows students to move backward and forward through the lesson.


Tab panels allow students to move backwards and forwards through the steps



To meet this challenge, I knew there were a few questions I needed to answer during the research phase. How much content is too much? What is the best way to present information to young students? What layouts do students find the most engaging when using an educational site? I conducted a survey to help me answer two of those questions, and I found that 72% of students felt that most of the screen filled with content was too much. 28% of students thought that even a paragraph per screen was more than they wanted to read.

When asked how they would like information presented in an educational app (choices were: illustrations, text, animations diagrams, videos, and games) the three most popular answers were illustrations at 34%, text at 28%, and animations at 52%. 



To answer my third question I interviewed students to learn what layout they preferred when viewing and interacting with a website. The general consensus was students liked information broken down into steps that are easy to understand, with a small amount of text accompanied by an illustration or animation. I also discovered that students were overwhelmed by too many options and buttons to click on.




Competitive analysis 

The drawing steps for this site are the most important elements, so I turned to competitive analysis to develop a clean drawing system. As I watched the students test the competitor’s sites I, noticed that sites using videos to teach drawing skills presented a challenge for students. When they wanted to go back to a previous step they had to search for the starting point. Sites that had the user scroll through drawing steps cost the students time. The format that seemed most effective was a tab panel style where students had easy access to all the steps on one screen.  


Information Architecture

To create the information architecture for this site, I simulated how a teacher would present the subject matter in the classroom. When teaching it is best to start broad and then narrow the scope to specifics, while giving the necessary information in segments. 



I developed two personas for this website, because there are essentially two types of users. The teacher who will be using this site as a lesson, or the student who may be following along with the teacher or using the site independently. The profile for the teacher encompasses the challenges that a typical teacher may face in the classroom. The profile for the student represents the child that may encounter the most pain points, and would benefit the most from a user friendly site. 


User Flow 

This user flow tells the story of how a teacher might use this lesson, and some of the decisions she might have to make to adapt the lesson to her schedule. Kate begins on the landing page and asks the students to make observations about what they see on the page. Then she moves onto the brain facts where she calls on students to take turns reading the facts and health tips. Now that the students have background knowledge they begin step one of the drawing process and read the accompanying facts. Kate continues through all the steps trying to give everyone enough time, but she knows she will have to revisit some steps for students like Cesar who have a hard time keeping up. Once the drawings are complete she has to make a decision; should she have them take a quiz, play a game, or is there just not enough time for either one.



All the graphics on this site including the logo, icons, and supplemental images were created by me. Every single image began with a sketch, and then was rendered in Illustrator. I placed a heavy importance on the images for this site, because I was designing with the student persona in mind. I wanted to make images that reinforced and depicted what I had written in the text, to help students who struggle with reading follow along easier. 


The Story: Content 

Kids are notorious for having very short attention spans, therefore the content for this site needed to tell a story that would captivate their attention. The students will learn about organs by reading a story that gives a glimpse of what it would be like to go inside an organ on a theme park ride. They move to the drawing page where each step has a fact that explains the function of that part of the organ, the facts on the drawing pages reference the theme park story from the following page. 


Heart rollercoaster to go along with the theme park narrative. Click to see animation.



I used the sketching process as an opportunity to figure out how to layout the content in a way that would achieve optimal comprehension. I made the decision to keep the delivery of content familiar, and similar to the layout of a text book. An illustrative image to the left or right of the text, and headers and subheadings to identify each section of text. I decided this was the best way to layout the information, because when students with special needs are exposed to something they are not familiar with it leads to anxiety.



During the wire framing process, I chose to focus most of my time on coming up with solutions for making the content easy to comprehend. I used this part of the process to decide how many drawing steps each organ would have, and how much text should accompany each step. I devised a solution to break the content into smaller chunks on the facts pages, by having the facts in paragraph format and the health tips in list format.


Iterative Design Process

User Testing 

For user testing I went to several classrooms and had students test the site. I tested the prototype 3 times throughout the design process with 3-4 users each session. With the teachers’ help we picked students with a wide range of reading ability, learning ability, and economical status. For some of the tests I had students perform preselected tasks, for other tests I had the students use the site as they would if I were not there. I chose to test the site on students instead of teachers, because I was curious to see how students with different learning abilities interacted with the site alone.


Session 1 

The tab panels were a great way to present the steps and the idea seemed to be successful, however the panels were larger than the screen. This was a pain point for the users, because they kept having to scroll up and down to see all the information on the page. To fix this problem I adjusted the size of the tab panels so it would fit the screen on all devices.


Session 2 

During my second round of testing, I found the facts pages also had information that was off the main screen so students would completely miss it. To remedy this problem I changed the layout of the page so all the information would be visible at once. 


Session 3

When conducting the third test, I found that students were asking for a site that was more interactive. I learned how to animate on Adobe After Effects and added animation to aid their discovery of the facts. The users also said that there were too many colors and graphics on each page which distracted them from learning and drawing, so I cleaned the interface up to remove all distractions.


The new Heart facts page with fewer colors and graphics.


Final Design 

After subjecting my prototype to the iterative design process, I am confident the pages I have completed so far are working well. The content is easy to grasp, and the drawing steps are easy to navigate. The next step is to animate the illustrations on the facts pages to make them more engaging based upon the request of users during testing and the survey results. I am also planning on developing a quiz page and a game page. My vision for the game page is to create clear illustrated or animated instructions for games that will get the students active and moving their entire bodies. My goal is to help students realize the connection between how their organs work and the importance of keeping them healthy by exercising. Adding quizzes and exercise based games will also make this a valuable prepackaged lesson that teachers can use to teach PE, art, and human anatomy. My hope is that this will help inspire a lifelong journey and interest within the students to understand their bodies and keep them healthy.

Check out the website: