Draw with Leo

Concept creation

Goal

Create an app that teaches kids to draw

Methods

Low fidelity, mid-fidelity wireframes

Contributions

Explored multiple ideas to inform direction of app
Created low and mid fidelity mockups using illustrator and Adobe XD.

Overview

Working with a very early stage startup I created several UI directions for the drawing app to test the validity of each idea.

The Libby App update offers:

Step by step tutorials for kids to learn drawing skills
Ability to take a picture and save drawings
Sharing and recording features
Customization of drawings

The Process

UI Exploration

I worked with the founder to quickly put together UI mockups to test different ideas.

Low fidelity designs
Mid fidelity designs
High fidelity designs

1.0 Low Fidelity Designs

Discovery

During this stage we were working out the functionality of the app. We started with the basic idea that we wanted to help kids learn to draw.

Flow

This screen shows a user going to their "Art Cubby" and starting a new drawing. They can choose to draw something from a specific category.

Ideas

We entertained the idea of having a separate portal for parents to see their children's work. We also thought about how users could customize their drawings.

2.0 Mid Fidelity Designs

Discovery

In this stage I started to create the branding and develop the look for the web app.

Instructions and Options

The development team decided that the app should act as a guide while the user drew on paper. We realized the user needed more guidance. These screens show how the user is instructed while drawing. They can also print out a page for a guide.

Customization and minimal look

In this screen it shows how a user might customize a drawing.

3.0 High Fidelity Designs

Discovery Validation

Here we refined the look and function of the app. We decided to focus on the website first. We also included a feature for kids to record stories about their drawings.

Main Page

Here users are introduced to the app, and can choose what they would like to draw.

Drawing Guide

Once users have chosen a drawing they can customize it using preset images. The app shows them step by step instructions for how to draw the cartoon. Users copy the picture on a separate drawing surface.

Finished!

Once the user has gone through all the steps they can take a picture of their drawing to upload to their profile. They can also record a story, draw the cartoon again, or choose a new drawing.

Pictures and Recording

In these screens a user can take a picture of their drawing and record a story about it.

Limits & Challenges

Limitations

Limited testing- I was not able to conduct user testing on these designs. The founder ran usability tests. With limited information about the tests, it was challenging to see how they should inform the design.

Challenges

Frequent changes- The founder had many ideas about the app functionality. In this process the designs changed many times.
Kid friendly- It was a challenge to make a fun kid-friendly design. Bright colors made it look more appealing. Larger icons and buttons help for kids who may not have full dexterity in their hands.

Results &
Reflections

The project evolved quite a bit during the time I was working on it. Although I was in charge of the UI, looking back, more work should have been done up front to work out the UX and user flow before the UI was developed. Some rounds of user testing would have eliminated confusion early on.

Results

The user flow and UX should be developed before the UI
User testing is important to validate decisions made when developing a new product
User testing should inform decisions about what features to develop.