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

• Current website made in a WordPress theme that contains unused bloated code that slows down the site's loading speed
• Images are dark and portray professionalism
• Branding isn't fluid
• Desire to create a custom, professional look and brand that clean and modern

Goals and Solutions

• Develop a design system language that consistently aligns with brand identity
• Create user trust with professional images and clean design patterns
• Custom icons that match brand
• Responsive screen sizes

Role

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

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

• As a potential user, I want to inquire about a onsite plumbing estimate
• As a potential user, I want to read about the company before booking an appointment
• As a potential user, I want to 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

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.

After the Redesign

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

Style Guide

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

Color

Typography

Design System Language

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

Icons

Buttons

Navigation

Cards

Forms

Images

Guidelines

Iconongraphy

Custom vector icons were created in Figma.

Buttons

Buttons are auto-sized, min height of 32px, normal height 44px, radius 8px, drop shadow: 25% and blur 4px.

Tab and Nav Bars

Bottom Tab bar shown as a mobile screen, next to navigation bars in mobile, tablet and desktop.

Cards

Card design patterns contain primary color and 8px radius.

Input Forms

Input forms contain predictable patterns and are easy to read. Form radius is 8px, and outlined text align to the left.

Images

Images are clean, fresh and welcoming. Only images are used. No illustrations.

‍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.