UI Audit Edition - A UI Refinement with Pgrammer

It’s the 4th week of the UI Audit Edition!

Hi! My name is Jesiah and I am a UI Designer at Nektic. I’ve been a UI Designer for over a year working on landing pages, website UIs, and branding, and I have been enjoying and learning the field so much that I decided to create a UI Audit series for the whole 3rd quarter of 2023.

We’ll be observing and refactoring “Prgrammer,” an AI coding interview practice companion.

What is “Prgrammer?”

Pgrammer is the ultimate coding interview practice companion. Unlike traditional methods like LeetCode, Pgrammer provides a personalized learning experience that ensures you're ready to ace those interviews with confidence. This keeps your learning on track without frustration.

You can check Pgrammer here: https://www.pgrammer.com/?ref=producthunt

Pgrammer is another landing page that is straightforward, showing their content and what they want to convey to their users immediately. However, there are aspects of it that I can observe that are in need of improvements in order to attract potential users.

UI Observations

• Exploring Ways to Enliven Design: Their current design choice is “straightforward” but a bit dull and inconsistent. Discovering vibrant design choices is important to captivate users, infusing a fresh and engaging look into the Pgrammer landing page.

• Guiding User's Journey: While their content is all laid out for the users, I can observe that they lack in hierarchy which isn’t great in guiding the user to their goal. Introducing a clear hierarchy that effortlessly guides the user's eyes through the page ensures that they can easily find what they're looking for.

• Enhancing User Context: Some sections lack contexts to what they are, leaving it up to the users’ understanding. Working on providing a rich context for each section makes sure that users instantly understand the value and purpose of every section on Pgrammer’s landing page.

What the UI Needs

Although the content in Pgrammer’s landing page is there, it lacks context and hierarchy which doesn’t give the user enough guidance and aesthetic when viewing their page design. Here are some improvements that their UI needs:

1. Add context to the section to give guidance and understanding to the users who will view this page.

2. Create a better design choice/style for the page to help make the page more attractive and clear for the users.

Refactored UI

Now after those observations, here is what I came up with to help how Pgrammer’s landing page can be improved.

Here are the improvements I made:

• Improved the hierarchy of texts for better readability and better guidance for the users’ eyes.

• Improved and adjusted layouts for each section to add consistency.

• Added new headers and context in each section to give understandability for the user.

• Added another CTA section for the page to improve gathering leads for this product.

• Added a footer to the page to promote Pgrammer’s social media and include the copyright tag.

What I learned

In this UI Audit Edition, I learned that giving proper context and appropriate style to a UI design will help guide and attract potential users when navigating through a page. We understand that UX is very important when designing, but in order to attract a user to our services or products, a good and well-thought-out design will do a good job. As a UI Designer, it is my job to do exactly that and give enough context for the users to understand the products and services we want to show them.

Picks of the Week