Hubspot is an inbound marketing consultancy that integrates search engine optimization, blogs, and social media to increase their clients’ ability to get found online.
As part of an interview process, I was asked to redesign one of their products – the Keyword Grader. Clients use the Keyword Grader to evaluate how well a site is optimized for certain keywords. It shows the site’s search engine rankings, compared with the rankings of competitors, for specified keywords.
As part of an interview process, I was asked to redesign one of their products – the Keyword Grader. Clients use the Keyword Grader to evaluate how well a site is optimized for certain keywords. It shows the site’s search engine rankings, compared with the rankings of competitors, for specified keywords.
Original Design
The existing Keyword Grader had various issues in terms of User Interface and User Experience. Labeling was not clear for the options. Tools were placed in sporadic locations. Little attention had been given to it overall.
One key impetus for changing the keyword grader is that Google is soon changing the way search works. They are personalizing search results based on location and other information Google knows about the user based on blogs, e-mail, and social media. Once search is personalized in such a way, global search engine rankings (one of the main metrics in the keyword grader) are no longer relevant.
Task Flow Diagram for New User Signup Process
I started the research with a task flow diagram to understand two processes behind using Hubspot and annotated it with plausible thoughts from the user (in blue) and suggestions for simple design improvements (in red). First, I diagramed the process of a new user signing up.
Task Flow Diagram for Returning User Optimizing a Site
Next, I visualized the process for a returning user logging in and using the Keyword Grader to optimize a site.
In redesigning the Keyword grader, one central concept was to introduce viewer profiles specifying the demographics of people targeted by the site. For example, a company that markets study-abroad packages to university students may have profiles of students, professors, and parents. Perhaps the company is also targeting viewers in certain geographic areas. As part of the setup process with HubSpot, the user would create these target profiles.
New Wireframe: Table View
The profiles would match with the way Google’s search results are personalized, so search engine rankings would be viewable in the Keyword Grader, segmented by profile.
The wireframes offer a “recommendations” bar on the top – for a user who is looking to quickly find some improvements to make to search engine optimization.
The wireframes offer a “recommendations” bar on the top – for a user who is looking to quickly find some improvements to make to search engine optimization.
New Wireframe: Table View Options
New Wireframe: Chart View
For users wishing to dig deeper, they can navigate a table view or a chart view of the keyword data, both of which are highly customizable.