Case Study: SketchIt App

The Problem:

As an artist, I find inspiration from the environment and events around me. I find myself having to quickly jot down new art ideas on my notes app on my phone. It has now become a long and disorganized list with several inspiration pictures lost in my photo library. I would have to scroll and search for specific ideas and inspiration for future projects.

The Solution:

The SketchIt app consolidates art ideas into organized categories. I wanted a place to keep my ideas and refer back to them easily without the hassle of searching for specific ideas or pictures. The app also allows me to never lose an idea in the spur of the moment due to accessibility and the ease of using the app.

The User:

The user would be any creative individual from a beginning artist to the experienced artist or someone who just needs a place to make the first step in creating something.

I researched other apps that have a similar idea to the SketchIt and found that they were complicated and too broad at first. I decided that simplicity was important for the design of this app for the best user experience. The format and layout of this app can be used for other forms of art and creative field, but I decided to focus on the subject of visual arts since it is a problem that I face in my day to day life. Especially as an interdisciplinary artist, this app is the best way to keep track of ideas and access them for the future.

The Goals:

  • Organization
  • Easy to Use
  • Delightful to Use

I have included an image of my preliminary notes when starting the project. I had to state the problem, solution, user, and the thoughts behind the user experience design in order to understand the constraints and focus on the efficiency of the app. I wanted to create as few screens as possible for easy use without compromising the important needs of the user. I proceeded to sketch out the wireframes and ideas behind the UX to organize my thoughts. Using Sketch, I created the wireframes in grayscale to ensure the usability of the app. From the wireframes, I was able to map out the flow of the app as well.

The UI Design:

I wanted this app to show confidence, professionalism, and creativity as well as excitement, delight, and playfulness. In order to do this, I chose a font that exemplifies classiness and professionalism for the headers. Pulling inspiration from an organization app called Wunderlist, Android’s Material Design, and the UI of the Google Calendar app, I chose colors and created custom illustrations to bring enjoyment to the user and a feeling of excitement when adding a new idea. I chose to use cards as a form of organizing the different art media because it is a well known and easy to use concept of design that every user is accustomed to.

The UX Design:

As mentioned above, the UX experience is what makes the app important and enjoyable to use. Creating wireframes was the best way for me to test out the flow and usability of the app design. I made some tweaks here and there to accommodate for the UI design decisions while also making sure that the necessary functions were still there. Fitt’s Law is an incredibly important concept to me as it accentuates the user’s comfort in thumb placement on the phone. That is why the green “create button” is in the most accessible area of the screen. The yellow “favorite button” is also in a relatively accessible area since it is a screen that will be used a lot. The back button is in the most unaccessible area according to Fitt’s Law because I wish to implement a “swipe back” function for easy access. I would also include a “press to rearrange” function for user preference and a “swipe to delete” function. There is also an organization button that allows you to choose “A to Z,” “Z to A,” “New to Old,” or “Old to New.”

Screens:

These screens are the Splash Page and the Home Page for the SketchIt app. The numbers on each medium represent the number of ideas in each category. The “press to rearrange” function would work on the home screen for the preference of media of each user. The different media in the app include Drawing, Painting, Sculpture/Pottery, Photography, Mixed Media, Printmaking, Design, Installation, Video, and Other.

These screens, from left to right, are the screen for the particular medium (in this case drawing), the screen for the particular idea, and the screen for creating a new idea. The user is able to choose the order in which the ideas are shown or choose to use the “press to rearrange” function. Each idea can be deleted by swiping it to the left. The ideas can also be put into the favorites list by touching the star button under the date the idea was created. Each idea can include text, sketches drawn directly on the phone for instant idea-capturing, and images for inspiration uploaded from the photo library. This is the best way to consolidate an idea without missing anything.

These last two screens are the list of favorite ideas and the search screen. The Favorites Page is a way to keep relevant ideas easily accessible to the user while also allowing different arrangements (alphabetically, date created, or “press to rearrange”). The search page is also a way to type in keywords if a particular idea is needed instantly.

Were the goals met?

  • Organization: From the different media categories to the multiple ways of capturing one idea such as text, sketch, and image, this goal is met.
  • Easy to Use: By minimizing the number of screens and ensuring UX simplicity, this goal is met.
  • Delightful to Use: With the bright colors and flat design illustrations as well as the decision of the fonts and layout of the design, this goal is met.

Custom Illustrations for Each Medium

These are the illustrations created in Sketch that are included in the app. I gained a lot of inspiration from the illustrations found in the Google Calendar app as they are appealing, relevant, and in line with the current design trends.

These are the illustrations for Drawing, Painting, Photography, Pottery/Sculpture, and Mixed Media.

These are the pencil and pen sketches for each of the illustrations.

Comparison:

These two screens are the UI of this app that I created a several months ago. This was before I understood UI/UX design. Since then, I have learned a lot about UI/UX design, and I am so happy to be making progress!

Thank you for reading this case study. I can’t wait to share more with you!