Kyle Alexander
 
 

Teach me Art

 
art_app_home.png
 

Project description 

Art in the elementary classroom is a rare occurrence, and when art is actually taught in the classroom it is usually more about crafts rather than the actual art standards. I developed this app for the students that have a passion for art. This is for the students that want to learn more, and perhaps be an artist when they grow up. This app covers the elements of art and the principles of design which are the essential buildings blocks behind any successful work of art. With this app young students will learn the tools needed to create beautiful and engaging works of art. 

 
art_app_project_step3.png
 
 

Challenge 

The challenge for this app was creating a self-guided learning experience that does not require help from a teacher or an adult. How can I create a structure that is concrete enough to keep a child on track, while allowing the child to have the ability to explore and make their own discoveries? How can I make this app accessible to students with learning disabilities, so they would be able to use it with very little or no adult guidance.

 

Solution 

To meet the challenge that creating this app presents, I used my research to identify the pain points that confuse kids the most when using educational media. I applied my understanding of how a teacher organizes their lessons, and replicated their structure when designing the app. 

 
art_app_line_def.png
 
 
 

Observation 

As a teacher, I had the privilege of seeing students use educational sites in their natural habitat. The biggest thing I found after observing hundreds of students interacting with interfaces, was that too many elements led to confusion and resulted in the student getting lost or losing interest in the site. I discovered that students were much more likely to succeed at a given task on a site if they were presented with fewer options. I noticed kids move through a site quickly, especially when they feel lost, so coming up with a clear and obvious navigation was key for this project. I also observed that students almost always used the navigation at the top of the page, or the back and forward arrows. 

 

Surveys 

I conducted a survey to find out how many elements were too many elements on a page. 52% of students said that too much text, images, or buttons was overwhelming. When asked if they wanted a simple landing page with only a few elements versus a complex busy landing page, 65% of students said simple was better. With this information I set out to design a clean interface that would only give the students the essential information they need on each screen.

 
 
artapp_stats2.png
 
 

Competitive Analysis 

During my research of competitor sites, I focused on how they were able to create an environment of self guided learning. Through my research I found that most sites teach multiple subjects. This requires a broad navigation with a large number of links that could confuse young learners, with my app I have the luxury of teaching only one subject, eliminating the need for all the extra links that could add confusion.

 
 

Competitive Analysis

 
 
 

Information Architecture 

The development of the information architecture was my chance to establish a flow that would guide students through the site. I chose the nested list model for the lesson navigation, because it closely follows the pattern in which most teachers teach. Teachers usually have a linear broad to narrow approach when teaching. In addition to using the nested list model, I designed an information architecture that reduces the amount of choices students have on each screen, making it easier for them to find their way.

 

User Flow 

In this user flow Lily is starting her first lesson in the classroom without her teacher’s guidance. Lily begins on the landing screen, moves onto the lesson navigation and chooses the first unit. She then chooses lesson one. She is guided through each stage of the lesson with the indicator on the breadcrumb navigation at the bottom of the screen. 

 
 
user_flow_artapp.png
 
 
 
 

Persona 

This persona was formulated with my research and device access in mind. Since this app is meant to be a self-guided learning experience, most users will either be using the app during classroom free time or at home. This persona takes that into account, and depicts the type of student that will most likely have access to this app on a regular basis. Lily has a great deal of  access to technology at home, and because she finishes assignments early she also has sufficient blocks of time to use the app.

 
 
 
lily_persona.png
 
 

Sketches

To determine the layout for the project navigation page I sketched out a variety of potential layouts for the project page. These layouts depict different ways to structure the info, for example by difficulty or by lesson category. 

 

Wireframes 

To meet the needs of a diverse range of users, I focused on designing a layout that would guide the user in right direction. The order in which the user completes the lessons is important to consider in the design, because each lesson builds off of the previous lesson. The navigation for the lesson section is numbered and mapped out with a line connecting the buttons, and guides the user through the proper order. While researching I found that kids often used forward and back buttons as their primary form of navigation, therefore I created large back and next buttons that are easy to find.

 
 

Prototyping 

As I began creating my prototype on sketch, I noticed my layout design was missing something. There was no cohesion between the layout of one screen compared to the next. To develop a cohesive layout, I came up with a common color palette for the entire app, and I placed the text in the same relative position to the image on all the screens. 

 
 
 
 

User Testing 

I conducted two sessions of user testing at an elementary school. The first test session was with third graders, and the second was with 6th graders. I tested the app on 5 users in each session. I also tested the app on a few adult users to see if it could be used as a viable tool to teach adults art as well. The users were picked by the teacher and me, to get a breadth of learning capabilities and socioeconomic levels. I also made it a point to test an equal amount of girls and boys to make sure there were no gender biases within the app that would affect its use.

 

Session 1

During the first session I discovered that the lessons themselves were easy to navigate, but getting to a lesson proved to be a challenge for some students. I had the lessons navigation split over several screens as an attempt to make it scrollable, and several students confused it for another lesson. I also found that my labeling for each part of the lessons needed work, because students didn't know what part of the lesson they were currently on. To fix the navigation issue I reduced the navigation to a single page that clearly showed the order of lessons. I also made clear headers at the top of each lesson screen so students would know what part of the lesson they were on, and what they would be learning.

 
 
 
 
 
 

Session 2 

During the second round of testing all students were asked to interact with the app as they would naturally. The users followed the path and order I hoped they would. They also responded well to the lesson layout and enjoyed the simplicity and smaller chunks of text paired with an illustration making comprehension easy. The biggest issue was a few students used the next button on the main navigation to find a specific lesson, instead of just clicking on the button for that lesson. This led to the students getting lost, so I removed the unneeded back/ forward buttons from the main navigation pages.

 
art_app_mainless_nav.png
 
 
 
 

Final Design 

Although the “Teach Me Art” app design is only about 45-50% complete, I feel that I have achieved my goal of making the app a self-guided educational tool. The user testing helped me find the pain points in the design that made following the correct path through the lessons more difficult. The app still has freedom for exploration outside of the linear navigation for the lessons. Overall the layout of the information successfully fosters a sense of engagement that does not overwhelm the user with excessive text or visual stimulation. That being said once I develop my animation skills further, I am planning on adding animation to lessons where it seems beneficial. I plan to add the lessons for principles of design and continue building upon my collection of projects and the gallery. 

Clickable Prototype