Category: Site Review

Since the introduction of technology into the everyday lives of the average person, information has been even easier to spread and find. It is more important now than ever before to have social media or a website, especially as a business. Consumers are online round-the-clock and can find out about your company in a single click. While websites used to contain only text, nowadays there are endless possibilities for layouts and design. As examples, I explored the websites of two local restaurants, Burgatory and No. 9 Park, to see how they compare. 

Burgatory is a popular local food chain that is known for its “helluva burgers” and “heavenly shakes.” They pride themselves on their all-natural ingredients and huge portions. Burgatory has multiple locations in the Pittsburgh area, including the PPG Paints Arena, Heinz Field, and Cranberry Township. Burgatory was established in 2011, and their website reflects the modern feel.

When you first land on the Burgatory homepage, you are met with a simple and intuitive design. At the very top of the page, the red ‘B” that is their logo sits centered on a very dark brown navigation bar. Under the logo, there are links to the menu, locations, merchandise, and careers. Below this, there is a slideshow of colorful photos that convey the customers, food, and employees of the company in a positive, tasteful light. When looking at the site’s homepage, it is easy to see where you need to go. The items on the navigation bar attracted my attention mainly because of its light gray color against the dark title bar but also because it is centered at the top of the page, and the slideshow is large, not leaving too much else to look at.

Burgatory’s website uses many design principles, such as balance, unity, emphasis, and layout. The layout and color choices across design elements on the page give it a sense of unity. The webpage seems laid back and relaxed with the choice of typography and wording. There is also a good contrast in the dark navigation bar and the stark white-gray color of the background and text. It is clear as to what words are hyperlinks because they are either underlined or change color when you glide your cursor over them. 

Overall, the usability of this website is easy for users with minimal experience with websites or the internet. Everything you could possibly want to look for is connected to a link in the navigation bar. At no point did I dwell on or think “Where should I begin”. I just instinctively knew where to click next. Its minimal color scheme and layout make the experience easy on the eye and mind.

No. 9 Park is an upscale restaurant that serves French and Italian entrees and European wines. While this restaurant only has one location, it is in an elegant townhouse in Boston’s historic Beacon Hill. The restaurant prides itself on its intilmate setting and refined cuisine. 

No. 9 Park’s website is in many ways similar to Burgatory’s. The site also features a dark brown navigation bar with a large photo beneath it. The navigation bar features similar elements, with the logo in the top left corner, and the menu and other links listed beside it. The text for both the logo and the hyperlinks appear to be light cream or white in color. The picture features the storefront location in Boston’s Beacon Hill. Like Burgatory, the site is easy to navigate because of its simple design. 

No. 9 Park’s website also utilizes design principles, such as balance, unity, emphasis, and layout. The layout and color choices across all of the internal pages and links have a sense of unity. Emphasis is put on the fine dining options with professional photos spread throughout the site of their divine courses. They also allow the user to navigate the website through distinctive buttons on the right side of the page. This leads to a more direct navigation of the site, landing the user on the proper panel, overall enhancing the user experience. 

In Steve Krug’s book Don’t Make Me Think, he addresses five things that are necessary for a user to enjoy and understand the look and content of a site. These things are:

1. Creating a clear visual hierarchy

2. Taking advantage of naming and graphic conventions

3. Breaking pages into sections

4. Making links look clickable

5. Minimizing noise

Both of these websites do a very good job at addressing these needs. In regards to heirarchy, Burgatory definitely takes the crown. Its use of bold typography and graphics is very different from the delicate and light design of No. 9 Park’s. I believe they also do a great job in dividing the page into clear sections. Burgatory mainly does this through dashed lines and bold lettering, whereas No. 9 Park uses photographs as dividers. Both websites use underlining to define what is a hyperlink throughout the body of their sites, but must not feel it neccessary in the navigation bar. It works well in their favor and leaves behind a clean and simple design.

Overall, both Burgatory’s and No. 9 Park’s websites look very professional but are very different in terms of the overall style. Burgatory’s style is more casual and bold, and No. 9 Park’s leans toward a more polished and simple aesthetic. Personally, I am more drawn to the unique style and typography that Burgatory utilizes. Regardless of whichever restaurant website you choose, you are sure to enjoy your experience.

References

Burgatory. (n.d.). Retrieved July 22, 2019, from https://burgatorybar.com/

No. 9 Park. (n.d.). Retrieved July 22, 2019, from http://www.no9park.com/#intro

While reading the book and comparing between the No. 9 Park and HugeDomains.com there is a huge difference in catching people attention the HugeDomains.com uses loud colors and attention grabbers like words in all capitals. There is so much going on it makes you confused of what to click and what is the right place for it like the book mentioned it’s easier for the consumer if they knew where to click and navigate through the store or website. On the other hand the No. 9 Park uses mostly pictures of the restaurant and uses simple navigation. The menu bar create unity and feeling like everything is holding together. The pictures create balance as you are scrolling and your eyes know where they should be looking because of it. HugeDomains.com is the opposite, everything on the page has an equal weight and is competing for attention. the No. 9 Park has a simplicity that for me personally draws my attention. I’m not anxious like i am looking at the other site. Everything is organized in a way that makes sense and i took my time and knew where to go. HugeDomains.com it forces you to click things for example BUY NOW! or Start Payment Plan. They are using this as a confusion tactic to make me click something now knowing what it is.

Link: https://compass.works/

            I found “Compass” while browsing many sites featured on onepagelove.com. Compass is a service that helps users improve their own webpages. When a user submits their webpage to Compass, they will then receive a short and concise video from one of the staff members. This video will attempt to tell the user what they believe works well, or does not work so well with their current website. I think this formula is very user-friendly. The one-page layout allows the viewer to easily comprehend what this webpage’s purpose is and also how to use it. The webpage uses black and yellow text as well as graphics that do not seem distracting or hard to read. The webpage has the viewer scroll down to learn more about Compass’s features and background information. When viewers first visit the site they are greeted with a short video of the founder “Stephen” explaining what exactly the webpage’s purpose is. The longer you scroll down the more information you will find. This includes how the reviews work, why they are helpful, and eventually pricing and purchasing options.

            I think this webpage is designed very well. I have never heard of paying a company to review your product only so you can improve. Within seconds I was able to understand what this webpage was for and how to operate it. It conveniently places all the answers to commonly asked questions at the top of the webpage and places the more intricate information towards the bottom. It uses a series of simple to comprehend notes that contain small graphics. This site is a great example of how a one-page site can serve as a clear and concise method of delivering information.

https://milkshake.app/

The front page of the website is a dynamic webpage where the colors are constantly changing. Most of the front-page colors are active colors such as red, orange, and yellow. These colors give an energy to the website and motivate users to explore the content. The heading title (milkshake) is presented in a smooth font with a reverse text color based on each background color. However, the dynamic front page has also some dark colors which I think is a drawback in this web design because the color change from bright to dark does not provide constant mood to users. To navigate through the website, users can scroll down to browse the content of the website or a user can click on a side menu from the corner to choose what content to browse. In addition, this website design is implementing changing color schemes to provide richness and character to the content.

The second page of the website is showing some design samples that the website has to offer. These samples are automatically changing every three seconds. However, the motion of these samples is annoying because they move fast. The samples are represented in a geometric shape with smooth rounded edges. The third page of the website has a light-yellow background with a red title text and a dark navy subheading. This page allows users to interact with the content where a user can click on a right or a left arrow to browse the sample designs. The last two pages are also using light color backgrounds which match the scheme of other pages.

In general, I like the simplicity of this design. It is easy to browse this website because it has less texting which makes it easier to scan. I also like the rounded buttons that change colors when hovering the mouse over them. The only drawback I think is the use of dark background in the front interactive page. I would suggest using only light and active color to maintain consistency.

The website that I chose from onepagelove.com is called Vespillo-lefilm.com. The sites title page starts out as very dark and mysterious. The background is a gradient black with silver lettering to make the lettering stand out. Also, there is a wooden coffin in the center of the page to make it stand out. The site in the very beginning is attention grabbing and mysterious. The mystery of the color and the smoky texture on the page makes you want to scroll. The scroll pattern seems to be floating, making it easy to scroll through. The scrolling is mostly up and down, except for a few panels. Some of the panels do scroll sideways, but they do flow really well. 

            The flow of the page is one of my favorite parts of the website. One-page websites can be stale when one scrolls up and down, but this site has both to make it interesting. There are some sketches in the website as well, and that gives a texture of viewing the sketches on paper. The site also has some 3-D qualities as well, as if you are in the website itself. It’s a really well-done website and is attention getting. 

Shopping at Amazon.com is simple because the website interface design is user friendly. There is a wide rectangle box to search millions of products with one click. The searching box helps customers finding the desired product by providing auto suggestion phrases. At the upper left corner, there is a list button that opens a list of categories. These categories are the main divisions of the products available on the website. Each division is divided into smaller categories to make it accessible for users to find their desired products. In addition, the main webpage of Amazon consists of other elements such as ‘Deal of the Day’, customized recommendations, and other advertisements.

I find the shopping experience at Amazon.com to be fun and straight forward. There is less typing required to find what I need which is more convenient to me. After finding what I need, there is enough information about the product including reviews, seller, estimated delivery time, price, description, and similar products. After all, it is only a few clicks to add the product to the cart and find out the exact cost and delivery details. Because I already have an account with Amazon, the checking out process is really simple where my address and payment details are already saved. In fact, there is a button in any product page called “Buy Now with 1 Click”. This button can be customized to automatically charge a payment method and ship to an address associated with the button. It accelerates the checking out process for users to save even more time.

In conclusion, I think that Amazon.com is accessible and usable to different users. The interface uses simple words and more graphics to provide more usability to elders and non-educated users. It requires less thinking and more common sense to place an order on Amazon.com.

Website=”Sweetwater”https://www.sweetwater.com/?mrkgcl=28&mrkgadid=3230723992&rkg_id=0&campaigntype=paidsearch&campaign=*Sweetwater%20-%20Branded&adgroup=Sweetwater%20-%20Exact&keyword=sweetwater&placement=google&adpos=1t1&creative=219897786869&device=c&matchtype=e&network=g&gclid=EAIaIQobChMI2ay5hMmE4wIV0MDACh38XQ2AEAAYASAAEgKBr_D_BwE

Sweetwater is a very popular website where users can purchase musical instruments and music related products. They have a wide variety of guitars, drums, keyboards/synthesizers, and studio equipment such as microphones. The website is very user friendly as I have never had a problem finding products in the several years I’ve used the site.  To test the website’s capabilities, I entered “Jazzmaster” into the search bar. I then was pleased to see several Jazzmaster guitars organized by price and brand. Sweetwater sorts all of it’s products by brand whenever you search for something. For example, the more expensive Fender Jazzmaster guitars appeared first while Fender’s less expensive Squier Jazzmasters appeared below. 

            The website makes it very easy for first time users to find exactly what they are looking for. The top of the webpage contains five options of navigating the site. These options are: “Shop by Category”, “What’s New”, “Deals”, “News and Research”, and “Support”. Most users will be drawn naturally to the first option of “shop by category”. Hovering the cursor over the “shop by category” option will allow a secondary drop down menu to appear. The menu displays all of the types of products Sweetwater carries. One of the best features of Sweetwater is that the website has no shame in telling you that they don’t carry a product. For example, searching for “Danelectro” guitars result in a message that they do not carry Danelectro products. This can save users a lot of time instead of continually searching a website for products they do not carry. Sweetwater also allows you to search for products utilizing a variety of criteria. You can search by brand, price, body style, 6 string, 7 string, and 8+ string. This website is one of the most popular musical instrument suppliers in the U.S.A. It’s easy to use, detailed, and allows for a carefree shopping or browsing experience.  

Shop NHL is a site where you can get merchandise for any hockey team in the NHL. They mainly sell jerseys for almost everyone on each team along with player t-shirts. Along with that they also sell a large variety of other things that include:  hats, bags, and jackets. There is a bar at the top of the page where you can select the option of shop by team, jerseys, hats, more, or the option to search for something specific. The color scheme is neutral with there being a light grey bar at the top of the page and two dark grey bars below it with a white background. I clicked on the search bar at the top of the page and I searched for a Sidney Crosby jersey instead of clicking on the shop by team link and then finding the jersey on the Pittsburgh Penguins site.

When I searched for the jersey, all of the Sidney Crosby jersey options showed up immediately. At the top of the page it says how many jerseys are on that page. Along with that there is a drop down box that says top sellers to refine the search and a drop down box to pick how many things you want to see on each page. On the left, there is a vertical bar that has the options to refine the search more. It has an NHL drop down box with Pittsburgh Penguins below it, a drop down shop for box with the options of men, kids, women, and baby. There is also a department, custom shop, and a price range drop down box to pick from.

The usability of this website is easy to use for anyone that wants to get any NHL merchandise. There are multiple ways to find what you are looking for by either searching for it in the search bar or going through the shop by team option. From the time I went onto the website to the time I had the jersey in my cart it took less than a minute due to the website being easy to use and laid out perfectly.

            I researched the website Avon.com. Avon is a beauty website where people can buy makeup, clothes, etc., at great prices. The site is huge and has a lot of products for people to choose from. The site does a great job making finding products easy, even though there is a lot of products. There are even beauty tips to help those purchase their products, and there are even rewards for shoppers. Some can even become an Avon representative to sell their products outside of the website. 

The website has a white background, which is great to show off products because makeup is colorful and stands out on its own. They are trying to sell the makeup and they need a clean background in order to have the makeup look appealing. Also, the use of fonts is clear and easy to see. Some of the font is a little small because they try to fit everything on their website in one place. The title of the page does stand out without it being to flashy. The site has a very basic set up, it’s very rectilinear. Also, they have some pink colored areas on the website where they grab people’s attention. I think that there could be more pink areas on the website because there are other things that need the attention. They do well in marketing their products but there could be a bit more added to the site to have things stand out. 

I chose to analyze the Sim Sim Falafel page. My eyes are immediately drawn to the bright colors and the inherently appealing textures of the food. This is a restaurant site that does a lot to hold your attention. At the top of the page, you’re immediately drawn to the bright colors and simple food images on the page. They grow and shrink depending on the location of the cursor. The Sim Sim Falafel logo is the cursor itself on the page – it follows you as you scroll, so there’s no chance you’ll be forgetting the site that you’re on. It has a great feel as you scroll, it automatically moves to the right placement for each new section of the page using different colors to differentiate and give it more appeal. It’s simple and easy to use. Even though it’s in a foreign language, I didn’t have any problem deciphering what each of the sections contained – that’s pretty impressive. The color palette used sticks to primary and secondary colors, which is engaging and almost festive. A lot of thought was given to the physical dimensions of the site. It uses liquid width and is designed to be equally appealing regardless of the width you’re viewing it. Although there was not a lot for me to click through on the site, I thoroughly enjoyed navigating it as it was clear that all of the visual details had been thought through.

I chose the website “Sim Sim Falafel”, is the website to analyze for this review. The bright colors caught my eye while I was scrolling to find a website. Once on the page, the user can immediately interact with the page. Moving the cursor, the food images change size. Going further into the website, the elements are separated with an appealing grid layout. Another interesting point, the logo moves with the user when scrolling, moving to different parts of the screen.

This particular website does not scroll left and right, only up and down. I believe this is just a small restaurant website, so it may not be necessary for them to have tabs and a number of other elements. The simple animations are clean and smooth, almost making up for the lack of other things to click and play with. 

The grid layout and  make the website easy to look through, and I like how the user can scroll, but it’s more of a snap-to effect. In a way, this one page site almost acts as seven. I do like how the sort of separate pages are a single block of color, however there are some issues with it the further down the user scrolls; I will explain in my next paragraph. I also like the typeface used for the titles on the site. It is simple and the font demands attention. The same typeface is used for the other information about the food (however I am only guessing, I cannot read the language; German?).

Alright, so there are a few improvements to make the site stronger. I can appreciate the direction the designer was going in. Bright colors made the site seem fun and exciting, and the images were high quality and cut well. The title screen is very appealing with the motion effect. The typeface and fonts are also appropriate for the content. There are a few other sections where the images and bold color are compatible, however there are a few that are difficult to read. It also seems as if the designer got lazy the further down the website goes. The bottom of the page has what seems to be a Google Map attachment. The cursor changes to a hand to drag the map, but I could not get this feature to work. Not sure if this is a bug or an operating system issue? I wished the food images were throughout the page, there were less and less the further I scrolled down. I’d also like implementing the motion effect that was at the top of the page in other spots. My expectations were set high with that title section. Also, even though this restaurant may only be a local shop, I still feel some sort of a translate button may be helpful. 

All in all, since this is a site for a small local business I believe the layout and design as a whole is acceptable. As said in The Principles of Beautiful Web Design, “There’s a strict usability angle, which focuses on functionality, the effective presentation of information, and efficiency. Then there’s the purely aesthetic perspective, which is all about the artistic value and visual appeal of the design”. I would give Sim Sim Falafel a 7/10 on usability and for aesthetics; I feel the usability is also effected by the aethetics. Changing a few of the background colors where it is hard to read the black text, such as the dark purple, would help the usability. I would also maybe change the map attachment to something the user can click rather than drag. The map would be opened in a separate tab.

The website that I chose to evaluate is milkshake. This website uses a lot of different colors throughout the site. At the top there is a banner that changes color and takes up the whole page that has the logo milkshake at the top and ‘Make a free Insta website on your phone’ with a link for get app for early access and one for a video. Along with the different colors, as you scroll through the website pictures pop up on the side of the screen to add texture. 

Since this is a single page, to navigate you have to scroll top to bottom to find the content that you are looking for. 

The design elements that make the website easy to scan are that it has a standardized appearance, has effective visual hierarchies, things are “nested” visually, and has a format text that makes scanning easy. 

I think that this website is done well because it has a lot of layers to it without being overbearing. All of the content is easy to find and the different color blocks and animation help dictate what piece of information goes where.

I am Subzero is a storefront ice cream parlor located in the United Kingdom. They have been making ice cream for over fifty years and offer over sixty flavors of ice cream. They have a single-page website for their business. In some situations, a single page website may be boring or include too much information, but surprisingly, it worked extremely well for I am Subzero’s needs. The sites’ use of color, texture, and page layout makes this a captivating and appealing design. 

When looking at the website, it is easy to see and comprehend all of the content on the page. Some design elements that contribute to the clean aesthetic are the font size, the use of negative space around the content, bold headers, hierarchy, and colors that help define buttons and important information. 

The first panel invites the user to scroll down by using a vibrant pink circle with minimal text and an arrow pointing downward. This makes it clear to the user that the website utilizes a top to bottom scroll direction. While you are scrolling, there are dividers to indicate the start of a new section of content. Intuitively, the website designer used dividers that represented scoops of ice cream. Also, instead of a harsh line for a divider, a more organic wavy line was used. In my opinion, this gave the impression of melted ice cream dripping down the screen which again, invites you to scroll further down the page. 

However, I found some of the more subtle features of the site the most interesting. The navigation bar is black but fades in opacity, which makes the bar less of a distraction while scrolling through the page and also leaves the page looking more friendly because it is not a harsh line. Also contributing to the friendliness of the site is the colors. There are many fun, bright colors on the page, making the page look vibrant and young. To balance out the flat colors, a texture that appears to represent sprinkles is used throughout. 

Overall, the website is very easy for users to navigate because of the clean and innovative position of the content. While using bright colors and subtle animations, the site maintains a professional feel overall. The colors and textures are brilliantly balanced throughout, which makes for a lovely overall experience. 

Reference

Welcome to the Magical World of Subzero Ice Cream. (n.d.). Retrieved June 29, 2019, from https://iamsubzero.com/

Walmart is a department store and has a wide variety of products to choose from. Because it is the largest retailer in the world, you may think that the website would look crowded and give too many options when it comes to looking for a specific product. However, this was not the case. Walmart.com has a simple and sleek look to the site and it was very easy to find the product that you need.

When looking at the site’s homepage, it is easy to see where you need to go. The search bar attracted my attention mainly because of its pure white color against the dark blue title bar but also because it is centered at the top of the page.

I decided to search for a water filter that purifies tap water, but I simply searched “water filter.” When I searched without picking a department the exact brand and product that I wanted came up with a large picture advertisement that spanned the page. On this ad was an arrow directing me to click on an icon. On the left-hand side, I could still refine my search if I needed to. After clicking on the icon, it took me to a specific page that only showed that brand’s water filter, with pictures and descriptions of different color options to choose from.

I selected the “Lake Blue” filter that was listed as the second product on the list. The next page very clearly showed more pictures, the price, and an ‘add to cart’ button. The button’s dark blue color stood out against the bright white background.

Overall, The usability of this website is easy for users with minimal experience with websites or the internet. Everything you could possibly want to look for can be searched for and refined to find the perfect product. At no point did I dwell on or think “Where should I begin”. I just instinctively knew where to click next. Its minimal color scheme and layout make the experience easy on the eye and mind.

References

Carbonara, Peter. “Walmart, Amazon Top World’s Largest Retail Companies.” Forbes, Forbes Magazine, 6 June 2018, www.forbes.com/sites/petercarbonara/2018/06/06/worlds-largest-retail-companies-2018/#591d8de213e6.

In comparison to other shopping platforms, I would have to say Amazon the most user friendly. The large, white search bar is easily seen at the top of the screen over a dark navy background. If the contrast in colors is not enough, the magnifying glass that is the universal symbol for ‘search’ is seen beside the bar in orange and navy. Typically, the user can easily find the good needed with ease in less than a minute by just searching what is wanted. I searched “bluetooth apple mouse”.  Normally, it is not necessary to pick a department to search, but searches can be refined – in my case, by selecting “Computer Mice”, “Computer Keyboards & Mouse Combos”, and so on. Not only is the search process simple and easy to understand, Amazon is also visually appealing. I believe being visually appealing aides in customer usability.

If I was unsure of what brand I was looking for and only searched “bluetooth mouse”, other products show up that are not Apple products. On the left hand side, Amazon shows all brands of bluetooth mice. I can then check the sub head “Brands” and select “Apple”. There are many other categories to search with to cater toward what is most important to the customer, including searching only for “Prime” items (Free shipping for the customers who pay a monthly fee), “Average Customer Review”, “Color”, and even specific categories that only apply to the item that is being searched. In my case, these specific categories include “PC Mouse Feature”, Mouse Interface”, and so on.

Users with low experience with websites can easily navigate Amazon. Items are placed in departments and have keywords attached to them are created with common sense.

References

Krug, S. (2014). Dont make me think!: Web & Mobile Usability – Revisited(3rd ed.). Retrieved June 15, 2019.