Pompidou Nsangou
Product Designer
Made with

Rennovation Planners

Improving a dated user experience to meet current design standards

Overview

Project Scope: 4 Weeks

Role: UX/UI Designer

A client reached out to me to improve her website's look, and user experience.

The client wanted to spend money to improve the SEO for her site, but did not want that money wasted on a page that did not meet current design standards.

Analyzing The Site
Renovation Planners

Questions I Asked Myself

  • How do I update a dated site architecture while maintaining the current structure and user flow?

  • How do I make stale content more engaging?

  • How can I reduce or consolidate the pages while maintaining usability?

  • How can I make the site more welcoming?

  • Can I get rid of the drop down menus all together, and still make it functional?

The client does amazing work. I needed to find a way to get potential customers to be excited about reaching out to her.

Established New Structure With Client

My First Objective:

Simplify the user journey to help potential customers reach their most important goals without having to navigate through a drop-down menu.

Restructuring how information would be displayed, and where.

Given the short time frame, I had to rely on my UX expertise to draw out pain points and work out how certain pages could be combined to improve the experience.

The heuristic markup below was for my personal use. I communicated these ideas to my client through a conversation, and made her a part of my process.

Heuristic Markup of the site.

Heuristic Markup of the site.

We Virtually High-fived

We Virtually High-fived

Made The Client My Ally

Due to the short deadline, I couldn't afford to go back and forth on different design iterations. Making the client my partner in this design implementation allowed for a smooth transaction.

I made the client aware of my process. Gave her opportunities to approve the design as I was building it.

This got her excited to see what I'd bring next.

Design Exploration
Design Inspiration

Design Inspiration

Moodboard

Once I established all the problems with the current design, I did some research to gain inspiration on which direction to go in.

Guiding Objectives:

  • The client doesn't want to be grouped with traditional construction companies.

  • I wanted the site to be modern, sleek, and elicit a personal connection with the user.

  • Users should feel at home. Like this is a brand they can trust.

The design (to the right) for a construction company web page inspired the structural foundation of the site.

Mid-fidelity Wireframes

Mid-fidelity Wireframes

I showed the client a detailed mid-fidelity wireframe so she could get a chance to look at the content structure, without the distractions that come with a colored design.

I had her approve the structure every few pages.

Visible Tab Menu Structure

Visible Tab Menu Structure

UI Design - No Drop-Down Menus

Once the client approved all mid-fidelity pages, I proceeded to adding color and images.

Designed and Prototyped Using Figma

I tried my best to choose images of a similar style. Used a combination of traditional stock photos of "professionals," and images that looked more natural.

Most proud of how easy it is to maneuver through the site. The tab-menu structure makes it much easier to navigate, and still know where you are at all times.

Click for Design Prototype