USABILITY TEST + REDESIGN
I was given the task to propose a redesign for the press page that was getting increasingly filled with more and more press releases and news mentions. Ultimately, the entire corporate site got a face lift but some my proposed solutions were carried over into the final iteration of the press page design.
RESEARCH & DISCOVERY:
To redesign the press page to better showcase the company mentions in the news and press releases, I had to first understand what pain points users had when viewing the page. Due to the urgency of the task, I was only able to recruit 2 users to test the page with. The research was conducted to answer the following questions:
Can users find the information they need (i.e. press releases, featured articles)?
Did users know what they were looking at?
Was it easy for the media to find contact information?
I conducted a usability test and asked them to:
Walk me through where they looked and tell me what they saw first
Figure out what the page was for
Find information to contact the company at
While the user's both went through the page, I observed their actions and took down notes of their comments, questions, and confusion. Some highlights of the notes I took while users were browsing the page are as follows:
The first thing visible was the word “Press” then a large empty space on the left
Scrolling down, there were “random stuff” with sections and article names
This section had a lot of “meshing of logos”
He viewed one oddly placed logo and article that cut it off
It lacked visual cues as to what exactly he was looking at
The “X” bullet points looked more like “X’s” to close something out
Clicking on the logos themselves brought them to the same image...in a new tab!
With these things in mind, I did a quick brainstorm session and came up with the proposed solutions below.
1: KNOWING WHAT THE PAGE IS
Both users did not know what sort of page they were looking at in the beginning. With the contact information at the top and the question “Want to learn more about Dealstruck?”, they initially thought that it was a contact page. However, scrolling down the page, they then realized that it was a page to showcase articles.
What kind of articles, however, were unbeknownst to them.
Proposed Solution: Visual Cues
Thus, in my design I proposed to use some visual cues to give the user information about what they were to expect on the page.
At the top of the redesign, below the initial header, I put in large words “Dealstruck in the News” to let the user know that the articles listed below were about Dealstruck being mentioned in news outlets so the users would know what information to expect.
Utilizing the same 3x3 structure to showcase the articles as in the older design, I decided to create a more grouped separation by creating shaded blocks with the article titles on top, then having the logos of each website on the bottom, as well as the name and date.
This is to provide the user with an idea of where each article came from, and to focus their attention to the article titles. With a quick glide through the page, users are able to see the familiar logos as well as the name of each journalism site.
2: PRESS INQUIRIES
In the scenario that a journalist is seeking out a point of contact for media inquiries, I proposed a call to action button immediately in the header so that it allows the user to find the information they need at the top of the page.
In addition to that CTA, I also placed a link to the bottom of the initial section of Dealstruck mentions. This directs the user immediately to the bottom to the Media Contact information so that the user no longer needs to continue scrolling to immediately get to the destination that he wants.
Which then leads users directly to the bottom of the page with complete media contact information.
3: SHORTER SECTIONS, MORE ORGANIZED PRESS RELEASES
To organize all of the many press releases about Dealstruck, I opted for another blocking method in which it highlights the article title and website it directs to in order to maintain consistency from the first section. The user can immediately see which websites have mentioned Dealstruck, when, and about what.
To maintain a cleaner structure, I opted for a “See All Press Releases” link to expand the section to show all of the press releases. This is so that the user does not have to scroll too much to get to the next section of the page.
4: REFRESHED NAVIGATION
In the original design, the navigation menu clumps together all informational links and log-in links. For a returning user that is already registered, they must read through the all of the options until finally reaching the log-in link at the end as seen below:
Proposed Solution: Separating Menu Items between Information vs. Returning Users
To make the process easier for the returning users, I refreshed the navigation bar, maintaining the same clean palette and logo but moving the informational links closer to the logo on the left, and separating out the “Log In” link to the right with a contrasting color like so:
Thus, when first-time users approach the site, they will immediately see the logo, then the links that can direct them to more information via the menu bar.
For returning users, however, it is easier for them to find out where to log in to their accounts by having the link a different color from the rest of the menu items, and separating it to the right so as to not confuse it as more informational links.
My proposed redesign gives the user a more interactive layout by allowing them more visual cues as to what the page is about. There is more to look at, and more to direct them down the page. Additionally, it allows for cleaner organization of each section, and creates a more apparent separation of the different topics on the page.
Ultimately, however, the entire corporate site was given a face lift and the styling/branding elements were updated. Keeping the new style in mind, I updated my redesigns to fit the style of the rest of the pages on the site as seen below:
Project Date: January 2015
Project Length: 1 Weekend
Role: Research & Design