Welcome to Artify

My second project in the Google UX Design Certificate Program is a responsive website.

The website is designed to host a wide range of art tutorials. It features extensive options that serve all skill levels and ages and provides educational opportunities in many mediums and artistic styles.

Project Overview

February 2023 - August 2023

The problem:

Our users wanted access to a wide range of materials, but didn’t want to waste time looking at projects that didn’t match their interests.

The goal:

We wanted to make it easy to narrow down tutorials by level, art type, and age group so that users could spend more time on the project and less time searching.

The process:

As a student, I was the lead for all aspects of this project prior to the handoff to engineering.

My responsibilities included initial research, wireframing, mockups, prototypes, and user testing.

Research Summary

Using the user biographies provided by the Google UX course, I selected four that seemed likely to use an art tutorial website. I conducted “interviews,” taking notes on how these users might feel and respond to my research questions.  The research was necessarily limited by the researcher’s imagination based on these biographies.

I focused my designs on a persona named Irene, who teaches art in her fifth-grade classroom and needs a website that will provide a wide range of ideas that she can modify for the needs of her students.

Users expressed frustration with trying to navigate websites that have pop up and other ads that block the view of content.

Users struggled with taking material presented and adapting to use with other ages of artists.

Some users were overwhelmed when trying to select a project and wanted something to help direct their choices.

Prior to creating information architectures and paper wire frames, I also conducted a competitive audit of five websites that host art tutorials, including both direct and indirect competitors for my project.

Irene’s User Journey

Irene’s user journey showed potential for pain points related to information overwhelm and whether information about the tutorial is presented clearly and accurately. Because of this, I wanted to create something that narrows the options to a more manageable, focused number of offerings.

Paper and digital wireframes

Based on the results from my user research and competitive audit, I developed the information architecture for the website and created my initial designs.

First User Study

In the first user study conducted on my low-fidelity prototype, I wanted to find out whether users could locate a tutorial and understand the flow of information on that tutorial page. In addition, I asked them whether they could find their saved tutorials.

  • Users struggled to get started and many could not locate the tutorial categories.

  • Users were not sure whether they had reached the correct tutorial, partly due to unclear placeholder graphics.

  • Users found the tutorial page clear and intuitive.

  • Most users were successful at finding the saved tutorials

Color Mockups

Updating the design

The next steps included creating the high fidelity prototype and mockups for a mobile screen.

Home Page for Mobile

For the home page, updating the layout for mobile included recreating the header and footer so that the text buttons allowed for finger-press selection.

I also update the alignment of the tutorial links so that there was additional negative space to prevent users from accidentally selecting the wrong tutorial.

Next steps

  • Next, I will run a usability test on the high fidelity prototype. Information we want to know includes whether users find the newest version of the “categories” page intuitive.

  • In the website’s current form, I am still using generic stock photos and the tutorials are still labeled generically, so including final versions of content is one of the next important steps.

  • Additionally, I will build the mobile and tablet versions for every page; at the present, I only have a homepage created for each of those.

conclusions and moving forward

  • accessibility

    Some of my accessibility considerations included contrasting colors, text labels to allow use of screen readers, and both text and video options for each tutorial.

  • impact

    My art tutorial website provides a wide range of tutorial options for diverse abilities, ages, and styles. It allows users to quickly narrow down the categories that interest them so that they can spend less time looking for ideas and more time creating art.

  • what i learned

    Throughout the design and testing phases of this project, I learned that though there are many ways to organize large amounts information, what seems logical to me isn’t necessarily logical to the majority of users. This means that multiple iterations and user studies are necessary to create a usable, enjoyable end result.