Craviotto
Craviotto
UX/UI
UX/UI
Overview
Craviotto has been in business for over 30 years and is world renown for making hand made custom drum kits and parts. Their drum kits are highly sought after due to specialized fabrication techniques that few in the world have mastered. For this project I wanted to modernize their website and add a shopping feature to buy products directly from the site, instead of using third party selling platforms such as Sweetwater and Reverb.
Craviotto has been in business for over 30 years and is world renown for making hand made custom drum kits and parts. Their drum kits are highly sought after due to specialized fabrication techniques that few in the world have mastered. For this project I wanted to modernize their website and add a shopping feature to buy products directly from the site, instead of using third party selling platforms such as Sweetwater and Reverb.
Programs Used
Programs Used
Overview
Craviotto has been in business for over 30 years and is world renown for making hand made custom drum kits and parts. Their drum kits are highly sought after due to specialized fabrication techniques that few in the world have mastered. For this project I wanted to modernize their website and add a shopping feature to buy products directly from the site, instead of using third party selling platforms such as Sweetwater and Reverb.
Programs Used
Final Prototype Desktop
Final Prototype Desktop
Final Prototype Mobile
Final Prototype Mobile
Final Prototype Mobile
Final Prototype Desktop
Process
Process
Process
Current Site Homepages
Current Site Homepages
Current Site Homepages
Information Architecture for Current Site
Information Architecture for Current Site
Competitive Analysis
Competitive Analysis
Primary User Task Flow
Primary User Task Flow
Personas
Personas
Wireframes
Wireframes
Main Menu
Main Menu
The organization of the main menu is based on taking the average from the results of a card sorting survey.
The organization of the main menu is based on taking the average from the results of a card sorting survey.
The organization of the main menu is based on taking the average from the results of a card sorting survey.
Mood Boards & Applied Moods
Mood Boards & Applied Moods
I created two mood boards to test which color palette and style users would like best for the site homepage. The first mood board is based on a modern concert approach, while the second is based on the traditional metal and wood found on drums.
I created two mood boards to test which color palette and style users would like best for the site homepage. The first mood board is based on a modern concert approach, while the second is based on the traditional metal and wood found on drums.
Survey Questions
Survey Questions
These are some key questions that helped to determine which style I would utilize in the final prototype. Based on the results, the modern concert style gained the most approval of users.
These are some key questions that helped to determine which style I would utilize in the final prototype. Based on the results, the modern concert style gained the most approval of users.
Original and edited Homepages
Original and edited Homepages
After further consideration, I decided to edit the homepage to make information more concise and add more white space to allow images to breathe. I simplified the logo to give a modern feel to the company, and added information to the footer that would be featured on an e-commerce website. I decreased image sizes to display more information above the fold and added a video instead of an image for the hero banner so customers can see the product in action.
After further consideration, I decided to edit the homepage to make information more concise and add more white space to allow images to breathe. I simplified the logo to give a modern feel to the company, and added information to the footer that would be featured on an e-commerce website. I decreased image sizes to display more information above the fold and added a video instead of an image for the hero banner so customers can see the product in action.
Style Guide & Effects
Style Guide & Effects
Final Pages
Final Pages
Drag the image to view more. Scroll down to see full page.
