Redesigning the Nigeria Brewery Website to make the Brand more visually appealing and content discovery(drinks) are easy.

Nigeria Brewery Landing Page Redesign

Nigerian Breweries Plc is a Nigeria-based brewing company. The Company is engaged in brewing, marketing and selling of lager, stout, non-alcoholic malt drinks and soft drinks.

Project Details

Role: UI/UX Design, Discovery, Hi-fidelity Designs, Research

Tools: Figma, Affinity Designer, Sketchbook & Pen

The Challenge

After a careful analysis of the Nigeria Brewery Website, I drew the following conclusion of why it needed a redesign:

What i did

I started by analyzing the Nigeria Brewery Website. This helps in mapping out the site, finding every detail about the Web pages, and figuring out what content deserves to be unique.

Moving to the second step, I looked around for inspiration and references. I used LandBook, Behance, Dribbble, and OnePageLove for this. It helped in getting some ideas. Once I had a good idea about how I wanted the website and the information to be structured. I moved on to Pixel perfect designs.

Visual Direction & User Interface Design

Site map

I mapped out all the features and categories in a somewhat convoluted attempt at site hierarchy and organization to provide users with an enjoyable experience on the website. Based on this, it was possible to simplify user flows between pages by removing unnecessary pages, merging existing and adding new ones when needed.

Homepage

A company's homepage is its face to the world and the starting point for most user visits. Improving the homepage multiplies the entire website's business value. Apart from visually improving the content structure and UI. I also wanted to make the content easy to implement when coding.

Notable Changes

  • Stock Price content is placed under the carousel heading in a way the user sees the key performance index of NBLC in the stock market and the CTA button for those interested in a detailed breakdown.
  • A more engaging news section UI design and a well-positioned CTA button for reading more news.
  • Instead of a single image introducing all the brands, I implemented a card design approach to showcase the brand and added details to offer insights into each brand.

Before

After

Mobile View Landing Page

About page

The amount of content here is staggering. For me, the best approach is to classify everything first. Once all the content is organized into labelled boxes. I develop the blueprint for a new structure that will showcase the content in its best form.

An attention-catching hero section with one of the brand images and all the submenu links on the about page has a dedicated segment that allows users to navigate.

I added icons to content like Nigeria Brewery Mission, vision, core values, and the rest to create a visual boost to the page. I moved social responsibility to the sustainability section to reduce the clustering of information.

Before

After

Mobile View

Brand page

Consistency in the visual design across the website is salient as I worked across all the available pages. The Brand pages follow my early design approach. Attention catching Brand page with multiple brands images and filter options that allow users to filter the brands (beer, soft drinks and co)

Noticeable Changes The Brand card design here is different from the one on the homepage, extra button at the button of the nutrition fact Button. The reason is that Nigeria brewery has a dedicated web page for each brand, showcasing each brand on a fan-like page. Personally, I love it.

Before

After

Mobile View

News page

Noticeable Changes Apart from the visual redesign of the news contents is having a filter to filter between various news available (Top stories, Brand events, videos and co ) and pagination. I love pagination.

Before

After

Mobile View

Investor page

The investor's relation page update here is the stock section displaying more details about the company's performance on the stock market(volumes, market cap and week range)

The Financial report & notifications are now in yearly filters to make it easier for interested users to download the report without scrolling endlessly.

Before

After

Mobile View

Board of directors page

Clicking the read more of the "Board of directors" on the investor-relations page brings you to this page.

My approach here is detailed information on the board of directors function and card design approach showing the boards of directors. The default landing page should be "investor-relations/board of direction/ Chairman" or About-us/ board of directors/chairman

Before

After

Mobile View

Sustainability page

Consistency Accross the website page countine here

Before

After

Mobile View

Contact page

I change the contact us message from "Leave us a message" to a more engaging tone " We're here to help and answer any question you might have. We look forward to hearing from you"

Before

After

Mobile View

Back Home