Design Specification - sheared-sasquatch/sparkclips GitHub Wiki
Problem
Haircuts are a key part of every man’s grooming habits. According to Modern Salon’s 2015 Men’s Grooming Study, the average time between haircuts for men is between 3.8 to 5.1 weeks (Soble, 2015). According to our research, men don’t use the same barber every time they get a haircut. They often do not remember exactly what the barber did for them last time, and have a hard time understanding everything that is involved with determining, defining and communicating the haircut that they want.
One of the fundamental issues that men have with getting a haircut is that they do not know what they want. The majority of men that we talked to during our research did not know how to determine what hairstyle would look good on them or even what hairstyles they should try out. There are a very large number of men’s hairstyle currently available and new ones are being created every year. According to Men’s Hairstyle Trends, “Young men are willing to try something new each time they visit the barbershop in hopes of standing out amongst the crowd” (“Men’s Hairstyles 2017”, 2016). The efficacy men feel towards their hairstyle is in some cases being throttled not because of a lack of development in men’s fashion, but because of a lack of knowledge about men's fashion as it relates to hair.
Another issue that men have when it comes to haircuts are that they have a difficult time communicating to their barber the type of haircut they want. In our research, we found that men are not very familiar with the terminology used to describe a haircut. In addition, the exact meaning behind the terminology varies from barber to barber. Additionally, men have trouble remembering what was done on their last trip to the barbers, let alone what the barber did four months ago that they really liked and want to go back to. Finally, barbers may not explain exactly what they did for a haircut. It is hard to capture and remember every little detail when barbers add their own touch of inspiration or have varying interpretations of the look a customer loosely described.
Current solutions to the problem are incomplete or not engaging. “Hudson’s guide” is one of the first links to appear on Google when searching for haircut resources for men. The guide has excellent descriptions of several general haircut styles but does not provide any more than a few illustrations to show generally what the haircut looks like. This sort of content while useful could be difficult for men to utilize because they cannot see actual people with actual haircuts that they themselves might want. MensHairstyleTrends.com on the other hand provides rich visualization and context for their haircuts through photos of models, but haircuts lack more detailed knowledge about how to determine if the haircut is right for a given person, and how to ask for and describe it to a willing barber.
According to multiple informants, along with our own research, men would benefit from having a way in which to learn about terminology, determine suitable haircuts, and how to communicate effectively in order to get the haircut they want every time they visit a barber.
Solution
In order to solve the problem outlined above, we designed a responsive webpage named Spark Clips that will make the total haircut experience easier for men. The Spark Clips webpage has three main functions; 1) inform users about key information they need to know prior to getting a haircut, 2) provide detailed information about different hairstyles, and 3) provide a database where users can store detailed information about past haircuts.
Need To Know
The Need to Know section (Figure 1) is a repository of information. It is a collection of key concepts that every male should know before walking into a barber shop. It is a primer document that lays out the key concepts without diving into excruciating detail. It is meant to be concise but informative.
We encourage our users towards this section by making it the very first link in the navbar (when reading from left to right). Although not a strict requirement, we would like our users to be informed about these concepts before they tackle the other features of our site. The webpage will include a table of contents list on the left side that will allow users to quickly navigate to selected parts of the page. The content of the page would center around common diction to use when describing haircuts, as well as tips on telling which sorts of haircuts match your appearance.
The page should be a simple formatted text document with headings separating the sections in three main categories, “Finding Your Style”, “Aspects of a Haircut”, and “Grooming Tips”. Within each section is a multi-faceted section with detailed lists or descriptions accomplishing the goals implied in the section name. The information should be concise so that users can quickly gain the knowledge they need to make informed decisions about their haircuts. Also, because of the mercurial nature of men’s fashion, it should be possible to frequently update this page. There should be a way to jump from the top of the page to any of the sections by clicking on the table of contents.
Gallery
The Gallery (Figure 2) is a page that will allow users to find haircuts they are interested in. By default, the page displays all of the haircuts available in our database in rows of three.
- Each hairstyle is presented in a “Card” format with a reveal feature that slides in with details regarding the hairstyle.
- By default, all the hairstyles are displayed to the user sorted by popularity (calculated by amount of upvotes, with ties broken by haircut name alphabetically).
- On the right hand side is a filter panel for users to filter based on style characteristics, These are a series of checkboxes that apply a filter to gallery results. The characteristics are length (short, long, curly), maintenance effort (low, high, none), facial hair (with or without), hair quality (thick, thin, sparse, unruly).
- If a user selects so many checkboxes that no haircut exists to meet all their requirements, the gallery should be empty and show no cards. This indicates to the use that they should select fewer filters if they want to see any results.
- On a click of the card, users will be brought to a detailed page regarding the hairstyle (Figure 3). “The Fly” is the hairstyle we assumed our user picked, neighbored with a hollowed heart that is the upvote count (which should fill up if the user clicks (votes) on it).
- Just next to the Hairstyle title is a picture of the style.
- The content page is split into a left and right side:
- Left-most: on the very left-most style is a “Back” button that brings users back to the filtered results of hairstyle cards
- Left: Description/Instructional side that has the following sections:
a) Description section regarding the hairstyle, recent trends, and highlights.
b) How to get this style section regarding what to tell your barber to get this style, as well as how to style it at home. This includes describing the haircut in common barbershop terms. c) Keep in mind section tells users what to note about this style, including maintenance time and recommended follow-up barber appointment and more. - Right: Checklists section, inspired by a recipe book, presents a formatted checklist regarding what is needed to get this style as well as who suits best with this hairstyle:
a) Requirements section: tangible and intangible stuff that user needs, including but not limited to gel, time, hairdryer, comb.
b) Best Suits section: checklist that shows what facial or bodily features best fit this hairstyle - Right-most: The filter panel - on change of each filter, users will be brought back to the cards page with an updated search result.
Haircut Log
Users will have the option to create their personal profile, using an email as a username and a secure password, that will allow them to keep a running log of the haircuts they have received.The hair cut log (Figure 4) is a page that enables users to track and view their haircut history. Every time they get a haircut, they can add a log entry regarding their experience, including their likes and dislikes. They can upload before and after pictures to their log entry, as well as add metadata about the haircut (location, barber, hair cut style, etc…).
After they've begun tracking their hair cut with the logger, they will be able to compare different hair cuts that they've experimented with so they can figure out which one they liked the most. They will also be able to communicate how to perform that cut by showing the log entry they want to reproduce to another barber. This allows users to remember past haircuts and gives them a way get those same haircuts at a later period.
Mobile
The mobile view for the website is very important because we anticipate many users to visit the website either right before or right after a haircut, when they only have their phone or a tablet to view the documents. Specifically concerning each section, the following considerations should be noted when rendering the mobile view.
Need To Know - This section should be properly formatted so that the content is easily visible on the width of a mobile device. The section links are more important here to reduce the time it takes the user to navigate on what could potentially be a much smaller screen relative to the content of the page.
Hair Cut Log - This page should load fewer than five of the total saved images and descriptions by default, loading more as the user scrolls down, to improve performance. Content should be arranged as the picture at full width of the screen, followed by the haircut description at full width below that image.
Gallery - Similar to the hair cut log, there should only be five images loaded initially, corresponding to the five most popular haircuts based on user rating. Images take up the width of the screen, followed by their name and favorited amount. As the user scrolls down, more images should be loaded five at a time. It should be possible to open the menu from this page and apply any of the filters mentioned in the Gallery section above. Once a haircut is selected, the user should be taken to another page that display the same content as the desktop view, except instead of “left” and “right” content, the content of “left” should take the full width of the page and move downwards. After the content of left the content of right is inserted so that the user can view the whole page by scrolling downwards.
Sources
Hudson's Guide: Men's Short Haircuts and the Barber Shop. (n.d.). Retrieved April 12, 2017, from http://www.ftmguide.org/haircuts.html
Men's Hairstyles 2017. (n.d.). Retrieved April 11, 2017, from http://www.menshairstyletrends.com/mens-hairstyles-2017/
Soble, S. (2015, August 18). The 2015 Men's Grooming Study - News. Retrieved April 11, 2017, from http://www.modernsalon.com/article/32342/the-2015-mens-grooming-study
Mockups
Figure 1. Need To Know
Figure 2. Gallery Thumbnails
Figure 3. Gallery Detailed
Figure 4. Haircut Log