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.
Project: H&M Redesign
Role: UI Designer
Timeline: 3 months
Platform: Responsive website
Image Credits: Pexels and Unsplash
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.
Low-fidelity sketch wireframes uploaded into Marvel App.
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 in place for later design decisions.
Mobile and desktop screens in need of redesign include: broken logo, dark images, dropdown menu, and cards, and cluttered hero section.before redesign
High-fidelity prototype implementing updated redesign including color, images and custom icon designs.View Redesign
Style guide includes color branding designed to compliment the brand's logo. Typography chosen from Google Fonts.
Style guide includes UI elements such as a custom designed icon set made in Figma, color branding, typography and image use.
Buttons are auto-sized, min height of 32px, normal height 44px, radius 8px, drop shadow: 25% and blur 4px.
Bottom Tab bar shown as a mobile screen, next to navigation bars in mobile, tablet and desktop.
Input forms contain predictable patterns and are easy to read. Form radius is 8px, and outlined text align to the left.
Make designs easy to read
Keep colors and text minimalistic
Easy to read buttons
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
Take a look at our high-fidelity prototype in Figma.View redesign