Jessica W. Liu
UX / UI Designer
press_header.png

Press Page Redesign

 

PRESS PAGE

USABILITY TEST + REDESIGN

 

designlab_header.png

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:

  1. Can users find the information they need (i.e. press releases, featured articles)?

  2. Did users know what they were looking at?

  3. Was it easy for the media to find contact information?

PRESS_OLD.png
PRESS_OLD.png

 

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 

 

ANALYSIS:

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. 

 

PROPOSED SOLUTIONS:

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.

Located at the top of the page, this contact information does not tell the user immediately that it is a press page.

Located at the top of the page, this contact information does not tell the user immediately that it is a press page.

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:

Users have much more information to get through before ultimately finding the log-in button  

Users have much more information to get through before ultimately finding the log-in button

 

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.

 

CONCLUSION

The various designs I proposed as a redesign of the press page to have more clarity.

The various designs I proposed as a redesign of the press page to have more clarity.

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:

landingpage_final.png

Project Date: January 2015

Project Length: 1 Weekend

Role: Research & Design