wpblogdesigner

Overview

In this project, I worked on redesigning the homepage of wpblogdesigner. This case study explores the process of redesigning the wpblogdesigner website to enhance the user experience. My challenge was to improving the usability from the user and from the other hand the business standpoint. My focus was redefining the centric solutions that would help users to find the most useful information for this plugin.

Role

A showcase to redesign the home page of website, so the people will find the information of plugin that they are looking for.

Tools

- Adobe Photoshop
- Figma

wpblogdesigner

Design Process

The design process which I followed is the fives stages of the Design Thinking process : Empathize, Define, Ideate, Prototype and Test.

Empathize

Why the wpblogdesigner, needs a redesign?

After a careful analysis of wpblogdesigner homepage, I drew the following conclusion of why it needed a redesign :

Site notice / Top header banner

  • Even if the site notice has close button, the section does not close.
  • This close option is not available for mobile devices.
  • The color contrast does not get the user attention.

Mega Dropdown menu

General, mega dropdown menus which also referred to as “fat menus” are excellent design choices for accommodation at large number of options or for revealing lower-level site pages at a glimpse.

Mega dropdown menus consolidate all of the different sections of the site, application, or system into one long list, which is further broken down into subcategories and accessed from the navigation bar, such as the wpblogdesigner.

As the name suggests, mega dropdown menu is used to show large groups of options, data sets, categories or other types of related content at once.

A vital question that you need to ask your self before implementing dropdown menu is :

Will they be the best way to organize the content of a web page or application?” 

In our case :

  • The mega dropdown menu give the user a sense of confusion.
  • The mobile menu is not user friendly.
  • The menu have some problems when the user hover the menu.
  • The mouse loses the orientation over the selection of dropdown menu.

Slider / Slideshow

Using slideshows 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 website and especially slideshow looks like using “banner blindness”.

Basically, banner blindness is a phenomenon in web usability where visitors to a website consciously or unconsciously ignore banner-like information, which can be also called “ad blindness” or” banner noise”. 

The banner blindness of homepage and especially for the slider

Some of the reasons as to why it doesn’t work.

  • Human eye reacts to movement. Unless the slider (slideshow) 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 equals no message. Slideshow, get hit by banner blindness and most 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. 
  • Slideshow slow things down. As screens get more pixels and monitors are larger, users must download these huge images for a slideshow.
  • Banner blindness. They look banners and people just skip over them.
  • In mobile phone, the buttons are too small, the text is probably covering someone’s face or other content, and general people who try to swipe thought a slideshow probably symptomatically just click the slide instead.
  • To build a slideshow right, meaning one that’s built to be accessible and implement usability best practices.

Animation

Animation in web design is something that we are starting to see more and more of every day. The key to animation as a design trend is moderation. Small, simple animations are interesting and attractive. Especially the might not even think about their being an animation at all. Large scale animations can be interesting visual that pull the visitor into the design. But if we start mixing up too many different moving effects, it can cause complete the mess.  

Screenshots

Screenshots are commonly used in the design, web app sites, portfolio, template/theme shops, etc. In many cases the screenshots are a major part of the design that helps to attract the attention of visitors.

So, it is a good idea to show user and potential customers what they’re getting in the form of screenshots. If our product is looking good enough, then we might just want to put them intire to the website and show them.

Buttons

Button is an interactive element that enables to get expected interactive feedback from the system following a particular command and allows a user to directly communicate with the digital product, download a piece of content, download some data, etc…

General, 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, like gradients, shadows, highlights.
  • Text button. A button made or pure text.
  • Floating action button.

In our case we use flat buttons, ghost buttons, and in some cases the style which is applied is different. Generally no single style applied to buttons and I do not feel the push them for action.

Lines

Lines, besides being used to create a shape, can be used to create perspective and dominant directional lines and they can be grouped to create a sense of value, density or texture.

In our case we use some intermittent lines below the titles in every section. These intermittent lines give the impression that the user feel of having to press one line to navigate the next content immediately. General, looks like a slider rather than a simple line.

Typography

Typography can work in many different ways in the context of a website or an app. Typography is one of the most important and one of the most neglected aspects of written communication.

In our case the font-families which are used are not pairing as well as we really need. Τhe fonts which is applied for the slider is “Bitter” and the font-family which is applied for the content of the website is “Poppins”.

Goals for redesign 

Usability :  Improve the experience. Allow the visitors to easily find the most information that they really want like layouts, templates, features, pricing.

Business : The new homepage should focus on the description, advantages and benefits of this plugin and the easy way to find and see all the layouts and templates.

Persona

Understanding the user needs.

Based on the main goals of redesign the homepage, I try to determine one type of persona user, Mary Garzian. Mary is a fashion blogger and she wants to upgrade her personal blog with something fresh style of blog and template.

Mary Garzian. Persona.

Define

How might we…

Improve the website’s aesthetic and site structure of homepage so that visitors can easily understand what the Blog design is, why they should install the plugin, how to find the features of plugin, how to find usages of layouts, templates, and general, how to create a positive experience?

Ideate

After exploring wpblogdesigner needs a redesign, let’s get the ideation. How we can solve the problems.

The solutions

Steps to implement the Top Banner of Header

  • The top header will be as sticky in scroll.
  • The close button will be removed.
  • It will be used better color combination.
  • Instead of the current discretion we will only use the discount in %. The point is to grab a bit more the user attention. My proposal : “SPECIAL OFFER – Save 20% OFF! – Buy Now!” 

Steps to implement the dropdown menu

  • At first we must identify what the categories or dropdown menu titles are, which involves reviewing your contents to establish common themes and links between items, options, functions and site contents.
  • After arranging these options into their appreciate groups, we 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.
  • Then place the menu titles in a row and determine how to order them. Depending on the situation, frequency of use can be an appropriate criterion. In other cases, an alphabetical order can be useful.
  • Using better typography with bigger font size to reduce error rates and save the user from having to make annoying backward steps just to get back to the list of the other options.
  • Using headers and dividers so the user can immediately determine which category an individual options belongs to.

Steps to implement the Slider/Slideshow

Replace the slider/slideshow with a big hero image and more specific with the featured template of plugin.

Steps to implement the Animation

  • Animation should be smooth and seamless, not jumby 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, but at the same time quick enough not to cause waiting. 
  • Simply bits of animation can guide the user without changing the aesthetic. 
  • The primary reason to use animation is 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.

Steps to implement the Screenshots

  • Include bigger dimensions of screenshots
  • Clear illustrations of the content.
  • A GIF can capture a mood or convey a message in seconds. So we can include them in the new design of the website.

Steps to implement the Buttons.

  • The buttons will made look like buttons. Apply the same style.
  • Make them look clickable.
  • Reduce the total amount of buttons. We do not need to have a button for everything.

Steps to implement the Lines

Remove the directional lines.

Steps to implement the Typography

  • Pairing fonts. Choosing the right fonts.
  • Alignment.

Prototype

High fidelity design

I designed the final user interface of the homepage on Figma of the following screen:

The design of wpblogdesigner

Colors

The basic color pallete of wpblogdesigner

Typography

The typography of wpblogdesigner

Components

The componets of wpblogdesigner

Iconography & Illustrations

The iconography and illustrations of wpblogdesigner