Overview

H&M Plumbing and Drain, a plumbing company based in Dallas, approached us with a request for a redesigned website that would convey a modern and approachable feel. In response, we created a Figma UI design specifically tailored to their requirements.

Problem Statement

The current website, built on a WordPress theme, suffers from various usability issues that hinder its effectiveness in portraying a professional image and providing a seamless user experience. The site’s performance is impacted negatively by unused bloated code, leading to slow loading speeds. Additionally, the dark imagery fails to convey the desired level of professionalism, and the branding lacks consistency and fluidity. To address these challenges, there is a strong need to design and develop a custom website that presents a clean, modern, and professional brand image while ensuring optimal performance and usability.

Before Redesign

Home screen desktop view before the redesign

before redesign

Goal of Redesign

Role

The goal is to develop a cohesive design system that consistently aligns with the brand identity, establish user trust through professional imagery and clean design patterns, create custom icons that match the brand, and ensure a responsive website that delivers a seamless user experience across different screen sizes. This will involve curating high-quality images, implementing minimalistic and intuitive design patterns, designing custom icons, and employing responsive design techniques to optimize usability and visual consistency. By achieving these goals, the website will effectively convey the brand’s professionalism, build user trust, and provide a modern and responsive browsing experience.

Project: H&M Redesign
Role: UI Designer
Timeline: 3 months
Platform: Responsive website
Image Credits: Pexels and Unsplash

Methods

  • Understanding the Problem
  • User Stories

  • Wireframing
  • Icon Design

  • Design Documentation
  • Style Guide

  • Design System Language

Tools

  • Adobe Photoshop
  • Figma
  • Marvel

User Stories

Our users in the Dallas area are seeking residential plumbing services. Additionally, they are interested in finding do-it-yourself (DIY) guidance for simple plumbing problems, which can be found in the “news” section of the website.

Potential User

  • Inquire about an onsite plumbing estimate

  • Read about the company before booking an appointment

  • Read customer reviews

New User

  • As a new user, I want to discover coupons and discounts

  • As a new user, I want to search for my plumbing problem in a search bar

Existing User

  • As an existing user, I want to read DIY tips

  • As an existing user, I want to browse services offered

Wireframes

Low-Fidelity Wireframes

After creating low-fidelity sketch wireframes, they were uploaded into the Marvel app.

H&M Plumbing low-fidelity wireframes

Mid-Fidelity Wireframes

Mid-fidelity wireframes have been created to serve as a foundation for making future design decisions.

H&M mid-fidelity wireframes

Responsive Grids and Layouts

Mobile: width 375px, 2 columns, gutter 15px, margin 16px
Tablet: width 768px, 6 columns, gutter 15px, margin 32px
Desktop: width 1281, 12 columns, gutter 16px, margin 72px

H&M responsive grid

Redesigned UI

Responsive views of redesign

After redesign

Before the redesign, both the mobile and desktop screens suffered from various issues that required improvement. These included a broken logo, dark images, a malfunctioning dropdown menu, poorly designed cards, and a cluttered hero section.

To address these concerns, a high-fidelity prototype was developed, introducing an updated redesign. This prototype features refined color schemes, enhanced imagery, and custom icon designs. By implementing these changes, the prototype demonstrates a visually improved user interface for both mobile and desktop screens, resulting in a more engaging and user-friendly experience.

Style Guide

The style guide incorporates color branding specifically designed to complement the brand’s logo. Additionally, the typography for the project has been carefully selected from Google Fonts.

Design System Language

The style guide encompasses various UI elements, including a custom-designed icon set created in Figma. It also encompasses aspects such as color branding, typography selection, and guidelines for image use.

Polished Prototype

mockup of final hm plumbing desktop view

The final polished prototype incorporates all recommended changes.

View final prototype in Figma