Public Arts Collective

What's the problem to solve?

Design a responsive art class website to help users discover and book courses online or in-person through a single, streamlined ordering flow.
Targeting art hobbyists and new artists trying to develop additional skills.

What does success look like?

Everyday is an opportunity to learn something new. But with the chaos of everyday life it’s hard to set aside time to work on a new skill. What if there were a service that helped suggest new and continuing content to fit your learning needs, whether you require hands-on attention or the flexibility of remote learning.

Contributions

Lead UX Designer/Researcher
tasked with creating the art course website from concept to final product.

The Process

Grayed out Prototype: Low Fidelity + User Testing

Grayed out Iteration: High Fidelity + Mockups

Site Map

Set out the basic elements for the Web layout and ended up making paper wireframes with the first 2 pages in mind.
'Art Classes' and 'Checkout Cart' are the main focus of this project

Paper Wireframes

Brainstormed 5 options for the layout of the home screen and ended up making a digital wireframe that combined parts from designs “A” ,"B" and “D”

Grayed out Ideation: User Flow + Wireframes

Low-Fidelity Prototype

The initial low-fidelity prototype focused mainly on the user flow of finding a new art course, adding it to cart, and entering payment details. The basic navigation elements were implemented with more attention on function and lesson their relative size on the desktop page.

View the first pass prototype here
Low-fidelity prototype

Usability Studies

Homepage Before Study

Early designs were too large when scaled for a desktop. Images and click targets were wide ranging and text drew focus unevenly, resulting in uncertain areas for the user to focus.

To address this, unnecessary text was removed and elements were scaled to fit within a more narrow band. Additionally, weight was given to the top of the page, helping the user easily pan through the site.

Checkout Before Study

The second main shift in the design was in the checkout flow.

Initially it was a single page to fill out payment info, but after user confusion in several tests we moved to a 3-stage checkout complete with indicators of past present and future steps.

These indicators helped users focus on the task at hand and set an expectation of the amount of additional info they would need to give.

1. Trouble noticing cart update when adding classes
2. confused by checkout order/button placement
3. Missed content below the fold/additional search options

High-Fidelity Protoype

The final high-fidelity prototype re-aligned elements to make more efficient use of space above the fold. It also presented clearer checkout flows for adding a class to your cart and entering payment info.

Try out the high-fidelity prototype below!

Mockups

Created a final mockup showcasing the breadth of the experience created, highlighting the use of similar elements to reinforce the sense of cohesion between the various scenes

Accessibility

Going Forward

Takeaways

In this project I learned that an overly simplified flow can lead to greater confusion and that color combinations evoke connections that are hard to break. The most difficult decisions came about when looking at navigating initial designs on new form factors. The right solution for one screen wasn’t always the right solution for another.

Next Steps

< Back to all Projects Cooking App Case Study Board Game Redesign Website Update Project

Want to get in touch?

For discussions about my work or any future projects feel free to reach me at coreyuxdesign@gmail.com

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.