This week I will be comparing two websites from product designers as part of the research for my own website, so I can improve on my website in terms of user experience and design. I will be analysing the general design, colours, typography, navigation, usability, links and mobile view.
The first website I will be analysing is the one from Mademoiselle Jo. The homepage has got a slideshow banner with her different collections and what they are with a title including 'Mademoiselle Jo Design Studio' underneath, making it clear that she is a designer immediately as you launch the website. The menu in the header is straightforward by showing exactly what the menu items are in simple terms. The colours are bright, but not overwhelming. The homepage has only got three website items on it when you launch it, preventing it from feeling too busy. The fonts are consistent as far as I can see here. The mobile view of the homepage is the same as the desktop version, but everything is stacked on top of each other so I have to scroll for quite a while before I get to the footer. The mobile view could have benefitted from having less on it, or more slideshow views if it is really important to have all the items on the homepage.
The header is locked at the top of the page, meaning that it follows as you scroll. I personally really appreciate this feature in websites, as it allows me to use the menu bar without having to scroll back up. In the mobile view this is not the case, it has got an arrow button that will slowly scroll to the top for you if you press on it. On the mobile view the menu bar turns into a hamburger menu. All the links work and the 'Shop' item on the menu bar even has a side menu that pops up when you hover over it. I think the text in the side menu could have been a little bit darker, as this can be difficult to read from further away.
Her 'About' page has information on both herself, including a photo of herself, and the company. The different items on this page pop up as you scroll down and switch between which side of the page they are on, giving a dynamic feel to it. The fonts are the same as on the rest of the website, making it consistent.
The 'Inspiration' page is set up like a mood board with pieces of her collections used in different setups. When you hover your mouse over a picture, it turns around and shows you what the item is, what collection it is from and a 'Discover' button, which takes you to the page with the collection on it.
The only inconsistency I have found is in the footer, where some of the text has not been translated into English from the French version of the website. It is clear what the different items in the footer are for, however, it disturbs the consistency of the rest of the website. The footer is where the social links can be found as well, they all work and link to the correct pages that still exist.
In general this website is easy to navigate and straightforward in terms of information, there are lots of photos present and it is clear what the website is for. The design is consistent and calming to look at. The mobile version was less user-friendly, as the menu did scroll with and the pages felt too full with all the photos on them.
Next I am going to take a look at
Philippe Starck's website. As you launch the website you are met with a black and white page filling image with a quote on it, the quote and the image change every time you refresh the page. In the top left is a search icon with 'Less' next to it and in the top right there is a menu icon with 'More' next to it. It is not immediately clear what this website is for. As I scroll down there are photos of Starck himself, a device, furniture and rooms. The photos keep adding to the page as I scroll down, making me unable to find a footer. The only thing I can find that looks remotely like a footer is a small bar at the bottom of the screen that follows as you scroll with social links, a page counter and the language options.
When I click on 'More' it opens a menu and suddenly it becomes more clear on what this website is about. The menu shows everything about the brand and the person in different categories. It looks like there is a lot packed into this website. The font seems the same all over the website, with the same four colours.
The 'About' page seems to have a whole book on it, starting from Starck's childhood to everything he has designed categorised into different chapters. It seems like this is more catered towards Starck fanatics instead of someone wanting to know a little bit more about the brand.
When I click on a specific item in the 'Design' category in the menu, it shows a quote from Starck and photos of the products he has designed with the title of the product and who it was made for. The photos are clear and only show the product most of the time.
The small bar at the bottom seems to be the footer, as I cannot find anything else that looks more like a footer.
While the design of the website is consistent in terms of colours and fonts, it felt like this website is designed for people that are familiar with Philippe Starck and his work. The menu is crowded, but does contain all the necessary pages and it is organised in categories, making it easy to navigate. The pages are endless, photos keep popping up as you scroll, making it feel like the website is endless. The mobile view is exactly the same as the desktop version, with the photos showing up one by one, making it quite painful to scroll through.
Both websites have an extremely different feel to them. While the Starck website is more confusing when you first launch it, in the end it was easy enough to navigate due to its well organised menu. The fonts and colours are consistent in both websites. The Mademoiselle Jo website is so much easier to use in my opinion, the purpose of the website was clear from the start and there is no unnecessary information on it. I would say that the user experience of the Mademoiselle Jo website is better than the Starck website and the variety of warm colours made it a more welcoming website to look at than the black, gray and white website of Starck. The mobile view of both could be better and more user-friendly, as for both of them it is simply the same website cramped into a mobile view.
Comments
Post a Comment