Rapid7 Design Competiton
Rapid7 hosted a design competition for students passionate about web design, UX design, UI Design, and or user research. The prompt for this competition was, "Choose any website and redesign its home page to be more user-friendly/intuitive." Below you can find my competition entry. The original website can be found here.
Methods
Visual Designing in Adobe XD
Role
UX Researcher
UX/UI Designer
Visual Designer
Deliverables
Pixel Perfect Website Mockup
What I Changed & Why:
1. The layout of information
I think the top 3 reasons people visit a hair salon's website are to:
1. See if they like work of the hairstylists there
2. Check the prices of the salon's services
3. Book an appointment online or find the phone number to book an appointment
This prioritization is not reflected in the original site, so that is why I changed the layout. However, I kept the video at the top even though it pushes the samples of works and prices below the page fold. I feel that it captures the user's attention and taps into their emotions effectively. The video is upbeat, happy, and empowering, and that might make the user more likely to want to book an appointment with the salon.
2. The Previews of the Salon’s Services
I think that the current slider gallery is not the best option for viewing the eight services that [salon]718 offers. I switched to a grid layout because it makes it easier to see all of the options at once. However, I thought that seeing eight services looked a little cluttered. So, I decided to make four services be the default viewing option. If the user does not see what they are looking for in the first four options, then they can click the "SHOW MORE SERVICES" button.
3. The Testimonials Display
The testimonials are impossible to read. They transition off of the screen on a timer that is too fast. So, I added arrow buttons to allow the user to read the testimonials at their own pace. I also added a picture to keep the reader more engaged than they would be if they just saw a block of text.
4. The Locations Display
The locations section informs the user of the general location of each salon, but they have to navigate to another page to view the exact location. Moreover, once they click on a location, there is not an option to view the other salon locations from that page. The user has to look for it in the hamburger menu or navigate back to the bottom of the homepage. This workflow seems pretty annoying, so I decided to display the details about each salon's location directly on the homepage to eliminate any unnecessary clicks.
5. The Social Media Bar
This bar maintains its position on the far left side of the page as the user scrolls, so it blocks important buttons. I moved the social media bar to the page's footer because that is a popular design pattern I like. I also didn't think the bar was important enough to always be visible on the page.
6. The Hamburger Menu
There is a small amount of information in the hamburger menu so I displayed it in the header instead. This change makes the information more easily accessible, and it doesn't make the header look cluttered.
7. The Typos
The word "prospect" is misspelled as "propect" in the locations section at the bottom of the homepage, the page's footer, and in the hamburger menu. So, I corrected it to be "prospect" as in Prospect Heights.
In the welcome section, the locations are listed as "Clinton Hill, Fort Green - Dekalb Ave, Vanderbilt, and Dumbo." Throughout the rest of the website, the Vanderbilt location is listed as Prospect Heights, so I changed it to Prospect Heights in that section to keep things consistent.
8. The Font
When I was looking at the original website, I was really drawn to the font choice for "We Style Brooklyn" that is located towards the top of the homepage. It has more character and style than the rest of the text on the page. I was inspired to choose Baskerville as the font for my redesign because it is very legible but still has an engaging style to it.
Final Comments
This is not an exhaustive list of all of the things that I changed. It is a list of things I wanted to discuss to highlight my thought process while working on this project.
If I had the opportunity actually to redesign this website I would want to meet with the founder of the salon, Michaella Williams. I would ask her questions about her goals for the website to make sure my redesign still met her expectations and made her happy.