PASTEL

Pastel is a website for parents that allows them to upload a drawing made by their child for diagnosis and discussion. The website offers guidance and recommendations for creating a dialogue with the child, as well as options based on the child’s age. After the initial diagnosis, the parent will be able to determine if further treatment is necessary and can connect with a professional for additional diagnosis and treatment.

overview

As part of my studies for user experience and design at Ruppin College, I was asked to brand a conceptual product and design the main scenario screens for it.

PROBLEMS

Existing platforms for analyzing children’s drawings are inadequate for worried parents due to limited information, unclear analysis, and the absence of a dialogue with the child, making informed decisions challenging without an expert.

goals

A website with interactive tools will help parents improve communication with their child by identifying problems, strengths, and understanding artwork. It includes diagnosis info, appointment scheduling, and online chat with experts. User-friendly on all devices.

COMPETITIVE analysis

I initially researched competing websites that provide diagnostic experiences or information related to calligraphy and personality. I evaluated the contents, organization, features, design, and micro copy (titles, page names, and buttons) of these sites.

interviews

Interviews with parents who have diagnosed their children’s drawings revealed that they often notice changes in behavior through personal feelings and observations from kindergarten teachers. The process of meeting with experts can take a lot of time and parents may not always agree with the diagnosis. However, when treatments were started based on the diagnosis, parents reported a significant improvement. It was noted that parents may lack information in this area and a website with resources could be beneficial for them.

Survey

I wanted to confirm my concerns regarding the necessity of the site among parents and whether they even believe in diagnosing children’s drawings. In addition, I wanted to see what parents would be interested in seeing on this type of website.

What insights do you think can be discovered from such a diagnosis?

This question was selected from the extended questionnaire

34 %
Maturity level for first grade
57 %
Talents and social status
78 %
Distress
83 %
Self-confidence and emotions

Are you aware that you can gain insights into your child's condition by analyzing his drawings?

This question was selected from the extended questionnaire

Yes
Maybe
No

Do you think the insights that emerge from such a diagnosis can help in its development?

This question was selected from the extended questionnaire

Maybe
Yes

If there was a website where you could get information and insights about your child's drawings, would you log in and browse it?

This question was selected from the extended questionnaire

Maybe
Yes

What would you expect to see on such a site?

This question was selected from the extended questionnaire

Ability to get insights and handle problems
Stories of success and reasons to believe
A picture book is clear to understand
Monitoring the sequence of the child's drawings
Information about service providers
A system that combines parents and children, the child draws and the parent receives information
General information about diagnosis in drawing
Blog content where parents share their children's drawings

insights

The results of the survey confirm my hypothesis of the existence of a clear need for this type of website. It can be seen that 2/3 of the respondents see the diagnosis of children’s drawings as a tool that yields important insights into their children’s development, and the users will definitely look for information on a pastel-type website.

User Persona

I built two user profiles for my target audiences, the first profile refers to parents as the main target audience, and the second profile refers to kindergarteners as the secondary target audience, here I checked what their needs, desires and problems are in front of the children and how the website can provide them with an answer to their requirements

Michal Edri

Pain points

Limited time with children, inadequate diagnostic tools at home, potential for misinterpreting behavior in a different environment, strong belief in children’s perfection, desire for effective responses to children.

Goals

To understand and solve children’s problems.

Challenges

Arrive on time from work to prepare food for children, help with homework, and communicate effectively. Understand their needs and maturity level.

Values

To invest all abilities for the benefit of the family and children, believes that her family is the most perfect in the world.

Hobbies

Activities include: gym, outdoor family time, pool, organized family trips, involvement in children’s schools (committee member at older son’s school).

Reference & Research methods

Explore recommended literature through reading and social media.

Pain points

Limited knowledge in diagnosing children’s drawings, workload, equal treatment of kindergarten children, proper communication approach, and effective information dissemination to parents.

Goals

Connect with the kindergarten community, address issues promptly, maintain the school’s reputation, and grow the business. Prioritize quality family time.

Challenges

Her main challenge is to balance work and personal life while being attentive to all kindergarten children, identifying their needs and concerns, preparing new materials and approaching each child individually.

Values

Understand children’s difficulties and needs efficiently.

Hobbies

Family travel, podcast listening, quality time with husband.

Reference & Research methods

Stay connected on social media, meet with experts, interact with kindergarteners, and read informative materials.

Orit Kats

cjm

In order to be able to better understand the pain points of the parents in front of the various interfaces in the field of diagnosing the children’s drawings, I prepared a customer journey map. I noticed that the process the parent goes through to diagnose their child is long and cumbersome, hence I realized that another solution would be to set up a chat with an available expert. and the possibility to make an appointment efficiently through the website.

SITEMAP

In order to organize the user experience in an efficient and convenient way, I created a site map according to the user scenarios and the main needs that came up during the surveys and interviews.

Navigation logic

The site has a top menu with logo, About, Articles, and Contact pages. A user profile and diagnosis button are on the left for quick access. Diagnosis requires user profile access to provide personalized results, info, and appointments with professionals.

user flow

In order for the user experience to be clearer for me to design the interface I created a user flow in this way it will help me to design the site better.
  • The system recognizes users login if they are registered in the first place.
  • The user takes a picture of the child drawing on the mobile.
  • The user clicks the 'Diagnosis' button.
Home
  • The user uploads the photo he took to the 'Upload Image' area.
  • The user fills out a background information form about the child.
  • The user clicks on the 'Results' button.
Diagnosis
  • The  results page is divided into tabs with content that can be found in it and can be paged between the different tabs.
  • The user always has the option to talk  to an expert (on etch page).
  • there are two buttons: make an appointment and button upload a new drawing - back to previous page.
Results

intro video

colors

The color palette starts with primary colors but they get developed into a more recent and mature palette. The goal is to stay in the kindergarten colors.

system design

The idea for the design language is based on the use of basic shapes, a spot and a line, that appear in children’s drawings. It was important to me to maintain with the basic shapes a mature, clean graphic language that addresses the target audience which is the adults in the child’s life, and not make the language childish.

Wireframes

I chose to design three website screens for the main user flow, That’s why I created three wireframes for three pages in XD

Usability test

I conducted a usability test to assess the difficulties and learning ability of new users interacting with the “Pastel” app for the first time. I checked whether the navigation is easy, locations of the various widgets and I also tried to make it easier visually for the user to scan the site. Thanks to this I was able to set up and solve some problems.

Issue #1

The users experienced difficulty concentrating when they tried to focus on the content, since the animation repeated itself in a loop therefore, only when the page is loaded the animation is activated and does not repeat itself.

In addition, defining the buttons on the site as text without a frame made it difficult for users to recognize them, and it also created visual overload. That’s why the buttons got a frame.

Before

after

Issue #2

I changed the word headings to numbers because I realized that the user needed infographic information to help them scan more efficiently the description of the diagnostic process.

Before

after

Issue #3

When filling in the details, the users complained that the list view drops down inconvenient, and even exhausting. For example, if the user has to select multiple topics in the list, things tend to be missed, and if not, then he will repeat the “click script” and when choosing the age, the choice was also not convenient. I was looking for a way that you could give them the best answer without ׳torturing׳ them.

Before

after

Issue #4

On the results page, users complained again about the multiple click problem, each page was characterized by a hot spot that had to be clicked and then a pop up just to get to the answer. After checking I realized that the best way is according to the tab, if the information is general then you can open the information without a hot spot on the drawing.

Before

after

final design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

barnd book

I put the brand book and the summary together, to refine the process I went through.
Again, in my opinion, although this is a final project, it is an important project, I learned from the project that reviews are a very important helper for the characterization and design of the interface, I learned that surveys and interviews can improve the user experience on the website.