MARK 2 PROTOTYPE

This is my Mark 2 prototype that includes a complete prompt path and demonstration of the community and own progress timeline. It also has interactive tagging and commenting features. When the user browses their own art either through their own progress timeline or through the community side, they can toggle a view between their own tags, and the tags and comments other people have added to the work. However, I will probably merge those two into one cluster of tags that will be colour coded depending on if the tag is created by the artist or by someone else commenting, as this would make the application to run smoother.

Instead of tagging only at the end of each prompt path, the user can add tags and comments in between each drawing stage. This will promote appreciation for the process stages and not just for the finished pieces, and guides the user to think positively of each stage.

I also included a small feature for WIP (work-in-progress) images. If the user wants to quit the prompt path in the middle, yet still continue the same drawing next time, the drawing will be saved as an work-in-progress image. The user can browse their WIP gallery and choose an image to continue. Luova will then provide the remaining prompt path. A detail the interviewed people mentioned was that they have difficulties deciding which WIPs to continue, and jokingly said they need to roll a dice to decide for them. Thus I added an option to click a button that randomly rolls a WIP for the user to continue if they have difficulties in making the desicion.

In the supporting materials, when the user opens a reference image page, they see a gallery of relevant images to the prompt that are to provide inspiration and reference. The user can also tap them open as larger images to view the details.

These are some iterations of the visual design of the screens:

Annotation 2019-03-30 133707.jpg
visuals.PNG
Annotation 2019-03-30 140719.jpg
Annotation 2019-04-06 162646

LEARNING THE PROTOTYPING TOOL

This week I have been focusing on learning ProtoPie as a tool and prototyping different interactions as well as testing the limits of the tool. I have created a working tagging interaction – getting the variables right took a while, but I’m happy with the results. Due to time it takes to assemble the interaction, the user can now tag two circles per stage in the prototype, but ideally the user could add as many as tags they want. Unfortunately ProtoPie doesn’t support the use of a device’s native camera, so I won’t be able to use a live camera interaction and have to fake it instead. Additionally, I’m not able to record the user’s tagging choices on system memory, as this is only a prototype and not a real developed application. Luckily ProtoPie does support text input and a native keyboard, so I also created an interactive comment field.

 

I’m also thinking of including a detail that displays which prompt stage the photo was taken in for the process slider. For example, if the image was taken during a sketching stage, it would display “sketching” as a status. I’m also adding an importing option from digital drawing softwares as an addition to taking the photo, as digital drawing is a popular medium within my target group.

As my prototype features many different screens, I created a sheet to make it easier to manage and track the design and prototyping stage for each sceen. It has helped greatly with the project management.

Annotation 2019-04-06 152809.jpg

DESIGN FOR MARK 2

Design iterations

Mark 2 Design approach

Here are some new iterations of the branding and the visual side of the application. The previous angular design did not complement the UI elements and made the application harder to navigate, so I changed the visual direction to more organic with round lines. With only flat colours the palette was a bit too overwhelming, but it works with gradients and as a slightly toned-down version. As I want the design to reflect the theme of the app, I’m testing how paint splashes work as graphic design elements. However, the palette and design are not quite there yet, so I will continue iterating on them. I’m also thinking of details such as showing people “what’s in” in the home screen, consisting of key words on what the user has been drawing and enjoying the most lately.

I have also decided on a final name for the application: “Luova”. Luova is a Finnish word that is used to describe a creative person. Luova is short and snappy, and I think it fits the theme of the app.

I have also asked for feedback on the social side of the application to determine which direction I should take. It seems to be a popular idea, so I thought of applying the tagging interaction to the community along with the process animations/gifs. In the community side people can add what they liked about others work as quick tags. Tagging is a more effortless way to leave a comment compared to the effort of writing. These tags would then be displayed to the user if they browse their own old published work, and maybe also as visualised statistics. Some people mentioned that they would like to see “meaningless statistics” as long as it stays positive and doesn’t become too pressuring.

People often comment each other’s work in similar ways, such as “nice face” or “great line art”, which is easy to replicate with the tags. It also provides a set of nice visual data when looking at the image and its tag clusters at different stages of the illustration.

Some further feedback I got was that instead of just tagging, maintaining the open written field is something the user testers found important. Whereas tags are time efficient and an easy way to communicate something positive, written comments add a personal touch and let people to explain more complex nuances.

I did consider a direct critique tag, where the user could mark what they didn’t like and would need more help with in their drawings. I then discarded the idea after asking some opinions, as people from the target group explained that they do notice the negatives in their work, and if the app allows them to tag negative things, they will have even harder time thinking positively about their work. The direct critique tag could be useful if the user is really focused on improvement, but personally I’ve come to decision that it wouldn’t fit the tone of the application and the needs of the target group. They would prefer the indirect approach of focusing on the positive, as they struggle in finding the joy of the drawing process and the strong parts in their art.

I also considered a system where the application would notice which tags the user doesn’t get as often, and change the prompt recommendations to reflect that and provide more prompts with the subjects or media the user needs to improve on. However, within the time limitations and prototype limitations it would be difficult to test the results of that, and within this context it seemed irrelevant, as the focus of the application is not in teaching improvement. Additionally, the goals already provide an opportunity to customise the prompt suggestions, and I believe maintaining the user’s own agency in determining the goals is more important than hidden changes. The interviewed people mentioned that they would notice if they get a lot of “line art” tags but not “colour palette” tags for example, and that having the option to change the goals within the application towards more prompts that feature practising a colour palette is enough if the user has the desire to improve on that. However, it should not be forced, as that doesn’t suit the premise or tone of Luova.

Annotation 2019-03-30 134155

I iterated the community side a bit as well as added a featured “daily prompt” slideshow in the gallery, along with a link that directs to that prompt path. The user can do the daily prompt and have their work featured in the daily prompt slideshow, which would provide a sense of community while still staying light-hearted. As the point of the application is to avoid collecting followers and likes, I have chosen not to include a following system to the community side, but to showcase the artwork based on different categories. In addition to “recent” the community has a filtering system based on prompt types such as “relax” or “challenge”, as well as prompt tags – drawings with a lot of tags on “line art”, for example, would be displayed when the user chooses to filter based on the “line art” tag.

The community side will include the artist’s name so that people can find them from other social media, but it will not have follow system. This ensures that the user is exposed to a lot of different artworks and not only the few artists they look up to, thus expanding their view on how different each person’s drawing process is.

As a small detail, I removed “your work” from the community side. It was unnecessary since the user can browse their work through their own progress timeline, and I will add highlights to display the published images in the user’s own progress timeline, as well as the user’s own images in the community timeline.

NEW FEATURES AND A PROTOTYPING TOOL

So far I have been collecting feedback on the prototype, but also looking for a suitable prototyping tool for the final demonstration. The previous versions I have created using Adobe XD, but XD doesn’t quite have the interactive features the app would need, and thus I have been searching for something with higher fidelity.

Annotation 2019-04-07 143629.jpg

I have made multiple online comparisons, and top two that would provide both the interactivity and animations I require would be Proto.io and a newer ProtoPie. In the end I preferred ProtoPie due to its high fidelity, use of variables and pay once method instead of a subscription. I have been exploring and learning to use the new tool, the animations it provides and its trigger-response method that is based on variables, and I have been happy with the results.

To make the application make use of the opportunities a mobile platform provides, I came up with a “tagging” method that lets people visually document what they like in their own work. Instead of writing, the user can hold their finger on a photo to visually tag the areas of the artwork they like, and then choose a suitable “tag” title for it. For example – if the user is happy with how a character’s facial expression tuned out, the user can visually mark the facial area in the artwork, and then choose “expression” as the tag.

Example
An example demonstrating how the visual tagging would look like

The user would tag their work after each drawing stage and at the end of each prompt path. The tags would be recorded on the user’s own timeline, where the user can browse their previous work and see what they enjoyed and liked at each drawing, thus maintaining a positive memory of the drawings. Next I will create a prototype to test out the tagging interaction.

MARK1 PROTOTYPE

For my Mark 1 prototype I had two goals: to have one set of exercises to prototype how it feels to interact with the different assets, as well as to add some colour and visual iteration to test how the palette works in the UI.

W_proto_snip.PNG
Annotation 2019-04-06 162020.jpg
Annotation 2019-03-30 135703.jpg

Before MK1 I asked some more feedback on the social side of the application, and a lot of people said that seeing other people’s work-in-progress art would help with their  insecurity, as they could see that others have “bad” drawing days or stages too. I think keeping the social side limited within the app is more beneficial for the target group than connecting it to others, as other social medias suffer from the saturation of good work that creates insecurity and pressure to post only finished images. Social side within the app would allow the users to post even their “bad” or unfinished work within a safe environment, as the social community side wouldn’t have a follow or a like system.

Community
Layout for the social side with a slideshow

Next I will continue iterating the branding and information hierarchy of the application. I got feedback that writing after each drawing stage breaks the flow of the application, so I will explore other ways to allow the user to mark what they like in their work at that stage. One of my ideas is having the user to take a photo of their work after each drawing stage, and the application assembles a gif animation of their work so far. The animation is displayed for the user after each prompt stage, in their own progress gallery and in the community side to others. When looking back at the user’s own previous work, this would also demonstrate in a positive way how much the user has accomplished.

Some other feature fixes I will add are some guiding details such as descriptions to explain each prompt type, and having an option to take a photo of the user’s progress whenever the user wants, but at least once after each drawing stage to assemble the gif animation.

feedback
Options after finishing the prompt

After presenting the Mark 1, I also asked people to actually draw the prompt path and provide feedback on that. Some of the user testers were same people as the ones that tested the previous version of the prototype. The feedback was mostly positive on how the tone of voice is now more welcoming, and the prompt path structure works linearly. However, the curriculum and schedule got mixed up, and the curriculum didn’t make much sense to the testers. I got many comments similar to “the curriculum feels rigid, it’s not what I want”, as the focus of the app shifted and felt too school-like. Therefore I’m thinking of removing the curriculum, and focusing on presenting the goals in a clearer way as a part of the user’s own progress. After all, the application uses the user’s goals to suggest suitable prompts they might like or find useful. The interaction felt natural but at times sloppy due to it being just a prototype. The application does seem to succeed in its main goal – to return the joy to drawing. One person who tested the prompt said he never draws backgrounds, but the app guided him enough with the supporting materials and allowed him to focus on having fun with drawing instead of having to Google for perspective grids. “The app makes it easy to focus on relevant things without having to think too much.”

COLOUR PALETTE AND LAYOUT

I have been inspired a lot by the contemporary user interfaces and graphic design with bright colours, bold fonts, gradients and either angular or flowing lines. I have started developing the visual side, taking into account the results from the cultural boards, in which most people preferred flat colours over lots of lines, and a bold style over more delicate or round ones. The goal for the visual side of the application is making assessing things easy. I want the branding to stand out, yet still be friendly and approachable for the users.

The following are some of my font combination iterations:

Annotation 2019-04-06 153726
Annotation 2019-04-06 153514

I created some colour palettes and asked people from my target group feedback on them, resulting in more iterations:

I also experimented with the layout design and tested different kinds of colour palettes to see which ones would be readable and suit the tone of the application. I asked people to pick their favourite ones and iterated them further:

Layout tests
Annotation 2019-04-06 154408
Colour tests

The one I chose to develop forward was the palette with gray, pink and yellow, as I personally thought that would be the best fit for the UI. The palette is not too vibrant but also not too monotonous.

I also discarded the idea of changing the colours when the prompt path progresses, as I believe it is better to maintain a consistent brand throughout the app. This also removes the pressure to complete a path in order to feel accomplished.

Layout iteration for Mark1 prototype

Content creation

In order to create content that demonstrates the reference and inspiration images in the application’s supportive materials, I’ve been sourcing images with creative commons licenses to use within the app. I will create the tutorial material and technique demonstrations myself to avoid copyright issues with existing tutorials, while I will still base them on existing reputable guides and books. While there are many art tutorials online, most of them are either hours long, behind a paywall or require browsing through a lot of content before finding the relevant one. When I asked people what format they prefer for tutorials, the most popular were blog-post like short explanations with images. Tutorials like that usually circulate in social media. They are easy to read and understand, but they get lost in the social media feed. The tutorials will follow the short and snappy principle the interviewed art teacher mentioned, as this will be more efficient for the user and save them the time, leaving more time for actual drawing. Time is especially a constraint for people with full time jobs, so it’s important that the tips provided will be efficient. Additionally, the reference images displayed during each prompt path will be relevant to that specific path and stage making it easier for the user to find relevant support.

Instead of being a random prompt generator, this application takes into account the user’s own comfort zone and goals when providing prompts and drawing ideas, making it more customised to each user’s individual needs. This is important as the target group people’s needs vary from softer to more structured approach. Ideally the application would have a team of people behind it generating the prompts and supportive materials and tutorials for each path. The application maintains the database it uses to determine the prompts by using the background questionnaire from the registration process, and also collects feedback from the user after each completed prompt path.

The prompt paths I’ve thought of so far are:

  •  “Relax” is something the user is familiar with, and thus it has less stages and less new tutorials, but still the inspiration and reference material.
  •  “Challenge” is something the user doesn’t usually draw, featuring a new subject or medium. It is longer and has more stages.
  • “Practise” is croquis-like prompt that changes the images after a short time period, and the idea is to do quick sketches of animals for example.
  • “Have an idea” gives the user an option to look for relevant reference material and tutorials to their own prompt idea. For example, if the user wants to draw still life kitchenware with markers, the app provides reference images of kitchen utensils and tutorials on how to use markers. The available media and time selected by the user determine what kind of prompt the application suggests.

For example, if the user would like to learn to draw cityscapes, the contents would include materials such as things you would find on an alley, different kinds of people etc. If they had problems with perspective, the app would provide a perspective grid.

The following are examples of the reference materials and inspiration the app provides:

prompt example-1
prompt example-2

As this is an application focused on drawing, I need example content of illustrations. I have asked a permission from some hobbyist artists to use their work as an example or inspiration within my application, so I will now be able to create prototypes with example gallery content.

CULTURAL BACKGROUND ART BOARDS

So far I have been working on project management, defining the target audience and their needs, and improving the structure of the application. Before moving to visual design, I first needed to identify the kind of visual style that suits the target audience and works in a mobile phone UI. I want the UI to be inspiring, yet it still needs to be readable and not too intimidating.

b2.jpg

In order to gather more information on which kind of visual style my target group prefers, I created ten mood boards on different kinds of visual art. The boards included examples of illustrations, typography and overall visual style associated with each genre. I asked ten people, all of which belong to my the target group, to answer questions on which board they associate their work with, which styles they like and do not like and which ones they would choose as their backgrounds. The idea behind the background questions was to find how long the participants would be willing to look at a certain style before it becomes too distracting or annoying. I also asked them what kind of prompts they would want, if they were to be based on the board styles.

The cultural background boards consisted of the following:

  • Editorial illustration
  • Graphic novels
  • Digital art
  • Traditional art
  • Fine art
  • Character concept art
  • Cartoons
  • Landscape art
  • Minimalist illustration
  • Fan art

The participants liked the colourfulness and consistent palette of the minimalist and editorial styles. Along with the graphic novel style, people liked the visual language of those boards and felt inspired by them. Out of all boards fine art was the least popular, as it did not represent what people wanted from their own art, and it felt old-fashioned and cluttered according to the participants.

b1

Most participants would want prompts based on the traditional, digital and fan art boards. The appeal is in relaxed approach and dynamic lines. Some would like to learn character concept art and landscape art, but they feel too intimidated by them to start. Cartoony style felt approachable yet too branded. Editorial and fine art styles were “too ready, looks like the expectations are high”. Traditional illustration was the most approachable. Clarity and approachability were the top two qualities people mentioned. Colourful flats and flowing lines were also popular. The feedback from the boards has given me a good base to build my visual design on, and I will start iterating the visual design based on this information.

INTERVIEW WITH AN EXTRACURRICULAR ART TEACHER

I have been further defining the problems of the target group:

  • The target group is defined by need for speed. They need to focus on drawing itself and simplify any supporting actions.
  • Detest looking up stuff online because it takes so much time when having little experience or vocabulary to guide in searching.
  • Don’t get as much done as they would like because of the time constraint and due to getting distracted by challenging parts of drawing while lacking straight-forward solutions.
  • Generally poor self-esteem regarding their own art.
  • Comparison-mindset and lack of appreciation and understanding for their own work and for the progress or in-between stages of creating.
  • Generally young people, inspired by pop-culture rather than high-culture.

These problems are more widespread due to the social media era, because target group is surrounded by a massive daily feed of artists and work that seems superior to their own. The rich media feed has potential to be inspiring, but it becomes a burden for people in the target group, as it makes them unable to enjoy their own work. They have a pressure on getting likes and comments on social media and suffer from constant comparison to work of others and the feedback they get. Social media-mindset and pressure reflects on their personal drawing. Creativity suffers from the internalised pressure and coming up with ideas becomes difficult. People are insecure because they feel they cannot draw, as their perception of their skills is not truthful but overly negative and selective. My research indicates that the best way to help them is not by providing conventional art education, but by getting them to draw more and more casually.

Although the point of the application is not to provide tractional art education, I contacted an extracurricular art teacher to gather insights on how to get people familiarised with new media and techniques, and how to overcome insecurity especially when being surrounded by multiple people.

These are some key insights I gathered from the interview:

  • Being present is important, and small hints help people to continue and overcome frustration.
  • Providing specific advice for a specific problem quickly helps to re-engage. It doesn’t have to be a full lecture, just a couple of verses.
  • Breaking new things into simple steps that are easy to follow is useful.
  • Allowing free doodling with the new technique in an unexpected way keeps people engaged.
  • Having the media and assets ready for the next media or technique is important.
  • Showing that every approach and sketch has value helps people to see their progress and accomplishments.
  • Explaining a technique quickly in a few minutes maintains people’s attention and doesn’t take time away from their drawing practise.

Based on this I concluded that it’s important for my application to keep track of the media the user has available before selecting the prompt, provide short and snappy tutorial introductions and keep track of the user’s accomplishments. The following are features that aim to encourage the growth-oriented thinking over negative self-deprecation:

  • Asking users to submit information on what they liked about their own work and whether they liked the prompt subject and media.
  • People get frustrated with details which stops their drawing process. The app provides supplementary materials and breaks the prompt into smaller pieces to enable the flow.
  • Timeline allows users to see their productiveness — “I don’t draw enough” is something many people feel no matter how much they draw, especially if they work in a full-time job. Showing the work they have done visualises their accomplishments.
  • Developing a social side: encouraging people to share their less perfect work with others in a safe environment.
  • Learning by doing — the app doesn’t focus on improvement but gives tools for exploring new techniques and media.
  • “Great!” – encouraging screens to create a friendly tone of voice.

Feedback on the wireframe prototype

After Christmas I revisited the wireframe prototype that maps out the core structure and features of the application. I asked some target users general feedback on the overall flow of the application. People liked the structure through a prompt path: as one interviewee described “it’s like a train, you can continue if you want but you can also leave at any stop”. They also enjoyed the snappy exercise structure. The community aspect was surprisingly popular, as many people liked how it allows them to get a chance to others’ WIP work. Improvement suggestions were focused on how the curriculum feels rigid and reminds too much of to-do lists, and that the current tone of voice of the prototype is too cold and it could be friendlier.

Some features that needed clarification were:

  • Shedule: In order to suggest relevant prompts, the application needs to collect data on how much time the user has and if there is time they could spend drawing but are not necessarily aware of it, which is the case for a lot of people with full time jobs.
  • Background questions during the setup: In order to determine the comfort zone of the user, the application needs to know what subjects the user usually draws and what media they are comfortable with, along with the user’s goals and what they would like to draw more. Ideally the app would have a built-in system that measures how much time the user spends drawing different techniques and mediums, and would determine the time required for different prompts based on that.
  • The user testers mentioned that it’s a bit difficult to give feedback without content at the moment, so next I will focus on the user journey of going through a prompt path (for example, relax or challenge) and get the flow of that right before focusing on other features that support the core structure. Some changes I already have in mind are asking the user to write feedback in between different prompt stages instead of at the very end of each path, as this would re-direct the artist’s thoughts to the positive qualities in their work in every stage instead of just the finished piece. I’m also thinking about changing the colours based on how far in the prompt the user is.