H&M Redesign

A responsive website

Overview

H&M is a UI redesign in Figma to be implemented into a custom Webflow website. H&M is a plumbing company seeking a revitalized website.

Redesign Motivation

Goals and Solutions

Role

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
  • Web design

Tools

  • Figma
  • Adobe Photoshop
  • Marvel App

User stories

Our users are looking for residential plumbing services in the Dallas area. Users are also looking for DIY guidance for simple problems found in the "news" section of the website.

Potential User

New User

Existing User

Prototyping

Low-Fidelity Wireframes

Low-fidelity sketch wireframes uploaded into Marvel App.

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

Mid-Fidelity Wireframes

Mid-fidelity wireframes in place for later design decisions.

Before the Redesign

Mobile and desktop screens in need of redesign include: broken logo, dark images, dropdown menu, and cards, and cluttered hero section.

before redesign

After the Redesign

High-fidelity prototype implementing updated redesign including color, images and custom icon designs.

View Redesign

Style Guide

Style guide includes color branding designed to compliment the brand's logo. Typography chosen from Google Fonts.

Design System Language

Style guide includes UI elements such as a custom designed icon set made in Figma, color branding, typography and image use.

Do

Make designs easy to read

Keep colors and text minimalistic

Easy to read buttons

Simple language

Don't

Don’t use too many dark backgrounds

Don’t overuse drop shadows 

No Fast and wild animations

Don’t use language

Don't use illustrations

Current Prototype

Take a look at our high-fidelity prototype in Figma.

View redesign
Interested in working together?
Say Hello