top of page
caraschleckerketter website_ss.jpg

caraschleckerketter.com
responsive website design

OVERVIEW

A Responsive Website for the Violinist, Cara Schlecker Ketter

Project Goal: Craft a responsive website for Cara Ketter that showcases her performances and allows Users to book violin lessons with her and/or hire her to play for an event.

Target Audience: Aspiring violinists and anyone who wants to book her to play for an event.

 

Website Features:

  • Performance: Immerse yourself in the beauty of Cara's music through the "Performances" section, featuring highlights from her captivating solo and ensemble performances. Explore stunning visuals and engaging descriptions, and get a taste of her dynamic stage presence.

  • Instruction: Discover Cara's dedication to nurturing the next generation of violinists in the "Violin Lessons" section. Learn about her teaching philosophy, experience, and qualifications, and see why students of all ages thrive under her guidance.

  • Gallery: Be captivated by a visual journey through Cara's career in the "Gallery" section. Browse professional headshots, performance photos, and tour images, gaining a deeper insight into her artistic world.

  • Engagement: Stay connected with Cara and her latest endeavors through the "News / TV" and "Videos" sections. Discover media features, upcoming performances, and educational resources, and keep up with her musical journey.

  • Booking & Contact: Easily connect with Cara for performance or lesson inquiries through the user-friendly "Book / Pay" and "Contact" sections.

Responsiveness at its Core: The website will adapt flawlessly to any device, from desktop screens to tablets and smartphones, ensuring a consistent and delightful experience for busy adults on the move.

Outcome: Whether you're seeking an exceptional violinist for your event, a dedicated teacher to guide your musical journey, or simply an appreciation for beautiful music, caraschleckerketter.com is your gateway to the artistry of Cara Schlecker Ketter. Explore, engage, and be inspired.

ROLE
User Research, Wireframing, Interaction, Visual design, Prototyping & Testing, Publisher

DURATION
2021

User Research: Pain Points

low res artwork example.png

Low-quality images

Users may encounter low-quality images or poorly lit photographs that fail to capture the true beauty of the musician.

0_YvY3ZzJ-snnD3gdI.png

Cluttered

Users may find the website difficult to navigate due to a confusing or cluttered layout.

Screenshot 2023-12-22 235332.png

Loading Time

Users may experience frustrating page loading times or broken links that hinder their browsing experience.

Using Mobile Phones
Form

Methods

  • Conducted online surveys with violin enthusiasts

  • Analyzed user feedback from existing online violinists sites

UX

Findings

  • Users want high-quality images and videos.

  • Users want to learn about the history of the violinist.

  • Users want a website that is easy to navigate and use.

Outdoors Meeting

Recommendations

  • Create a diverse collection of music videos.

  • Use high-quality images and provide detailed descriptions of the events she played.

  • Make the website easy to navigate and use.

User Research: Summary

Goal: To understand the needs and expectations of potential users of the website.

Digital Wireframes

Cara Ketter_Artboards_XD.jpg

Low-fidelity Prototype

Cara Ketter_Wireframe.jpg
1000_F_306323506_ysONIxBDM6DmBYafFouimw8HVSp0oRTc.jpg

Study Type

Unmoderated usability study

vector-map-pointer-gps-icon.jpg

Location

United States - Remote

cf37b1a674bd04c4b9d53651a462c3b8.jpg

Participants

Five participants

826165.png

Lengths

20-30 minutes

Usability Study: Parameters

Online shopping

Usability Study: Findings

checkout.png

Checkout

Users wanted to make sure the Checkout process for paying for a lesson or booking her for an event

was seamless.

Mockups: Desktop screen size

caraschleckerketter website_ss.jpg

Mockups: Screen size variations

Screenshot 2024-02-13 171239.png
Screenshot_20240213_160647_Chrome.jpg

Going beyond the desktop, I optimized my mockups for mobile and tablet users based on my initial wireframes. On mobile, a sleek slide-in menu replaces the desktop navigation, and larger buttons ensure effortless browsing and purchasing. Tablet users benefit from a reorganized layout that prioritizes product visuals and descriptions, encouraging them to explore the catalog further.  By tailoring the experience for each device size, I aim to ensure a smooth and enjoyable shopping journey for all users.

Controller Device
Typographic-Scale-Tool-How-To-Pick-Fonts2.jpg

Headings

I used headings with different-sized text for a clear visual hierarchy.

What-is-an-Alt-Tag.png

Alt Text

I designed the site with alt text available on each page for smooth screen reader access.

Accessibility Considerations

Liquid Drop

Impact

Our target users shared that the design was intuitive to navigate through, more engaging with images, and demonstrated a clear visual hierarchy.

Traditional Library

What I Learned

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when producing with design ideas and solutions.

Takeaways

cf37b1a674bd04c4b9d53651a462c3b8.jpg

Follow-up

Conduct follow-up usability testing on the new website.

1000_F_306323506_ysONIxBDM6DmBYafFouimw8HVSp0oRTc.jpg

Identify

Identify any additional areas of need and ideate on new features.

Next Steps

bottom of page