100 Days of UI Challenge - Landing Page

Problem Statement

Working on the third theme for UI challenge took me back to those late nights around ten years ago, when I would spend hours scrolling back and forth between sections just to check if the visuals I had used made sense and the flow of the content "felt right". Every element in the layout had to work with the whole composition for the website to look cohesive, for the user experience to feel effortless.

Still in my smart ring phase, I decided to revamp the RingConn Gen 2's website. They have a wealth of information in the hub which can be perceived as overwhelming due to styling differences, whether it be in terms of text, color selection, image tonality, and the like.

Solution

To improve the layout, the following changes were made:

Visual cues that could cause branding confusion were reworked. Instead of having 4+ colors on the site (i.e. multi-colored icons, blue buttons), highlight colors were reduced to just 2 — gold and brown. This is to align with the flagship color of the RingConn Gen 2. Usage of pure white as a background color was reduced throughout the website to help manage eye strain. A soft and warm beige was used as a background color, instead. Additionally, the website font face was changed from Helvetica Now Display to Golos Text — a smoother, rounder font face — to better align with the overall branding.

The banner header was reworked completely. The RingConn Gen 2's claim to fame was that it is the first smart ring with sleep apnea detection but the accompanying visual did not communicate the same message. Given this, I repurposed one of the images in the site and used it for the banner header to show.

Bloated sections were either condensed or trimmed out to reduce content overwhelm. The OSA Risk Assessment and SpO2 monitoring snapshots were placed in a single row instead of a long column for easier reading and to reduce scrolling. This new approach to the layout also makes it easier for users to consume the content on a single screen.

The feature breakdown section for the RingConn Gen 2 was moved up, closer to the sleep insights section, for continuity. This allows users to seamlessly transition from consuming sleep tracking-specific information to seeing the other benefits of wearing said smart ring. Then, to further strengthen RingConn Gen 2's claim to fame, the customer reviews were placed right after the features section.