Sonelgaz Website redesign (UI/UX). Case study, I will talk about my process, the decisions i took and my approach.

Sonelgaz Overview

Sonelgaz is a state-owned utility in charge of electricity & natural gas distribution in Algeria. it produces 29 billion kWh a year, sells 4.6 billion cubic metres of gas a year, & employs nearly 20,000 people.

Project Details

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

Tools: Figma, Affinity Designer, Sketchbook & Pen

Heuristics Review

Before modifying the existing design and digging into visuals and direction. Detailed groundwork must be done for a website redesign to be successful. Taking the time to perform pre-project research, become familiar with existing content, competitor analysis, and take inspiration to get some ideas.

Main Issues

Inconsistency in the web design, Lack of Interaction between the web elements, Cluttered Design, Not mobile responsive, Too much content and Complex navigation

Visual Direction & User Interface Design

Homepage

A Homepage must contain only what is necessary. Redundant texts, images, and too many CTA buttons only turn the whole place into a mess. When users are looking at too many different things, they get confused and fail to understand what to focus on.

The basics for me include creating a nice and clean visual hierarchy in the page design. Making my designs good means making them simple

Before

After

Homepage prototypes

Show casing the carousel design to the Homepage sectiion

Home Page Mobile View

News page

Organized the news content designs to cards and added a CTA button to allow users to view all news pages, as shown below.

Before

After

All news page

Standardizing the way information is conveyed ensures users can apply knowledge from one click to another; without learning new representations for the same actions. Sonelgaz current website is not mobile responsive so, a lot of my design decisions take a mobile design approach first. The web is a living medium. Updates happen all the time. So, the easier it is to maintain my designs, the more likely it will survive on new devices.

Before

After

News Page Mobile View

ON SCROLL HEADER CHANGES

News article

Good design can speak for itself, without asking the user to commit much effort. Showing is better than telling. Making my designs good means making them simple.

Before

After

News Article Page Mobile View

Key figures

Having the Key Figure Page contents in a 3 * 3 card design approach makes it possible to implement the no scroll web design approach in small screen laptops 1200 width. I Tested it by prototyping it in Html & CSS

Before

After

Key Figure & Contact Page Mobile

Contact us

Before

After

Back Home