UI Audit Edition - Content-positioned UI with Rekods

5th week calls for the 5th 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 “Rekods,” an all-in-one business management app.

What is Rekods?

Rekods is an all-in-one business management app that provides a simple yet effective business management application designed specifically for small business owners. Send invoices, track projects, collect payments, and stay on top of your business--all in one place.

You can check Rekods here: https://www.rekods.com/

Rekods’ landing page is lively, featuring some colors that pop and attract users with their friendly tone. However, some of the elements and content of their landing page can be improved to get the attraction they deserve.

UI Observations

Enhancing the visual consistency: Some images, features, and sections are not aligned with the landing page's style. Aligning the features and images more with the landing page's overall style will create a more cohesive and engaging user experience.

Improving hierarchy and spacing: Some of the content can be misunderstood and confuse users due to tight spacing and lack of hierarchy. Optimizing the placement and spacing of elements will make the page even more user-friendly, helping visitors navigate and understand the content with ease.

Adjusting section positioning: Some of the sections appear immediately without giving enough context for the user to comprehend what this product is.

What the UI needs

Although Rekods’ landing page is popping with color and style, they just need a good refinement of hierarchy and positioning to give them that boost that they need to attract their audience.

Here are the improvements that I would recommend:

1. Breathable spacing and clear understanding of their content and sections in order for the users to not get overwhelmed with the content and offer better readability.

2. Appropriate positioning for their sections is a must in order for the users to understand the product they are viewing and be prepared when they are given the option to test it out.

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:

• Better hero section to focus on the app and the header that describes it.

• Cleaned up the Feature sections to give users better understandability while making it more functional and formal.

• Update the Pricing layouts to save more space on the page and have a better and more readable view when a user is checking out the packages.

• Cleaned up the Footer section to save space and give a better hierarchy to the content it has.

• Gave proper attention to the margin spacing on the page as well as added enough spacing on the sections to have better separation per section.

What I learned

In this UI Audit edition, I learned that knowing and understanding where to position certain sections on a landing page will affect users and how they’ll react to the content. Maybe we added the pricing section too early into the landing page. It could either tease them of what the product is and has OR it can overwhelm them without giving enough context for them to comprehend. Kind of like storytelling, section positioning is a factor that we should always consider whenever we create these kinds of UI in order to properly translate what we want the users to understand with the product we want to share.