I Heart Art

Pic of paint supplies on a table
Client
I Heart Art
Project Type
Interaction Redesign
Role
UI Designer
Project Year
2025
tools
Figma
Description

I Heart Art is an online learning platform for creatives of all mastery levels. Their design team brought me on board after they conducted some user research. Their study revealed that users were struggling with 3 user flows. I, however, was assigned to 1 specific user flow.
‍
My job was to evaluate the interactions within the flow, identify usability issues, and propose solutions. The final step being to revise the flow.

DeTAILS

Interaction Design - User Flow Redesign - Prototype Redesign - Usability Heuristic Evaluation

Problem

Problem Statement & Context
The project required us to evaluate the interactions within the flow, identify usability issues, and propose solutions. The final step being to revise the flow.
Project Goals:

Research & Key Insights

I wasn't provided any specific research/user feedback other than that many users were "struggling" with the flow.

I did execute a personal user test by attempting to complete the flow, to immerse myself into the problem.
Flow A
Original
The 1st usability flaw that we noticed was a bombardment of popups upon pressing the "Sketching 101" block. This is a violation of the usability heuristic principle "Aesthetic & Minimalist Design".
Our first solution was to get rid of the popups completely, or secondly, we could've tried to fit the popups into other areas of the screen to eliminate distractions.
We chose to get rid of the popups completely for now, since they were irrelevant to the reservation process. We did however, send suggestions on relocating the popups to other pages or sections.

The 2nd flaw we found was the absence of any type of cancellation or back-out method within the reservation process. This was a violation of the usability heuristic principle "User Control & Freedom".
Our obvious solution was to add some type of cancellation methods, so we did.
Heuristic Evaluation

Design Process

Original Flow P1Original Flow P2Original Flow P3Original Flow P4Original Flow P5Original Flow P6Original Flow P7Original Flow P8Original Flow P9Original Flow P10
We erased the frames with the popups. That left us with only the initial sketching classes screen and the reservation booking screen to start.

While adding exit buttons, we found that other flows actually used exit buttons already, so we just adopted the styling. We added the "circled x" icon to the top right corner of all the reservation popup screens.

There were again other flows using a back button, so we again adopted the styling. We added back buttons to the bottom of each reservation popup screen. We didn't add back buttons to the name/email screens since the user can simply retype the info.

Additionally, we did add a "Manage Reservation" button so the user can immediately change their reservation upon creation.
New Flow P1New Flow P2New Flow P3New Flow P4New Flow P5New Flow P6New Flow P7
The last step was the prototyping phase.
We erased all the original interaction connections, and redesigned all new ones, making sure to incorporate all the new elements we just added.

Solutions

Here is the finished design!
Flow A
Finished

Impact & Results

By revising this flow, we were able to improve overall usability.

By completing the Heuristic Evaluation, we can best assure that the website follows good interaction design.

Lessons & Next Steps

This project was a reminder to always be mindful of the 10 usability heuristics.
I also learned that you can adopt ideas from other sections of a page, rather than waste time thinking about how to design and style a new one.

The next steps will be to build out the "Manage Reservation" page and make it interactional to go along with the rest of the flow.
The other flows were finished by other teams, and now we will combine our work to construct an overall improved design.
Back to Top

Marcus Patterson Portfolio

Optimize Everything! Then Make It Look Good!

Created by Marcus Patterson