UI/UX Design Upgrade for News Portal

Technology Stack

React Native
Java

The Client

This subscription-based news portal contains impactful and current news stories - from long reads to short briefs. It categorizes diverse topics users can hover over and choose from. It brings everything together in a single landing page for easy viewing, from the day’s top stories, business spotlights, past events, newsletters, and paid content to free reads. In addition, bold headlines and sufficient white spaces make reading even more effortless on this platform.

The Challenge

Although the website was up for use and its backend was maintained by the client, the frontend lacked the visual appeal required. The poorly structured UI led to a lower subscriber count. There were several issues related to content flow, color contrasts, footer area, broken links, redirected pages, mobile views, etc.

Moreover, important CTA buttons lacked strong colors. Information hierarchy in the mobile view wasn’t clear either. Things looked cluttered and inconsistent. We had to replace many ‘extra decorative’ elements with just the core ones for optimum viewing.

UI concerns such as these piled on the misery for users. Instead of making things easier to access, the site made it hard for users to get what they were looking for. It was becoming difficult for users to go from point A to B. The client sought Capital Numbers’ help to fix these elements and make the site more likable to readers. Capital Numbers had to boost the UI/UX to increase engagement and subscriptions by re-imagining how users would love to interact.

The Solution

We set to work by putting together a team of proficient frontend developers from our pool. Our developers started by unearthing areas that matter most in user journeys like login buttons, pricing, pop-up windows, footer section, social shares, etc. Experience is everything for visitors to convert to subscribers. So, our focus was to deliver an experience that drives users to stay glued to the site.

We proceeded with the development work using React Native. The most significant advantage of using React Native is that it allows developers to reuse code for web, iOS, and Android environments, saving time for compilation and build.

Moreover, it’s easier to fix and reflect changes in React Native apps while they’re live. React Native also offers a variety of native libraries that give apps a native look across platforms. For example, we used the React Native Anchor Carousel library to add a slider effect for web and mobile users to swipe and see stories one after the other. We also used the React Native Poppable library to add critical pop-up windows for users to act on. Besides, we embedded React Native Modal to ensure pop-ups resize correctly on different screens. Some areas had scattered information. So, we added React Native Card View to put together important information within card layouts.

Clear communication was a priority for the client. So, we frequently held sync-up meetings with the client through Slack to exchange a free flow of ideas. Throughout the engagement’s 5-month period, the client got us to custom code various UI elements, which our Agile developers successfully implemented directly to the staging server maintained by the client.

Results

Because of Capital Numbers’ engagement, the client could deliver a more unified information architecture today. We fixed all pain points like broken links and wrong redirects. Although it isn’t a complete overhaul, it is a visual refresh critical to the client’s growth. The client now finds an increased audience because of the following UX changes we brought about:

Orderliness

A once confusing content flow now has an order with different news sections grouped and organized correctly.

Responsiveness

Our solution is responsive across all mobile screens and browsers, bringing in more traffic.

Legibility

Card UI helped us chunk different stories within card-like boxes - allowing better legibility.

Our JS-powered search bars help users filter out desired news/headlines they have in mind.

Pop-up

Our full-screen, custom pop-up generates more clicks and subscribers currently.

Slider

We changed the hard-coded sliders and made them dynamic to ensure the content presented is always fresh.

Typography

We made the entire site much more readable by replacing the existing Matteo font with Playfair Display font for headlines.

Contrast Areas

We used solid colors for primary buttons like ‘Subscribe’ and ‘Get Started’ to differentiate the primary actions from the secondary ones, which were lacking earlier.

Ornamental Designs

We made cosmetic changes around the pricing page by splitting each package into comparison tables and expanding the costliest plan to grab users’ attention.

High-quality, Bug-free Code

Our high-quality, bug-free code was tested by the client’s backend team and deployed to production without hiccups.

Refining and Restructuring

We artfully customized all code and refined the UI in a way that impressed the client, who left us with positive feedback on Clutch and G2.

Newer Visual Identity

Our visual upgrades in critical parts of the pages paid off well as the client now attracts increased readership, sales, and email opt-ins from both web and mobile platforms.