This is the first of many blog posts that I will be creating for my coursework in UX Academy at Designlab. In this post, I will be writing about websites that I have recently visited, and design elements that I either had already noticed (both positive and negative), or ones that I decided to look further into.
As an amateur artist, I have recently been paying attention to elements on mobile and web applications that I have used. I’ve mostly been paying attention to aesthetic elements such as color and layout. Thankfully now that I am now in this course, I am being challenged to analyze deeper design and UI elements such as functionality and usability, among others.
Every company and product has it’s own design process. Parts like color schemes and product placement are up to the design teams at these organizations, so I wanted to keep any critiques I had of these sites as objective as possible. I also tried to analyze a variety of products and maintain a cohesive critique process for all of them. For this, I’ll start by working off the Design Hierarchy of Needs, displayed above.
Proper design needs to function, and function all the time in a reliable fashion. It needs to be easy to use and intuitive, ideally requiring little to no prior experience with the application. Furthermore, it should be empowering the user to do more with the product/site than they assumed they could. After all of these bases have been covered, the design should be aesthetically pleasing with interactions that make the product desirable to use.
3 Well Designed Websites
As stated before, I chose websites I either regularly visited, or visited recently and took note of. I attempted to number these in the order each part of the website caught my eye.
The first one is Bodybuilding.com, which is both an informational site dedicated to fitness and, well, bodybuilding, as well as an online store that sells fitness apparel and equipment. The site is bold, colorful, intense, but not overwhelming. It is easy to navigate despite having a ton of features and places to go within it. It made me want to stay on the website for longer than I needed to, as I was just on it to buy some supplements.
- Bodybuilding.com’s landing page features a large, bright and “explosive” graphic that takes up the whole screen and seems to highlight immediately what the website is about, which is both shopping and fitness. The call to action with the clear red “shop now” button is front and center, and seems to follow the F shape way that I learned people follow when on a website.
- The products that they are selling are very clear and, against a white background, stick out. I am noticing that they follow an Orange/Blue complimentary color scheme that is very visually appealing.
- The logo on the top is a very bright blue that contrasts against the black navigation bar and is both prominent but not overwhelming.
- The shopping cart icon and navigation bar texts are white and very easily seen, making it easy to navigate around them.
- There is a promotional offer for free shipping, which seems to be another call to action to spend just over 50$. It is not directly in your face, but it is something that caught my eye.
- The products on this site are high def and very visually appealing, clear to read and not cluttered. The colors they use for item descriptions and buttons really pop against the white background.
- The dropdown menu on the left with options for how to shop make it very easy to find exactly what I am looking for.
- The shopping cart icon stays consistent throughout the whole site, making the checkout experience seamless and easy to access.
- The top search bar makes it even easier to navigate around the site and go to other parts not related to the store, likely capturing you in the site for longer.
- The typeface on this product section is bold and eye catching. It gave me the impression that I might need to check out more items because they are important.
- The blue text on the rest of the list is aesthetically pleasing.
- I noticed the ads on this site were prominent, but did not retract from the overall experience of the website.
The next website I chose to critique was Flightclub.com. Flightclub is an eCommerce website that sells sneakers and sneaker culture related fashion across the world, almost primarily to the Hypebeasts willing to spend $1250+ on a pair of Zebra Yeezy’s (to be fair, they do look pretty cool).
Flightclub’s website is very clean and uses a primarily white/black color scheme, likely to not draw attention away from their multi-colored array of shoes. The site is very easy to navigate around, really showcases their products, and doesn’t have any unnecessary filler content within it. Their use of negative space gives a sophisticated feel that almost resembles an art gallery. Once again, I felt drawn to explore the site for stuff other than just shoes.
- The new white Yeezy’s (Or any shoe they usually feature) is front and center, and even though they are all white, they still pop against the all white background.
- The logo is a bright red, contrasting against the white and black color scheme, with an all black, easy to read navigation bar on top.
- The type faces they use are bold and easy to read, all drawing you to do things such as sign up, sell your shoes, or browse their catalogue.
- The “Shop now” Button is black and contrasts well against the white background. It is a clear call to action that draws me in as soon as I get to the page.
- The pictures of shoes this site features are aesthetically spaced out and captured within the site. Although it displays a lot of shoes, it doesn’t seem cluttered to me, and the shoes are easily clicked on to bring you to the appropriate purchasing page.
- The text is a faded gray on the white, which doesn’t seem to detract from the shoes, but still rests there to allow users to read what Flightclub is looking to display.
- The pictures they use to show their stores are big and clear, showcasing the products within the product website and giving a feel for the in-store experience. The white they use on these pictures allows the text to stand out without taking away from the images.
- As I navigated the site, I found myself mentally comparing it to an art gallery. The pictures they have seem to recreate this feeling, and all lead to the appropriate sites and pages for either the stores, or the shoes.
The third site that gave left me with a positive viewing experience was Craiglist.com. Now I know what you’re thinking, Craiglist is not a bright beautiful modern looking website that people strive to copy. It looks like it was created in 2001, without being changed since. This, to me, is why I like it. It is a very simple site that is incredibly easy to navigate, and has only enough design to accomplish exactly what the user needs from it. Craiglist has so many postings that they likely don’t have a need for a fresh, modern design. I can tell their design accomplishes exactly what they need it to.
Craiglist’s design is simple and intuitive. Anyone that can read can navigate this, and with their huge array of links, they were able to display them in a easy viewable fashion. Although the links may be a little cluttered, with a ton of text around, the blue on white makes them easy on the eyes.
- The search bar is easily viewable and takes you exactly where you need to go. With so many areas within the site to explore, it works well and consistently.
- The link menu on the top that shows you where you are and where within the city is clear and easily accessible as well.
- The various text boxes within the home page are clearly defined and with the gray boxes are easily seen.
- The Craiglist logo which takes you back to the main site is large and bold, easily seen and as most sites do this now, makes sense.
- The features on this side bar take you everywhere you need to go. They all use the same typeface, and, white plain, do exactly what they need to do.
- The top right navigation bar allows you to easily post wherever you are on the site. I personally could have used it to follow me throughout scrolling down, though.
- The navigation dropdown menu makes it easy to drag and click wherever you need to go.
- The prices and texts on these postings are easy to read, and the black text in a white box makes it easy to read on a picture of any size and color.
- The check boxes that allow you to filter by category are also easy and intuitive. Nothing on this site is hard to use or figure out, which is really what is most necessary from it considering the wide variety of ages and demographics that use it.
2 Poorly designed websites
For these two sites, I chose my own company’s site, and the site of a college my cousin applied to, after telling me how difficult it was to find what he needed.
The first site, my own company’s, is Symphonytalent.com. I chose this site specifically because potential clients of mine have almost always described it as difficult to navigate and find information, and hard to derive the actual message from. If on prospecting calls I constantly hear “So, what do you guys actually do? Because I couldn’t figure it out”, the design isn’t doing its job. What we do, is function as an end-to-end talent acquisition software stack that helps large organizations source, hire, and engage top talent that fits the culture in their organization. This design, to me, does not accurately display that at all.
- The bright pink color that smacks you in the face once you enter the company’s landing page is, to me, an eye sore. I understand branding specifics are decided with months of research and personal planning, but to me this is tough on the eyes. I think it would work way better to have the pink outlining boxes, or on various other features of the site.
- The hamburger menu at the top right of the page is the only way, upon entering the site, to navigate it. If I wasn’t familiar with this type of menu, which is entirely possible, I would have a very hard time finding any information at the start
- The drop down menu is front and center, and is offset nicely using white on a bright pink. It uses statements to take you to the necessary information, but the statements are limited and assumptive.
- The black bar at the top, which allows you to request a demo, stays consistent and follows you throughout the site, which is nice. I feel like we could have definitely used this space as a navigation bar, as opposed to just a giant black bar that serves little purpose other than aesthetics.
- Speaking of hamburger menu, it brings us to this. I really wish the side bar on the left was displayed at all times throughout the site. This would make it so much easier to find necessary information as opposed to going on a wild goose chase throughout the whole website.
- As stated before, this dropdown menu is limited and not specific. It is general statements that might not resonate with someone reading them. To those that are reading the site, if something they need can be met with a solution, but might not align with these statements, it is a wasted business opportunity.
- For me, there is simply too much color happening on this page, and on the site in general. This is a recruitment software, but I never get the feel for this throughout the page.
- This call to action is well placed and get your attention pretty handedly. It clicks and gets you where you need to go (contact us)
- This bar is front and center as well, and it makes it clear that people should put their email here
- This arrow brings you to the top of the page. For the last 3 parts of this section of the critique, I wanted to show that while I personally don’t like this site, some of the features certainly do the job.
The next and last website I am going to is the website for the College of Staten Island, www.csi.cuny.edu. College websites are supposed to attract top students and get prospective attendees excited for their college career there, and this website follows very short of this. The page is dull both in color and in typeface, and has information scattered that isn’t important, with important call to actions such as the common “APPLY HERE” hidden away. The site, for me, is very rough and crammed. It is hard to find information, and not intuitive at all.
- The first thing that struck me as odd was the gray sides of the website that serve absolutely no purpose other than making the actual information seem condensed and squished. I’m not sure what they were going for here, but if they removed this and allowed the bright blue colors of the CSI Dolphins shine, I feel like the site would seem way more appealing.
- The countdown for a new website…why? What purpose does this serve? To me, this seems like the college is highlighting the inadequacies of it’s website, which made me want to review it even more.
- These pictures are very bright, and the slanted lines within them, paired with the colors, is the highlight of the home page for me. They serve no purpose other than aesthetics, but it still breaks the monotony of the page up for me.
- This is the page that I get to once I get click prospective students. It has a side bar that seems very cluttered to me, with a lot of information that I feel could have been broken up by some lines, boxes, or spaced out.
- The pictures they have are nice and bright, but are too crammed together on this page, which makes it feel like a collage rather than any kinds of different, individual experiences I may get if I went to this college. I think they could benefit by adding less pictures at first and having more space for the information on the left.
- The navigation bar within this page is a redeeming aspect of it, for me. The bold, dark charcoal color which has white text makes it easy to choose an option you need.
- I would image a college’s primary source of income is students, and students need to be able to apply…so i’m not sure why they made the application option so forgettable by putting it in the middle of an already crammed bar. I would absolutely have made this front and center, putting it in a box within or on top of the images, using white text, or black text in a white box. It actually took me a while to find out how to even apply to this place.
The bottom of the CSI homepage is rough. All of these icons are so closely put together that it is honestly hard to read them and see which of them are even important. They look more like advertisements than links to important aspects of the school, such as the graduate studies program, the Macaulay program which is CUNY’S honors program, or anything else they wanted to display.
Ultimately, for all of these sites, I would say all of them met the bottom 2 parts of the Design Hierarchy of Needs. According to the graphic though, this has little to no value. CSI and Symphonytalent.com were not forgiving or easy to use, and certainly did not empower me to do more with the website, as both gave me trouble using them. Symphonytalent.com may have been creative and modern, but this was pretty useless to my overall experience.
Bodybuilding.com, Flightclub and Craiglist met most or all of the needs. I would say Craigslist fell short on the creativity aspect, and likely also with the proficiency aspect. Bodybuilding and Flightclub were easy to use, forgiving, empowered me to go through their entire sites, and were certainly beautiful to look at. And when I say beautiful, I don’t mean simply in the colors. I mean in the way that they allow me to view and navigate the site. Beautiful, for me, is simple, with colors that allow the site to communicate what it wants to communicate. Those are my critiques. I hope you enjoy them, and I hope you learn more about how I could have done better!