Jake is a passionate music enthusiast and the proud owner of a local guitar shop. With a lifelong love for music, he has dedicated himself to the world of guitars. Jake's shop is a hub for all things related to guitars, where he not only sells and trades guitars but also offers repair services. He also enjoys sharing his expertise with others by offering guitar lessons to his friends whenever they express an interest in learning.

Jake experienced a decline in foot traffic to his store following the pandemic, but observed an increase in online orders. To boost the traffic to his shop and cater to a wider audience, he decided to offer guitar lessons to the public. However, his existing landing page does not provide an option for customers to easily sign up for lessons online. They have to call or book in-store instead.

To enhance the reach and visibility of Jake's shop, Jake needs to provide a convenient way for people to learn about his lessons without requiring for phone calls or in-person visits.

This process will enable potential learners to access detailed information, sign up for lessons, customize their learning experience, choose instructors, select preferred time slots, and have the flexibility to opt for both in-person or online classes. This allows the staff to provide an inclusive learning environment for learners, regardless of their location or preferred learning style.

Research

Design

Prototype

Reflection

Figma

Jira

The Jira ticket tasks assigned to me require Jake's Guitars to add a Lessons page to their website, implement a sign-up flow for guitar lessons and create a style guide. By identifying and working on them, here are my key takeaways:

The lessons page on the website serves as a dedicated section where Jake's Guitars can showcase their new offering and provide comprehensive information about the guitar lessons they provide. The lessons page acts as a centralized source of information, educating potential learners about the value and benefits they can expect from Jake's Guitar Lessons.

By incorporating an online sign-up system, Jake's Guitars eliminates the need for users to visit the store or make phone calls to book their lessons.

As a company, establishing and maintaining a strong and consistent brand identity protects the brand's integrity and scalability. Having a style guide is a valuable tool for Jake's Guitars ensuring design consistency across various channels.

An existing competitive analysis was provided, highlighting the strengths and weaknesses of four major competitors. The analysis revealed that only two of the websites had a user-friendly sign-up process, which was a crucial consideration for me during the ideation and design phase.

Additionally, all the companies shared a common practice of offering discounts, which could potentially boost the sign-up rate and drive more traffic to the websites.

The analysis has emphasized the importance of simplifying the sign-up process as valuable tool for attracting and retaining users.

I began by conducting thorough research on current competitors on the provided competitive analysis, specifically focusing on businesses that offer lessons on a pay-per-lesson basis instead of a subscription model. Additionally, I analyzed websites that have information on their instructors, as this personal touch may enhance user conversion rates.

Based on the research findings, I created an informational lessons page dedicated to Jake's guitar lesson offering, aligning it with the existing company branding and using the established design system.

Throughout the design process, I maintain a strong focus on providing comprehensive information, including:

transparent lesson pricing

section about the instructors

availability of both online and in-person lessons

testimonials

a contact form

the benefits of learning from Jake's.

The focus of the design process is to create an intuitive and efficient sign-up process for users who want to customize their learning plan and schedule guitar lessons. I started by examining the user flow from the landing page to the checkout process. I implemented a progress bar to visually indicate the user's progress. Existing components and styles are utilized, and design principles like auto-layout are followed for consistency and ease of use.

My goal is to provide a quick and easy sign-up process with options for customization and the ability to schedule single or weekly guitar lessons in 30-minute time slots.

My focus of the design process is to create a cohesive style guide that aligns with Jake's Guitars' brand positioning in the marketplace. The style guide serves as a reference for design elements such as color styles, text styles, and images.

I paid careful attention to the following guidelines to ensure consistency with the provided brand information.

Color palettes are selected to evoke desired emotions and create a cohesive visual experience.

Guidelines are established for primary and secondary colors, as well as specific color usage for buttons, backgrounds, and texts.

Text styles are defined, including font choices, sizes, headings, and paragraphs that align with the brand's tone and readability requirements.

Guidelines for image selection, editing, and placement are also established to align with the company's values and aesthetics.

Overall, the style guide acts as a foundation for design decisions, maintaining a consistent visual language throughout the website while accurately reflecting Jake's Guitars' brand.

In the final step of the design process, I prepared the necessary files for a smooth handoff to the development team. This involves cleaning up all the screens and ensuring that the design assets are organized and ready to be attached to Jira or any project management tool used by the development team. I reviewed and polished each screen of the design, ensuring that all elements are properly aligned and consistent. I double-checked the spacing, typography, and any interactive elements to ensure they meet design specifications and provide a seamless user experience. Additionally, I created a high-fidelity prototype that showcased the interactions and transitions for better understanding.

Overall, this final step ensures a smooth transition from design to development, setting the stage for successful implementation and delivery of the final product.

During the project, I had the opportunity to enhance Jake's Guitars' online presence by adding a Lessons page, implementing a sign-up flow for guitar lessons, and creating a style guide. This experience helped me develop valuable technical and soft skills.

I demonstrated strong attention to detail by ensuring the lessons page contained comprehensive information and had an engaging layout. Similarly, I focused on the user experience while designing the sign-up flow, making it intuitive, efficient, and customizable. Attention to detail was crucial for maintaining consistency and delivering a polished final product.

Organization played a key role as I managed multiple tasks, such as designing the lessons page, implementing the sign-up flow, and creating a style guide. I prioritized tasks, created a clear plan, and maintained a structured workflow to meet project requirements and deadlines. This allowed me to deliver high-quality work within the allocated timeframe.

Efficiency was evident in my research on competitors' websites, which informed my design decisions. By utilizing existing design components and styles, I streamlined the design process and created effective solutions aligned with Jake's Guitars' goals.

Creating the style guide highlighted the importance of a strong and consistent brand identity. Defining color palettes, text styles, and image guidelines ensured design consistency across the website, reinforcing the brand's positioning. This experience deepened my understanding of branding's significance for business success.

Overall, this project provided valuable insights and learning experiences. I applied attention to detail, organizational skills, and efficiency to create a cohesive and user-friendly design. Furthermore, it emphasized the importance of maintaining a strong brand identity. Moving forward, I will carry these skills and lessons, aiming to deliver exceptional results while prioritizing user experience and brand consistency in future projects.