Lidia Paints Site

Content

Research Insights

Design Process

Sticker Sheet

What I Learned

Next Steps

Key Research Insights

Client wants their site to be inviting, warm, and encouraging.

Design decisions:
Select a harmonious color palette favoring pastels and avoiding high saturation or visually heavy hues; allow substantial negative space to minimize mental load.

Client doesn't have a logo, and would like a custom design that fits seamlessly into the site and for it to incorporate her initials or name to aid in recognition.

Design decisions:
Use roundness to convey friendliness and approachability; incorporate brush texture to signal artist identity.

Client has a lot of courses to offer, and wants to make sure the site does not get cluttered and stays easy to navigate.

Design decisions:
Use interaction design to create engagement with the site; minimize clutter by revealing course descriptions on hover or focus state of course cards.

Mobile Design

Design Process

Building the Brand (Week 1)

Warm, pastel pink satisfies the clients brand identity as an inviting and encouraging art educator while earthy green creates balance as a secondary color for the site, drawing attention to CTA's and other visual elements.

The logo plays on the client's initials, L.J.O., but combines the J and O into a P to tie in her business identity "Lidia Paints." The client loved that she could use this as an identifiable signature for her artwork as well, unifying her art pursuits.

A round design and brush textures emphasize expressiveness over rigidity -- overcoming a stereotype often associated with professional artists and teachers.

Paper Wireframes & Main Flow (Day 6)

The client wanted to avoid boring forms in the course sign-up and checkout flow, so I sketched up an idea for building her form into an "affirmation" so that users can associate their sign up with a desired outcome.

The client loved the idea of collecting name and sign up information by having users fill in the blanks to their own affirmative statement.
‍
"I'm ______ and I can ____."

Comparative UX Audit (Week 2)

I audited 5 existing art course pages. Seattle Art Studio stood out for its simplicity and ease of navigation, so I adopted a similar layout.
‍
One issue I found in their page is that course information is hidden behind clicks, creating some friction when browsing.

In my design, you can learn about each course right from the landing page by hovering over each course card.

Interaction (Week 3-10)

The client wanted lots of creative details on each screen. I worked with her to create an animation, carousels, and to personalize the calendar, input fields, and legal page to fit her brand.

Sticker Sheet

Many of the course thumbnails are examples of the client's artwork or that of her students, while the rest of them are AI generated placeholders.

Eventually, the client will collect photos from each of the courses to replace the thumbnails. I will be able to quickly make the swap on my component page and make the update without disturbing the rest of the design.

Learnings

Agreeing on 2-3 words with the client that represent their brand and vision for their website goes a long way towards creating a design that the client is pleased with.

I learned not to shy away from iteration and client + user feedback. This website was created for myself, and even then I had to battle with my own changing desires and expectations. It is reasonable to be prepared for other clients to similarly need some flexibility to co-discover how to achieve their vision.

I used this design challenge as an opportunity to explore component states and variables in Figma and to learn how to leverage them to make the design process quicker, easier, and more manageable for potential dev handoff. I also explored resources in the Figma community library to speed up the design process and avoid reinventing the wheel - specifically for common forms such as checkout and account creation.

Next Steps

Logo Design

I may simplify the design by omitting the flowers, choosing one line type for the green cricle, and spening more time hand lettering the text features for amore consistent, replicable, and recognzable style.

Mobile Optimization

To make the best use of the mobile screen and improve legibility, I will implement a singe column layout. It will also free up real estate to swap out the tab bar for a hamburger menu and a smaller logo placed in the left corner of the screen.

Accessibility & Typography

Font choices prioritize style and limit legibility. They should be replaced with something like Inter. Text hierarchy needs clarifying to improve scan ability and screen reader use. WCAG audits are needed to ensure color contrast compliance.

Research Insights

Design Process

Sticker Sheet

What I Learned

Next Steps

Design Process

Building the Brand (Week 1)

Paper Wireframes & Main Flow (Day 6)

Comparative UX Audit (Week 2)

Interaction (Week 3-10)

Sticker Sheet

Learnings

Next Steps

Logo Design

Mobile Optimization

Accessibility & Typography

Let's make things that inspire and empower connection