The Blog Designer Pro is a responsive WordPress blog plugin. It has more than forty unique design blog templates. The user can create multiple blog pages with a single WordPress installation. This story is a case study of UX/UX. Below, I describe the designing process which I have done.
The design process
The design process which I followed is the fives stages of the Design Thinking. Empathize, Define, Ideate, Prototype and Test.
Why this plugin, needs a redesigning?
After a thorough analysis on the home page, I drew the following conclusion of why needed it a redesign :
The banner on the top of the header.
- Even if, the top of the header has a close button, the section does not close.
- The close option of the menu is not available on mobile devices.
- On the other hand, the contrast of color does not get the user attention.
The mega dropdown menus.
General, mega dropdown menus which also referred to as “fat menus” are excellent design choices for accommodation at a large number of options. Also can be used for revealing lower-level site pages at a look.
Also consolidate all of the different sections of the site, application, or system into one long list. This list is further broken down into subcategories and accessed from the navigation bar, such as this plugin.
As the name suggests, mega dropdown menu is used to show large groups of options. Such as data sets, categories or other types of related content at once.
Some specific points :
- The menu gives the user a sense of confusion.
- The mobile menu is not user friendly.
- The menu has some problems when the user hover.
- In effect, the mouse loses the orientation over the selection of the dropdown menu.
For the most part, the menu gives the feeling of a negative reaction to the end user.
Using sliders is a great way to grab the users attention and tease them with the promise of further images or products.
Let’s see in action how the slideshow looks like using “banner blindness”.
The banner blindness is a phenomenon in web usability. This happened where visitors to a website consciously or unconsciously ignore banner-like information. This can be also called “ad blindness” or ”banner noise”.
Some of the reasons, why this does not work.
- The human eye reacts to movement. Unless the slider is the only thing on our website, it’s not a good thing. It means it takes away attention from everything else – the stuff that actually matters.
- Too many messages equal no message. Slider, get hit by banner blindness. Most of the people won’t even pay attention to them, but even those who can’t really get the messages. Often the sliders are so fast that people are not even able to finish reading them, even if they want to.
- Sliders slow things down. As screens get more pixels and the monitors are larger, as a result, the users need to download the huge images for a slideshow.
- Banner blindness. The users look banners and eventually the people just skip over them.
- In the mobile devices, the buttons seem to like too small. The text is probably covering someone’s face or other content, and general people who try to swipe thought the slider probably symptomatically just click the slide instead.
To build a slider with the right way, meaning one that’s built to be accessible and implement as long as the usability best practices.
Animation in web design is something that we are starting to see from time to time of almost every day. The key to animation as a design trend is moderation. At the same time, small, simple animations are interesting and attractive. If we start mixing up too many different moving effects, it can cause complete the mess.
In short, the screen shots are commonly used in the design, web app sites, portfolio, themes, etc. In a lot of cases, the screen shots are a major part of the design and help to attract as well as the attention of visitors.
So, it is a good idea to show user and potential customers what they’re getting in the form of screen shots. If our product is looking good enough, then we might just want to put them intire to the website and show them.
The button is an interactive element. Allows a user to directly communicate with the digital product, download a piece of content, download some data, etc.
There are five types of buttons :
- Raised Buttons. A typically rectangular button that looks like it could be pressed down.
- Ghost buttons. A rectangular button with an outline but no solid fill.
- Flat buttons. A rectangular button without any three-dimensional effects, such as gradients, shadows, and highlights.
- Text button. A button made or pure text.
- Floating action button.
In our case, the buttons are coupled with flat and ghost style. The style which is applied is not the same. Generally, no single style applied to the buttons and I do not feel to push them for action.
Lines, besides being used to create a shape. They can be grouped to create a sense of value, density or texture.
As a matter of fact, in every section they used two lines side by side. These two lines give the impression that the user feels of having to press the one line and navigate into the next content. General, looks like a slider rather than a simple line.
Typography can work in many different ways in the context of a website or an app. It is one of the most important and one of the most neglected aspects of written communication.
Optimizing the typography at the same time is omtimizing the accessibility, readability and usability.
Τhe font which applied for the slider is “Bitter”. The font which applied for the body of the website is “Poppins”. “Bitter” is a slab serif typeface and “Lato” is a sans serif typeface. As a result, the typerfaces which used are not pairing as well as we really need it.
Slider of reviews
From the other hand, the carousels is a method which can be displaying marketing information on a home page.
In the case of the Blog design plugin, it used a carousel for the reviews. This carousel is difficult to manipulate and especially on touch interfaces.
Goals for the redesign
Usability: Improve the experience. Allow the visitors to easily find the most important information, like layouts, templates, features and pricing.
Business: The new home page should focus on the advantages and features of the plugin. Additionally, an easy way to find all the layouts and templates.
Understanding the user needs.
Based on the main goals, I try to determine one type of a persona user, Mary Garzian. Mary is a fashion blogger. She wants to replace her blog with a fresh style of blog and template.
How might we…
Improve the website’s aesthetic and the site structure of the home page. So the visitors can easily understand what the Blog design is. How they install the plugin. How to find the features of the plugin. On the other hand, how to find usages of layouts, templates. General, how to create a positive experience.
After exploring all of these, the next step is the ideation. How the problems can be solved?
Implement the top banner of header
- The content of the top header will be sticky when the user is scroll.
- Remove the option of the close button.
- It will be used a better color combination.
- Instead of the current choice, it will be used the discount in %. The point is to grab the attention of the user. The proposal: “SPECIAL OFFER – Save 20% OFF! – Buy Now!”
Implement the dropdown menu
- At first, must identify what are the menu titles of categories or dropdown menu titles are?
- Should assign a logical and fitting title to each category. These labels are used to promote immediate awareness of what the users will find when they select a menu item.
- Place the menu titles in a row and determine how to order them. In other cases, the alphabetical order will be useful.
- Apply the typography. I used bigger font size to reduce error rates. As a result, save the user from having to make annoying backward steps and just to get back to the list of the other options.
- Used headings and dividers. Can immediately determined which category individual
Implement the slider
Real images of a product have a bigger impact that we think. They are the first thinks that the visitors see then come in the website. Of course, the layouts, the color palette, and the typeface are very important, in design. Including real images of the product would make the section looks more professional.
With this in mind, the slider is replaced with a bigger image. This image
Implement the animation
- The animation should be smooth and seamless, not jumpy or mechanical. It needs to serve a purpose for the user and not get in the way of the content.
- When the elements change their state or position, then the duration of the animation should be slow enough to give users the possibility to notice the change. At the same time quick enough not to cause waiting.
- Simply bits of animation. Can guide the user without changing the aesthetic.
- Just used animation to increase the usability. Simple animations can be great guiding tools to help people understand what buttons to click or where to go next in the map of a website.
Implement the screen shots
- Included bigger dimensions of screen shots.
- Clear illustrations of the content.
- A GIF can capture a mood or
conveya message in a few seconds.
Implement the buttons
- The buttons should look like buttons. Apply the same style.
- Make them look clickable.
- Reduce the total amount of buttons.
- We don’t need to have a button for everything.
Implement the lines
Remove the continous lines from the sections.
Implement the typography
- Pairing fonts.
- Choose typefaces that work well in various sizes.
- Sufficient color contrast.
Implement the reviews
- Replace the carousel with the static of reviews.
- Include only three reviews.
- Add the best cases of the reviews.
- Include a real image of the reviewer.
- Add a call to action so that the user can redirect to the page of the reviews.
The web design style guide
I made a study for the brand because it needed it to understand what it stands for. Then, I tried to learn the story behind the brand. I observed the team while at the same time I tried to find some additional information about the company, from the World Wide Web.
Also, I spent some time to use the plugin and see in action how it worked. For this reason, I installed some templates and layouts.
I opened the document and I wrote down a title and a short description of what the company is and what it is for. The scope and services.
It was easy to design the home page because I follow some rules found in the style guide. This enables greater transparency and organization of elements. First, the style guide helps the designer and on the other hand, helps the developer to a clearer CSS code.
I started with the colors. I chose the primary and secondary colors. For the main titles, I choose a darker color. In our case, I used the #474747 HEX color. In addition, for the body text, the color is different from the headings. I choose a brighter color
Above all, I decided the sizes of all the titles and the font size of the body. I compare them to each other and arrange them in the right hierarchy. With this in mind, the hierarchy on typography follows the H1, H2, H3, H4, H5, and H6 and of course the body.
For the headings, is used the Merriweather typeface. Merriweather is a serif font. It is very readable and at the large sizes, also it looks very pleasing as well.
For the body is used the Lato typeface. Lato is a sans serif font. The letters have some unique curves which can be only seen in a larger size. This helped a lot for the easy reading.
The look of the input fields and the style of buttons are on balance with the main style of the home page. In fact, I decided to add some effects for the buttons like a drop shadow on hover. This helped me to create a meaningful story.
When I prepared the icons and the Illustrations, I focused on the style and position of the icons. Some of these icons are used for the main content and some others for social media. The total width and height for the content icons is 64px x 64px and the total width and height for the social media icons is 24px x 24px.
When I came to photos/images, I tried to be careful about their colors and style. The screen shots are real and they used to properly capture the content. From the other hand, I used a free stock image. This image helped me to make the section of customers more regular.
It is important to realize that the grid is a unique element on the style guide. We need to pay a lot of attention. It’s serious like the elements of the layout, the spacings, as much as for the responsive design. The grid which is used for the home page layout is divided
The only constant is the changes
The style of these certain elements concerns only the home page and not all the other pages of the Blog design. Actually, this web design style guide is not completed. We can add some new improvements or some new functionalities. So, this case study is
High fidelity design
I designed the final user interface of the home page on Figma.