MLILY UK & Breasley

UI Design & Web Dev

2024

I was approached by the web developer for MLILY UK and Breasley to assist in UI Design and development of their websites.

I was tasked to create concepts for the landing page, category page, and product pages, using Figma, which you can see below. I’ve had the opportunity to do research on the UK market trends for the mattress, and the research informed design insights reflected in the concepts I developed for this project.

View the page designs by scrolling through each image. →

Landing Page Concept

UK MARKET TRENDS

According to our research, the UK market want mattresses that are health conscious, innovatively designed, durable, environmentally friendly, and comfortable.

The market in general is more at ease making large purchases online, especially for younger people. They see matress quality as a top factor and when deciding consider comfort a top factor. They are more likely to do research online before heading to a physical store and have a desire to improve their mattress via upgrades.

DESIGN INSIGHTS

Research into UK market trends were synthesized and design insights garnered to guide the UI design for the MLILY UK and Breasley pages

The Design Insights garnered were as follows:

    • Showcase Innovative Designs
      Highlight cutting-edge materials and designs that offer enhanced comfort, support, and durability.

    • Present Mattress Upgrades
      Detail the range of mattresses in each series and explain the available upgrades to cater to different sleep preferences.

    • Emphasize Key Features & Benefits
      Highlight features that enhance the sleep experience.

    • Offer an Eco-Friendly Option
      Provide a mattress made with sustainable, organic materials for environmentally conscious customers.

    • Encourage Store Visits
      Invite customers to visit a physical store to experience the mattresses firsthand and receive expert advice.

Breasley Product Page V1 ↓

Breasley Product Page V2 ↓

For the mattress category pages, I created three concepts for the client. Ultimately, they chose the first concept, which can be seen here.

 

After the UI designs were approved, I developed the pages using the website’s existing infrastructure, built on WordPress with Elementor Pro. I also assisted in implementing and building key components, such as product cards and media management, to support the user experience and align with the UI design I created.

MLILY UK Mattress Category Concept V1 ↓

MLILY UK Mattress Category Concept V2 ↓

MLILY UK Mattress Category Concept V3 ↓