KIESEL GUITARS RESPONSIVE WEBSITE REDESIGN
UX/UI DESIGN, RESPONSIVE WEBSITE reDESIGN
TL;DR
Problem: Kiesel Guitars has a website that looks and feels so out of date that its poor design is turning off potential new customers and losing them sales.
Solution: Based on research and testing, I overhauled the information architecture and gave the site a modern (and responsive) visual makeover, making the site more inviting to use and the checkout process much more intuitive.
Solution: Based on research and testing, I overhauled the information architecture and gave the site a modern (and responsive) visual makeover, making the site more inviting to use and the checkout process much more intuitive.
REDEFINING A CUSTOM GUITAR BUYING EXPERIENCE
Kiesel Guitars’ website does not reflect the elegance and sleek style of the custom guitars they make.
In order to make the website more modern, appealing, and brand-congruent, an overhaul of the information architecture, visual hierarchy, and UI design was needed.
Thus, as part of an assignment for my design bootcamp, and backed by my passion for guitars being a musician and composer myself, I embarked on a responsive redesign of Kiesel’s site.
Where are people getting stuck/confused in the guitar search and checkout processes?
In order to make the website more modern, appealing, and brand-congruent, an overhaul of the information architecture, visual hierarchy, and UI design was needed.
Thus, as part of an assignment for my design bootcamp, and backed by my passion for guitars being a musician and composer myself, I embarked on a responsive redesign of Kiesel’s site.
Where are people getting stuck/confused in the guitar search and checkout processes?
KIESEL'S SITE: BEFORE
The current Kiesel website has many issues:
• An overwhelming amount of text with no clear call to action which confuses the user flow and results in a lack of clear direction
• The “quick links” section contains so many links that it’s hard to know what to click on
• Font and color choices plus low quality images make everything feel out of date
• Search feature looks like a Google search and not integrated within the site’s design, therefore feeling incongruent with the Kiesel brand and user flow
• The “quick links” section contains so many links that it’s hard to know what to click on
• Font and color choices plus low quality images make everything feel out of date
• Search feature looks like a Google search and not integrated within the site’s design, therefore feeling incongruent with the Kiesel brand and user flow
UNDERSTANDING THE NEEDS OF A GUITAR PLAYER
In order to best understand how to approach this redesign, I first needed to understand the online guitar shopping experience (especially for custom guitars).
The initial research phase for this project consisted of:
• Competitive analysis of other guitar/music websites
• Usability testing of the existing Kiesel website
The initial research phase for this project consisted of:
• Competitive analysis of other guitar/music websites
• Usability testing of the existing Kiesel website
USABILITY TESTING to understand pain pointsI asked participants to walk through the process of finding and customizing any guitar of their choice, as well as finding a specific model of guitar.
This test aimed to reveal where potential pain points in the current information architecture might lie as well as gauge overall impressions of Kiesel’s site design.
This test aimed to reveal where potential pain points in the current information architecture might lie as well as gauge overall impressions of Kiesel’s site design.
4 TEST
PARTICIPANTS
Four people participated in the initial usability test
REMOTELY
TESTED
Tests and interviews were conducted remotely
GUITAR
PLAYERS
All participants are guitar players; one owns 3 Kiesel guitars
KEY RESEARCH INSIGHTS“I would love to custom order a [Kiesel] guitar, but the site just invokes so much mistrust. I feel they'll use my credit card for nefarious reasons.”
- A frustrated usability test participant
This initial research phase revealed some key insights:
- A frustrated usability test participant
This initial research phase revealed some key insights:
- 100% of usability test participants commented about Kiesel’s confusing and overwhelming UI
- Similarly, many comments were made about the design of Kiesel’s site feeling very outdated
- A few participants said that feeling inundated with the amount of text and the outdated nature of the site would have made them leave the site immediately if they were browsing on their own terms
- Most participants felt unsure how to proceed with Kiesel’s existing guitar checkout process, and one participant didn’t even know how to add the guitar to their cart
- However, the one participant who was a previous Kiesel buyer said that most people go to the site knowing exactly what they want and know that they will be able to customize many aspects of the guitar since they’ve seen the Kiesel brand elsewhere (e.g. YouTube videos from other Kiesel owners)
KIESEL 2.0: RE-ORGANIZED AND VISUALLY OVERHAULED
This test phase validated that users felt confused by the layout and information architecture of the existing site.
Users also did not immediately realize that the only way to add a guitar to their cart was to custom-build it from a base model.
In other words, users felt frustrated by the design and layout of the site to the point where they would leave the site and not make a purchase if they were browsing on their own terms.
Users also did not immediately realize that the only way to add a guitar to their cart was to custom-build it from a base model.
In other words, users felt frustrated by the design and layout of the site to the point where they would leave the site and not make a purchase if they were browsing on their own terms.
How can we redesign this website so that it is easier to navigate and purchase a guitar and thus reduce the bounce rate?
PERSONAA persona was created of a passionate musician who does not currently own a custom guitar but hopes to expand his studio soon and build his personal brand as an artist. He wants to see his custom guitar options clearly and browse a site with ease without feeling overwhelmed.
SITEMAP AND INFORMATION ARCHITECTURE OVERHAULIn order to address Tiago’s needs, cleaning up and adding clarity to the organization of the information felt like the first key step in this redesign process. I drafted up a new site map and created some user flows.
EMPATHY FOR ENGINEERSIn order to address the needs of Kiesel’s users as well as the engineers that might be implementing this new site design, I later went back to draft up a data flow diagram which outlines an initial idea for how the data might look like when searching for a guitar on the products page. Doing this will ideally help any web developers take the guesswork out of designing how the data should be handled internally as well as displayed in the browser.
A VISUAL MAKEOVER
Based on the data gathered from the research phase, the goal of a visual redesign was:
• Minimize overwhelm by reducing the amount of information displayed on screen
• Add more clarity to certain sections/processes (such as searching for a guitar)
• Ensure that there was a clear and consistent visual hierarchy with the choice of fonts/spacing/colors/etc.
• Support various screen sizes (since Kiesel does not currently have a mobile responsive version of their website)
• Minimize overwhelm by reducing the amount of information displayed on screen
• Add more clarity to certain sections/processes (such as searching for a guitar)
• Ensure that there was a clear and consistent visual hierarchy with the choice of fonts/spacing/colors/etc.
• Support various screen sizes (since Kiesel does not currently have a mobile responsive version of their website)
LO-FI WIREFRAMESI started by creating sketches on paper, and then turned those into lo-fi digital wireframes. These low fidelity greybox wireframes allowed me to lock in the visual hierarchy, layout, and typography first:
UI MOCKUPSGiven that I was doing a complete visual overhaul, a few UI/visual explorations were created to figure out the color scheme and visual direction (based on feedback, I decided to move forward with the first design style):
HI-FI UIThe visual style was then implemented into high fidelity wireframes for some key pages in both the desktop and mobile versions of the site. Special attention was paid to ensure that designs fit within a grid system and had consistent spacing between elements.
UI KITWith the v1 hi-fi UI complete, I created a UI kit for this new visual style so that a new design system could start to be established.
TESTING THE NEW DESIGN
From here, usability tests were performed on the new design to see if users felt like there was more clarity when accessing information, navigating the site, and getting to the checkout process.
A semi-interactive prototype was created using Invision.
A semi-interactive prototype was created using Invision.
View Web PrototypeView Mobile Prototype11 TEST
6 WEB
In-PERSON &
11 TEST
PARTICIPANTS
Eleven people participated in the hi-fi UI test
6 WEB
5 MOBILE
There was a roughly even split of people testing web vs. mobile
In-PERSON &
Online
Tests were performed in-person or online with live screen share
TASKS
- “From the home page, please walk through the process of comparing two guitars and going to the comparison page.”
- “From the home page, please walk through the process of getting to the White Aries guitar product page.”
- “Any additional thoughts/comments regarding any of the tasks?”
FINAL THOUGHTS AND NEXT STEPSOverall I think this is a solid path forward for Kiesel’s website redesign. I will be reaching out to them directly to show them my final project and this case study to explore the opportunity for an actual collaboration to implement these designs.
Given how confused people were in the initial round of testing, and given that my UI redesign was received much more positively, there is a significant opportunity here to help them upgrade their business and online presence.
In the future, I will be making an effort to ensure my tests are more inclusive and represent a wider range of demographics, such as gender and age range. Additionally, I want to make sure my designs are accessible so I’m meeting the needs of people of all kinds of ability.
The high fidelity UI usability test I performed had a fairly even balance of gender, but my initial round of testing was only performed by participants who identified as male. A broader range of perspectives and experiences will result in a more complete and inclusive design.
Future iterations on this project would include creating wireframes and the high fidelity UI design for the rest of the website, iterating upon the custom guitar builder feature, and running further usability tests to iron out any other hiccups in the site navigation/checkout flow.
Given how confused people were in the initial round of testing, and given that my UI redesign was received much more positively, there is a significant opportunity here to help them upgrade their business and online presence.
In the future, I will be making an effort to ensure my tests are more inclusive and represent a wider range of demographics, such as gender and age range. Additionally, I want to make sure my designs are accessible so I’m meeting the needs of people of all kinds of ability.
The high fidelity UI usability test I performed had a fairly even balance of gender, but my initial round of testing was only performed by participants who identified as male. A broader range of perspectives and experiences will result in a more complete and inclusive design.
Future iterations on this project would include creating wireframes and the high fidelity UI design for the rest of the website, iterating upon the custom guitar builder feature, and running further usability tests to iron out any other hiccups in the site navigation/checkout flow.
