Moore Guitars
Moore Guitars
I redesigned the website https://www.mooreguitars.com/ in my vision, for mobile and desktop, to improve the user experience and visual cohesiveness!
This was for a UX final assignment where we were required to create 5 final high-fidelity for mobile and desktop.
I redesigned the website https://www.mooreguitars.com/ in my vision, for mobile and desktop, to improve the user experience and visual cohesiveness!
This was for a UX final assignment where we were required to create 5 final high-fidelity for mobile and desktop.
Goal
Increase the usability and the visual cohesiveness of the website
Goal
Increase the usability and the visual cohesiveness of the website
Tool(s)
Figma
Tool(s)
Figma
Timeline
5 weeks
Timeline
5 weeks
01
Brainstorming
Purpose of the Original Site
Sell guitars and various musical accessories/instruments to potential users of the site.
My Critiques
Appears congested and cluttered
Hero image doesn't have clear interactive elements
Visual hierarchy feels unbalanced - doesn't guide the user's eye
My Implementation Goals
Make the guitars that are being sold more prominent on the homepage
Add more spacing and hierarchical organization to the site
Place a clear call to action on the hero image that the users can interact with intuitively
01
Brainstorming
Purpose of the Original Website
Sell guitars and various musical accessories/instruments to potential users of the site.
My Critiques
Appears congested and cluttered
Hero image doesn't have clear interactive elements
Visual hierarchy feels unbalanced - doesn't guide the user's eye
My Implementation Goals
Make the guitars that are being sold more prominent on the homepage
Add more spacing and hierarchical organization to the site
Place a clear call to action on the hero image that the users can interact with intuitively
02
02
Lo-Fi Wireframes
Lo-Fi Wireframes
First, I created low-fidelity wireframes to demonstrate the layout changes I wanted to make to the site on desktop and mobile.
First, I created low-fidelity wireframes to demonstrate the layout changes I wanted to make to the site on desktop and mobile.
My Critique
Critique
What I Changed
Changes
Appears congested and cluttered
Appears congested and cluttered
Reduced nav bar pages and added spacing between all elements
Reduced nav bar pages and added spacing between all elements
Hero image doesn't have clear
interactive elements
Hero image doesn't
have clear interactive elements
Added button to hero image to direct user
Added button to hero image to direct user
Visual hierarchy feels unbalanced
- doesn't guide the a user's eye
Visual hierarchy feels unbalanced
- doesn't guide the a user's eye
Made the guitars being sold the main focus and put them in a carousel so the user could go through them
Made the guitars being sold the main focus and put them in a carousel so the user could go through them
Desktop
Desktop
Mobile
Mobile
03
03
Design
Design
The original site's color scheme was focused on greys and a forest green, with yellow as a highlight color. The aesthetic seemed more rustic in my opinion.
In the spirit of the assignment, I decided I wanted to reinvent the aesthetic of the site entirely. I came up with two distinct style tiles depicting the new aesthetics I was inspired to create for the site based on external research of other famous sites and my own brainstorming.
For this first style tile, I decided to rework the original's color scheme, rebranding the site to give it a fun, summer vibe, envisioning a person on the beach strumming their guitar while I designed. To do so, I used colors like a deep NAVY BLUE like the ocean, a VIBRANT PINK like a strawberry soda or ice cream, and finally a BRIGHT YELLOW like the sun as a highlight color.
Style Tile #1
The original site's color scheme was focused on greys and a forest green, with yellow as a highlight color. The aesthetic seemed more rustic in my opinion.
In the spirit of the assignment, I decided I wanted to reinvent the aesthetic of the site entirely. I came up with two distinct style tiles depicting the new aesthetics I was inspired to create for the site based on external research of other famous sites and my own brainstorming.
For this first style tile, I decided to rework the original's color scheme, rebranding the site to give it a fun, summer vibe, envisioning a person on the beach strumming their guitar while I designed.
To do so, I used colors like a deep NAVY BLUE like the ocean, a VIBRANT PINK like a strawberry soda or ice cream, and finally a BRIGHT YELLOW like the sun as a highlight color.
Style Tyle #1
For the second style tile, I came from a retro angle based on my love for old school video games and arcades, most evidently seen in the font styles I used. I was also inspired by the electrics tab of the site to emphasize the electronics the site sells with this tile, focusing on a technological aesthetic by using colors such as a DEEP BLACK for the background and an ELECTRIC PURPLE and BRIGHT ELECTRIC GREEN as secondary colors.
Style Tile #2
For the second style tile, I came from a retro angle based on my love for old school video games and arcades, most evidently seen in the font styles I used. I was also inspired by the electrics tab of the site to emphasize the electronics the site sells with this tile, focusing on a technological aesthetic by using colors such as a DEEP BLACK for the background and an ELECTRIC PURPLE and BRIGHT MINT GREEN as secondary colors.
Style Tile #2
I then conducted an A/B test comparing the style tiles with a user base of students from my class, interviewing them on which they preferred and recording their responses.
Based on this test, I chose Style Tile #1 as the aesthetic for the final high-fidelity product as more than 50% of the participants voted for it.
Many asserted that they preferred Style Tile #1 because it suited a fun music site better, and that they would be more likely to buy from a site with that aesthetic.
I then conducted an A/B test comparing the style tiles with a user base of students from my class, interviewing them on which they preferred and recording their responses.
Based on this test, I chose Style Tile #1 as the aesthetic for the final high-fidelity product as more than 50% of the participants voted for it.
Many asserted that they preferred Style Tile #1 because it suited a fun music site better, and that they would be more likely to buy from a site with that aesthetic.
04
04
Final High-Fidelity Product
Final High-Fidelity Product
These are my final redesigns, including 5 high-fidelity wireframes for mobile and desktop respectively.
These are my final redesigns, including 5 high-fidelity wireframes for mobile and desktop respectively.
In addition to my initial changes, I added, to the top right of the site, a music player. This player would automatically play a song being played by an instrument being sold at the store. The goal of this addition was to add to the fun, summer energy of the site and give users an idea of what the instruments at the store sound like.
In addition to my initial changes, I added, to the top right of the site, a music player. This player would automatically play a song being played by an instrument being sold at the store. The goal of this addition was to add to the fun, summer energy of the site and give users an idea of what the instruments at the store sound like.
Desktop
Desktop
Mobile
Mobile
