For the second peer review on design feedback, I will be critiquing Alex Masse’s blog, Fairything!
If you are interested in creating or consuming content Alex has great insider options, make sure you check out Fairything!
Using designer Mauvé Page’s slides that we discussed in the lecture
Things to Work on:
While Alex seems to have a good basis for her website I do think there are some things that she could change to optimize her design. The first thing I would say is that she doesn’t have a clear homepage. The picture of the purple flowers is nice but it doesn’t tell the user’s anything about the site. Its purpose seems more aesthetic than functional. I am weary of this because the headline image of a website should have some sort of insight and call to action to get users’ attention right out of the gate. Additionally, when you open up a post the headline images become blurry to the point where you cannot tell what it was or is supposed to be. This is a little frustrating and could be adjusted a little better to help her content stand out rather than hinder the accessibility. That goes on to my next point when you open up to the website users have no idea who Alex is, or what the site is about. Alex does have an about this site page on her navigation but most users won’t want to put in the extra time or energy to click into it. It is much easier to scroll down to see if you can find the content you are looking for rather than committing to going to another screen. As well I would suggest adding some more visual hierarchy to that page to make it explicitly clear upon first glance what the site is about, without having to read any passages of text.
A small thing that I noticed was the exclamation points in the navigation menu. I feel like this was a personal choice for Alex to convey her enthusiasm but it is distracting and breaks up the flow of the nav. I would suggest taking them out to make it more streamlined. Also, it is already implied that about would translate to “About this site” it is not necessary to include this extra wording. I would shorten the names in the navigation to be either one or two words in length, and to keep it consistent. It is important to be concise and straightforward on the internet. If users see something that doesn’t fit with their general understanding of the web, it is unlikely they will give it their full attention. For this, like this, it is important to understand the best practices of the web, from the perspective of users, not creators. See the resources listed below.
Another thing that I noticed was the colour of the text. The grey text may be difficult for some people to differentiate, especially for those who are visually impaired. I like the black and purple colour scheme that Alex uses and would just suggest that she change the body text to black. The caption for the images is also too light to read on the purple background. There is not enough contrast between the colours to read them properly, even for people who are not visually impaired. I think you could use the same black/grey colour as the body and bold it instead to have it stand out. The same goes for the use of links within the text. These should stand out with some sort of visual emphasis and is currently too close to the existing colour of the text.
Finally, it seems like a lot of the posts have the same feature image which looks a little repetitive or no image which is a little confusing. Users might think that having the same image means it is the same post and might not want to navigate to it. I think if she could situate these feature images to be more similar to a youtube thumbnail that gives more context into what the post is, it would go a long way in helping the user better understand the website.
I’m not sure if this is out of the scope of the peer review, but I have some suggestions to better organize Alex’s content which I think will drastically improve her design. I made a quick low-fidelity mock-up of a homepage in Figma taking Alex’s content and tweaking it to become more user friendly. I used this as a base to design the mockup mainly for structure purposes, to show how a homepage and be a hub for all Alex’s content and be used to instantly describe her site and its purpose.
It looked like Alex was having a difficult time niching down her ideas to create a narrative. As of right now, it seems like her content is all over the place, but it really can be summarized in two sections: content creation and consumption. She both makes content/media and consumes it. I think focusing on these two ideas as separate, but connected will provide Alex with a more situated foundation to explore while making it clear to audiences her areas of interest. Adding an opening headline is essential. It gives users an overview of your site, and more importantly why they should care. An example headline I wrote merely asks the user’s to reflect on their creating/consumer habits, but there are many ways this could be incorporated. After this is a very short description of the explaining in more detail the purpose of the site. I combined some of Alex’s info from multiple posts to give an idea of what to put here. The second most important element after a headline is a call to action; what do you want the users to do when they get to your site? It should be clear that Alex wants people to read her blog and this the button that allows the option to skip the rest of the page to the blog. Notice the colour contrast draws users’ attention straight to the button, and also the legibility of the text easy to read.
Then I structured the site to provide a more detailed description of the content Alex creates and consumers, with links to their separate pages for more information. Again The use of colour contrast and buttons help facilitate the visual breakdown. The buttons should stand out again all other content on the screen, yet be consistent everywhere they appear on the site. These currently use placeholder text, a more detailed description of the topic should replace it.
I included a recent post section so that users can see examples of her blog posts right off the back, starting with the most recent content. This is similar to the structure that was already on Alex’s website I just optimized it to only use a selection, and also categorized the content according to the creation or consumption of media. Current Alex uses a format that mixes both these ideas into one post but I feel it may be beneficial to separate them to have these two types of overarching categories and go further into detail about each post. Finally, I close with a short description of Alex, and a link to contact her. This provides more insight into who she is, and why the user should read her opinion. These currently use placeholder text, a more detailed description different from the top of the page should replace it.
Hopefully, this critique provides some more direction and clarity for Alex as she continues to develop herself online. I think her site has some fantastic ideas and content, but the organization and presentation are prevented users from engaging with it.
While this may be more geared to web designers with more experience I still think Alex (and perhaps more members of PUB101) may benefit from them.
Figma is a free prototyping tool that designers use to mockup websites, apps and plenty more! It is a really powerful visualization tool. It’s fairly simple to use with plenty of videos and resources to help people learn the platform. It is an internet-based program but also has a free desktop download.
While the limitations of WordPress and its themes may not allow for a design exactly like this, Alex can still implement parts of this using a customizable WordPress theme such as Astra and OceanWP with the Elementor Plugin. The Elementor plugin is a visual drag and drop interface that allows the user much more control over their website layouts.
Website design is largely based on best practices and already establish design systems. For inspiration for good web design and structure check out:
To understand the web works and more detail about the principles of design mention in the lecture check out these resources: