View Source

Design

General concept

Our main criteria for choosing the graphic design, besides the learnability, efficiency and safety, was that we were creating design for artists, which means that everything should be creative and relative to the paintings. That’s why, for example, we decided to set a canvas on background and to choose the Pokémon-artist as a symbol of the site.
Main page was decided to be scrollable. It’s made in such way because we didn’t want to make it too loaded with different elements. This decision was motivated by paper prototype, because users said the main page was too loaded and it was difficult to find major control elements. So, now, when user downloads main page, he sees:

There are only 3 control elements in user focus: “Try now”, “Sign up” buttons and search string. Having only three control elements help with learnability. If user can’t understand what he can look for, he can scroll the page down and see popular requests.
One of the major problems that our users determined during paper prototype testing and heuristic evaluation was that it was unclear whether these popular example pictures are clickable. So, we decided to create a mask with the name of technique and a brush (showing that it can be redrawn) that appears on hovering.

First user task and drawing process description

	The first user-testing task was to try the example lesson. It can be easily done with the button “Try now”. Pressing this button launches the initial preparation page that has initial steps description and only one button – “Start the training”. In the beginning of the training user is suggested to watch the training video. We decided to implement it after user testing, because one of the users said he wanted to understand the process of training before beginning it.
	Then user is asked to put the list of paper in the way, it can be seen by web-cam. We tried different variants of showing the user how to set the web-cam since the paper prototype testing. Drawing the rectangle as shown on the picture appears to be the best from the learnability side.
	The major part of our web site is drawing process. The idea of the design changed a couple of times. After user-testing, we decided to divide the whole process on different steps for easier understanding. Also, we decided not to provide feedback in real-time because it disturbs artists and interrupts them. So now, the one-step process looks like on:
	As it can be seen from the screenshots, the artist can either continue or redraw the step. It creates the full user control feeling, because even if the system does not satisfied with the results, it doesn’t prevent the artist from continue drawing.Also, we tried some different types of giving feedback and it appears that just highlighting the wrong places satisfies users.
	Finish page looks now in following way as it shown on the picture. It has undergone some changes since paper prototype stage. Firstly, users said that they do not see enough information, so we added the name of the technique that describes what was drawn. Also, the heuristic evaluation showed that there were a lot of buttons that brought mess on the page. So, we decided to leave only one button – for returning to Main page. Later, when we implement registration, the system will determine whether the user is registered and depending on that, will show the second button: either “Save and register” for new users, or “Go to Personal Page” for registered users.

The second user task and the search process

	The other user task was to find “Mona Lisa” bi Da Vinci. Later we changed it for finding the sketch because we implemented lessons only for sketches. So, now, Search Page looks in the following way: We had the same problems with the search results as we had with the main page examples – the pictures didn’t look like they were clickable. So, we made here hovering like on the main page. After pressing the result of the search, the user sees the technique page.
	Heuristic evaluation showed that firstly, the description of the technique was hard for understanding, so we decreased the amount of text and made it better for reading (by adding white spacing for example). Secondly, earlier we had an additional page for choosing the level of the technique.
	During the paper prototype testing, the users complained about big number of steps before the start of training. One of heuristic evaluators suggested making a drop-down menu instead of additional page. So, we implemented it:

Implementation

We used the concept of iterative prototyping/development. At the beginning we implemented the raw interface only with pictures/text without any feedback to the user. After getting feedback after testing, we refined our prototype as it was described in the Design section (including eliminating one transitional page) and implemented the ability to redraw one picture. After another couple of iterations (mentioned in the Design section) we refined the design again, and finally implemented the searching system adding more pictures to the website.

In addition to the interface implementation, we had two internal procedures to be implemented which should be described more detailed:

Search algorithm.

Both the main page and the search page contains the search bar. It is aimed on searching within the list of techniques/pictures/artists to find an appropriate technique. The search was implemented in JavaScript. When the user tries to search for a certain phrase, the search script reads the list of techniques and files with their descriptions and outputs the techniques which has the search phrase in their description. The search itself was implemented as a substring comparison.
Image processing for giving feedback to the user.

We used a standard JavaScript library for working with video and JSFeat (JavaScript Image Processing Library) for analyzing the user's progress and giving feedback. We spent a decent amount of time adding that library as well as programming image processing algorithms. This time spending might have affected our implementation of other parts.
Content.

The main idea of our project is to allow users to learn new techniques by redrawing pictures/paintings. That is why it is essential to have content to redraw. We implemented the techniques storage in a structured way, so that the process of adding a new technique will take only a couple of minutes. After adding a technique, the search script will take it into account and show it in the search results during the next search attempt. At the same time the process of adding techniques is monotonous and we decided not to waste too much time on adding techniques, their descriptions, pictures, etc. That is why we have 3 techniques, each has 9 pictures as levels of difficulty. So, the search script and the search page work for 3 techniques and 27 pictures. When the user wants to redraw a picture, he needs to watch a video on how the process of getting feedback works (it was a user feedback to include a video). We recorded one video for one picture, so the user can redraw one picture now. Again, we decided to record only one video in order to save time on doing monotonous work and to spend it on improving the prototype.

We used task decomposition and task delegation between the team members to make the implementation process more efficient. For example, the parts about the search and giving the feedback during redrawing are not connected with each other in terms of implementation. That is different members of our team did these part allowing us to save time on team meetings.

Evaluation

User Population

All 3 users are professional artists (age 20-25) who are keen on sketching. 2 are females. All three have experience of studying in art school as well as working as tutor for pupils.

They all participated in Hacking Arts event in MIT which helped us to reach them

Our main aim was to target those artists who already know main fundamentals of drawing and who already learned a number of techniques so they have organized process for it.

Conducting User Tests

User tests were conducted during meetings in Boston.We didn't conduct demo because we put video in our prototype which helps to describe the process of drawing.

Equipment:

Macbook Air (OS X 10.8.2. Snow Leopard)
Chrome
A piece of paper A4
Black felt-tip pen

Introduction

So, you're an artist who want to study a Leonardo Da Vinci drawing technique. You want to use our service "ArtUp" for interactive learning how to draw.

But first you want to know how to do it via test lesson.

Tasks

	Description	Subtasks
Task #1	Try the test lesson from the main page	Find the page with test lesson on the main page Complete initial preparations Watch tutorial video Tilt back side of the laptop in the right direction Complete the first step and receive feedback Complete the second step and receive feedback Complete the whole lesson and receive final feedback Go to the main page
Task #2	Find Leonardo Da Vinci's drawing techniques	Find search line on the main page Write any keyword which is associated with Da Vinci into search box Find Da Vinci technique page among search results Go to the Da Vinci technique page

User feedback

Page	Problem	Importance	Possible solutions
Search page	Not the whole picture becomes black when mouse is hovering above it	Cosmetic	Resize pictures which are generated during search
Drawing page	Video doesn't have sound - it confuses the listener	Minor	Add audio description which helps to guide the user
Drawing page	It isn't clear that I need to allow webcam so everything will start to work	Critical	Add text and image information about necessity of allowing camera
Drawing page	Text description is far from the part of the screen with webcam - it is very inconvenient to follow the rules	Major	Make text information appear on the screen with webcam with simple description of process
Drawing page	It is unclear about what exactly I need to do during step and what I will draw in the end	Major	Add picture which is going to be drawn on the initial preparation page
Drawing page	There is no way to get back to stop process of drawing and go to the main page	Minor	Add button "Go to main page"
Drawing page	User wasn't able to figure out why screen will show the exact picture that he was drawing	Minor	Add short description which shows how everything works inside

Reflection

During the course we learned that early prototyping helps on early stages of projects development. All iterations (from paper prototype to computer prototype) helped us to make major design decisions.

Paper prototype helped us to understand the flaws in structure of the website as well as position of the elements on each page.
The first computer prototype helped us to finally understand the position of the elements on each page and colors and style of the elements.
Final prototype helped us to understand user perception of drawing and adjust this process because it required some back-end.

Implementing each prototype helped us to get feedback from users, which was important for the final product development. Also we tested different features of our prototypes: for example, during first prototype testing we were more focused on the structure of the website, and during the final prototype (with the whole back-end) testing we were more focused on the drawing part.

If we were to do this project again we would probably test drawing part earlier in the process. Also we would divide the testing on two parts - drawing part and all other features. The reason for it is that drawing part is more oriented on direct mapping from real life and second part is more oriented on external consistency with other website (social networks). The drawing part should have been tested more properly. Many people never saw that kind of things before, so implementation was very challenging from the learnability side.

Also we discovered that working with artists is very hard and providing the feedback on their drawing can be very challenging because they don't like to get negative feedback about their performance.

We will try to address all these issues and to understand the process of drawing better. We are planning to observe following processes:

The process of drawing
The process of learning new technique by book
The process of learning new technique by tutor

All these observations will help us to refine drawing process in our product. We learned that we should be very careful about gathering user feedback because user is the most important person for us.