A CHILDREN'S ART ARCHIVAL APP

Screens from the mobile web app. I did the UX, HTML, CSS and jQuery Mobile.

THE CHALLENGE

As a parent of a small child, I am ridden with guilt each time I am forced to throw away a macaroni portrait or glitter glue landscape. But if we were to keep it all, we’d have nowhere to live because it is just too costly to store — especially in the Bay Area.

SOLUTION

This simple, digital archival web app for kids’ artwork with some simple features like Add Art, Add a Child, and Share (with a private list of family like excited grandparents).

MY ROLE

User research, Wireframing, UI, Visual Design, HTML, CSS, jQuery Mobile.

process

User research

For this project, I was the main user. Through user interviews, I confirmed that other parents had the same issues: (1) lack of physical storage, and (2) guilt when throwing away artwork.

FEATURE DEFINITION

What kind of activities would a user need when archiving their children’s artwork? I noted that grandparents might be the consumers of the content being published, and that teachers might also use this app for sharing art with parents.

Find a child from a list of names that have already been entered.
Take a picture of the artwork and store it with that child’s profile.
Share it with family on the other coast.
Create an annual book of artwork to keep for years to come.

I determined that primarily, the user (parent or teacher) would share the work of ONE student with MANY subscribers.

Task flows

A simple task flow determines which screens will be needed and when to achieve the above tasks.

EARLY SKETCHES

Noting that many apps in which a user adds content have that main “add content” call-to-action prominently displayed, I sketched some ideas where the camera was front and center.

This early sketch made it to the next round. For the sake of scope, I left off the idea about publishing the artwork to a book. — This early sketch made it to the next round. For the sake of scope, I left off the idea about publishing the artwork to a book.

wireframes

I began playing with the idea of viewing a gallery in multiple ways, enabling the user to share the gallery of an entire classroom or an individual child. However, I soon realized that simpler was better for my MVP. I ended up with one gallery view … — I began playing with the idea of viewing a gallery in multiple ways, enabling the user to share the gallery of an entire classroom or an individual child. However, I soon realized that simpler was better for my MVP. I ended up with one gallery view style.

first Prototype

I was just learning jQuery mobile so I figured my best bet was to get some placeholder buttons and fields into a rough prototype to see if the flow I wireframed actually made sense to users.

user testing

The users I chose were my husband (and father of two children), my son’s preschool teacher Courtney, and a neighbor, Josh. I gave them the following tasks:

Background: You are the parent of two small children, Kalel and Luke. You’ve heard there was a mobile website called Kidfolio that could be used for organizing their artwork.

Task 1) Go to site. What are your first impressions? (Testing landing page)

Task 2) Add your child, Luke Rosenthal, to the app. He was born 2/6/2013. (Testing “add a child” flow)

Task 3) Take a picture of some new artwork and add it to the gallery. (Testing “add art” flow)

Task 4) Make the gallery display only artwork by Luke. (Testing search)

Task 5) Take a closer look at Luke’s green artwork, called Image 4. (Testing image detail page)

Luckily, all three participants understood what the web app was to be used for and knew where to tap for the tasks.

However, there were many usability issues. Two users pointed out that the birthday entry calculator was impossible to use. So I fixed this in the next round of revisions. Also, there clearly needed to be a larger display for artwork, as users were trying to tap to get a better view of the artwork. So I introduced the idea of a “detail page” for each piece of art, and added an option to share it as well. Also, it was not clear that the user could search for a particular child’s artwork by typing their name in the search field. Therefore, I decided to add better hint text “search for artwork by child or project.”

FINAL SCREENS

While I’m not a visual designer, I felt it was conceptually important for the colors of the web app itself to be neutral and muted. Children’s artwork is usually very colorful and the app would appear too busy if the interface were also colorful. Art galleries generally keep their walls white to best showcase the artwork. So that’s what I did, with a touch of color in the Totfolio logo to keep it playful.