Website Design

Web design
is the process of planning, conceptualizing, and implementing the plan for designing a website in a way that is functional and offers a good user experience.

” A well-designed website is not necessarily a website with sophisticated features, but one that provides the best User Experience.”

COMPANY

Stabilized Pictures, a photography company in Paris.

It offers different types of photography services: portrait photography, commercial photography, real estate photography, wedding photography, food photography, and Fashion photography.

Problem statement

Stabilized Picture’s former website  had some Design, UX|UI, and Website Content Strategy issues:

  • The design needed some refreshment and was not designed to appeal to a high-end clientele which is the main client target. Also, the design was not consistent throughout the website.

  • The menu was not optimized. 
  • The pages were cluttered with too much information and visuals, which made it challenging for users to find relevant content quickly and engage with the platform effectively.

Company goals

  • Design a new website on WordPress.
  • Have a responsive and user-friendly website.
  • Provide a good user experience.
  • Have aesthetics that appeal to a high-end clientele.
  • Keep improving the website’s visibility on the search engines.

My approach

I collaborated with Stabilized Pictures to understand their vision and to agree on the main photography categories they wanted to highlight.

From an SEO point of view, as the website was ranking well on the search engines, I chose to design the new modules separately and imported them to replace the old modules on the existing pages to keep the ranking of those pages.

For each website design project, I present a few design options for the client to choose from, and the designs have to look good on the desktop and mobile versions.

Skills used in the project

  • Website Design
  • UX|UI Design
  • Content Writing
  • Content Marketing
  • SEO
  • Digital Marketing
  • Photo editing with Adobe Lightroom
  • English & French.

Project responsibilities

Redesign the company website. The website had an outdated look, the user experience needed some changes and the design was not consistent. The need for a fresh and modern look was necessary as the company targets a high-end clientele.

1. Design a responsive and user-friendly website.
One of the requirements was to build the website on WordPress using the Divi builder. 

2. Create a new UX | UI experience.

3. Create a content strategy and write content in French and English.

4. Adjust the SEO strategy in place. 

5.  Set up the tool Google search console to measure the site Search traffic, the website performance, and fix potential issues.

6. Handle website updates and maintenance (updating systems, designing new pages, adding or removing visuals and/or content).

REDESIGNED HOME PAGE

BEFORE - Home Page

  • The home page was cluttered with too many visuals and text modules.
  • The design throughout the entire website was not consistent.
  • The design aesthetic did not convey high-end services.
  • The UX-UI needed some improvements, the menu, the categories, and the subcategories were not properly organized.
  • The content was not well distributed per section.
  • There was no text module to introduce the company or its services.

 

R

AFTER - Home Page

  • I designed a clean website look with a white background as the photos bring some colors to the pages.
  • I created a consistent look on each page.
  • I designed a new UX-UI experience with a new menu, categories, and sub-categories to highlight the photographer’s services.
  • I created a section to introduce the company and its services. My goal: answer as many questions as possible on the first page for the client to see if the company could be a good fit for him/her.

HOW I REDESIGNED THE WEBSITE AND FIXED THE ISSUES

From an SEO point of view, as the website was ranking well on the search engines, I designed the new modules separately and imported them to replace the old modules on the existing pages to keep the ranking of those pages.

DESIGN –  WEBSITE ISSUES

The entire website design was not consistent. There were different templates used on different pages as well as different banners.

DESIGN – HOW I SOLVED THE ISSUES

I designed a consistent look for the whole website by creating the same modules on each page.

FONT – WEBSITE ISSUES

There were too many fonts used and they were not consistent on the text or the headers module.

FONT – HOW I SOLVED THE ISSUES

First, I brainstormed with the company about the font style they were looking for. Then, I researched fonts and offered different options to choose from. I chose 1 font for the text and 1 font for the headers. Pro Tips — Focus on keeping the same font for consistency and brand recognition. Then add 1 to 2 supporting fonts for contrast.

VISUAL – WEBSITE ISSUES

The photos on the website had different tones and colors which altogether did not look harmonious. In addition, the photos selected to represent each category were not the best options to attract a high-end clientele.

VISUAL – HOW I SOLVED THE ISSUES

I selected the best photos for each category and edited them in Adobe Lightroom to have a consistent look. Pro Tips: Depending on the photo shoot and the client’s request, photos are edited differently but to have a consistent look on your website it is best to edit them to obtain overall the same tones.

USER EXPERIENCE – WEBSITE ISSUES AND HOW I SOLVED THE ISSUES

The user experience on the previous website needed important changes. Here are a few examples of UX|UI aspects the website was lacking:

A website needs to be Easy to Navigate and the content should be easy to find.  

The content needs to be navigable and locatable onsite and offsite easily.

MENU – ISSUES

The menu ad too many categories and some should have been subcategories.

MENU – HOW I SOLVED THE ISSUES

– The menu: I created a new menu, renamed categories, and added subcategories when needed to help visitors find what they are looking for in a few clicks.

CONTENT – ISSUES

Website content: it was difficult to obtain certain information or to find the information quickly as the pages were cluttered with content related to topics not relevant to the page. Also, the visuals were not related to the topic in certain sections.

CONTENT – HOW I SOLVED THE ISSUES

– Content: I organized the information in an understandable manner and defined all the same elements that needed to be present from page to page for the visitor to know where to land on the same type of info.

Ex: I created a section describing the specifics offered for each category that is located on all the pages at the end of each page.

HOME PAGE – ISSUES

The home page: was cluttered with too much information related to other pages. It did not have a section to introduce the company, and the services were not categorized properly. Photos were featured without the name of the related category. The page was very long and not showing important information at the beginning of the page.

HOME PAGE – HOW I SOLVED THE ISSUES

– The home page: I created 2 sections, the first at the beginning of the page to introduce the company and a second section to feature its services. The goal is to have seamless experiences and answer the main questions on the first page.

A website needs to be DESIRABLE

It needs to have a consistent look, a structured layout, and visuals to highlight the content or complement it.

DESIGN – ISSUES 

The website had different designs and styles on each page that did not complement each other. It made the overall website look inconsistent.

DESIGN – HOW I SOLVED THE ISSUES

I designed a consistent look with a similar structure for the content and the visuals.

VISUALS  – ISSUES 

The photos did not have the same color theme; it was a mix of bright and contrasted photos with pastels.

VISUALS  – HOW I SOLVED THE ISSUES 

I edited all the photos in Adobe Lightroom to have the same color theme and style. Pro Tips: depending on the photo shoot, the client’s request, and the season, photos are not edited with the same color theme but you should choose if you like a well-balanced color theme, contrasted colors, or pastel theme colors.

A website needs to be OPTIMIZED FOR DIFFERENT SCREENS

The website design needs to have a good rendering on the Desktop, the tablet, and the phone.

RESPONSIVE WEB DESIGN – ISSUES 

The website wasn’t optimized properly for viewing on different screens (Desktop, Tablet, and phone). The layout, the spaces between modules, and the font size were not adjusted for each screen.

RESPONSIVE WEB DESIGN – HOW I SOLVED THE ISSUES

I adjusted manually as it is not automatic, the spaces between modules, and the right font size for the tablet and iPhone screens. 

RESULTS

  • A more professional, engaging, and mobile-friendly website.
  • Increased traffic, leads, and conversions.