Introduction

This is a two-part project. The first part is to analyze the landing page design of AJR's current web site and identify the UX/UI problems. The second part is to redesign the landing page using Figma. The final products are a detailed report and a set of redesigned layouts.

Part I: Issues and Solutions

A number of issues were found during the analysis. Here is the quick summary:

1. Non-responsive template
2. Uncomfortble colors and inconsistent designs of UI elements
3. Out-of-place ad and lack of space for announcements
4. Poorly organized navigation
5. Presentation of the current journal issue is unattractive
6. Tabbed area for articles is difficult to read
7. Inconsistent graphic elements in the side bar
8. Footer provides little useful information

These figures were created to show some of the supporting evidences.

Among the above issues, the most severe ones are about the responsiveness, the visual styles, and the navigation.

Part II: Redesign

Based on these findings, the proposed solutions are:

1. Re-design the page in a responsive web template.
2. Re-design the color palette to create a more harmonious look. Make the containers of contents lool even. Choose modern fonts and make the size responsive to the viewport size. Use consistent styles of the UI elements.
3. Give the event more real estate on the page. Remove the banner from the header and put it into the hero area where important announcements can be featured.
4. Re-organize the nav items and keep them in the same area. Rename “Information” to “About AJR” or “About us”. “Contact” can move under this item. Rename “Authors” to “For Authors”, and “Reviewers” to “For Reviewers”. Remove “Multimedia” and feature the links elsewhere on the page (footer, sidebar). “Search”, “Help”, and “Login” can be represented with icons. Enlarge the search box and provide hints inside the input field.
5. Move “COVID-19” and “Podcasts” to the side bar. Replace the table of contents with figures and article titles from the current issue.
6. Reduce the number of articles listed. But provide more information, such as research topics, collections, authors, figures, etc, for each article. For each tab, provide a heading.
7. Reduce the number of articles listed. But provide more information, such as research topics, collections, authors, figures, etc, for each article. For each tab, provide a heading.
8. Redesign the footer, add additional elements like logo, contact, search, login, etc.

Redesigned landing page layouts can be viewed on Figma.