MattressmanMasthead Redesign
Mattressman
Masthead Redesign
Role
UX Designer
Full Time
Team
Suyin Tung, Jodie Huggins, Hamza Zafar
Mattressman Marketing
Duration
February - March 2025
(1 month including Dev time)
Homepage - January 2025 (left) vs April 2025 (right)
01
Overview & Problems
As part of an overarching, large-scale project redesign, I chose to redesign the homepage masthead as a starting point.
We noticed a low engagement rate and scroll depth on our existing site. This told me that users did not find the banner engaging.
Our Brand of the Month banner was also not getting as much attention as we would have liked, because these brands are key stakeholders that collaborate closely with Mattressman.
The goals here were to
◦ increase homepage engagement
◦ increase Brand of the Month banner clicks
We noticed a low engagement rate and scroll depth on our existing site. This told me that users did not find the banner engaging.
Our Brand of the Month banner was also not getting as much attention as we would have liked, because these brands are key stakeholders that collaborate closely with Mattressman.
The goals here were to
◦ increase homepage engagement
◦ increase Brand of the Month banner clicks
02
Research, Ideation, Strategy
Through researching competitors and doing an audit of our own site, I identified some key areas of improvement and ways to best improve engagement.
I started ideating on potential layouts to best display relevant information higher up on the page. I decided that a Bento Box grid would be an efficient way to do this because it was a mobile-friendly way to showcase multiple points of information in one area.
This was followed by researching UX best practices and examples of bento boxes, and a wireframe mockup based on best front-end development practices.
I started ideating on potential layouts to best display relevant information higher up on the page. I decided that a Bento Box grid would be an efficient way to do this because it was a mobile-friendly way to showcase multiple points of information in one area.
This was followed by researching UX best practices and examples of bento boxes, and a wireframe mockup based on best front-end development practices.
03
Design
With mobile responsiveness and REM constraints in mind, I designed desktop, tablet, and mobile versions of the bento box and handed them off for development.
My main objectives at this point were to ensure:
◦ The assets were legible on all platforms
◦ There was enough flexibility for assets to be interchangeable
◦ There would be enough room to develop buttons over them
I collaborated with and communicated my vision and plan clearly to our dev team, resulting in a smooth hand-off process and swift implementation on the live site.
My main objectives at this point were to ensure:
◦ The assets were legible on all platforms
◦ There was enough flexibility for assets to be interchangeable
◦ There would be enough room to develop buttons over them
I collaborated with and communicated my vision and plan clearly to our dev team, resulting in a smooth hand-off process and swift implementation on the live site.
FinalDeliverables
Final
Deliverables
%20(1)%201.jpg)
04
Results & Learnings
Throughout April, engagement on the homepage has increased from 45s to 1m 08s (+ 51.1%), with a proven, deeper scroll depth (image 2). The Brand of the Month banner also generated an increase in interactions when compared to the previous layout.
The increased clicks showcased on the new layout tells us that this is indeed a valuable marketing space for future promotions. I believe this gives us more opportunities to discuss potential collaborations in the future.
If I were to run this project again, I would start the initial implementation stages with a 50-50 A/B split, rather than a full launch immediately.
The increased clicks showcased on the new layout tells us that this is indeed a valuable marketing space for future promotions. I believe this gives us more opportunities to discuss potential collaborations in the future.
If I were to run this project again, I would start the initial implementation stages with a 50-50 A/B split, rather than a full launch immediately.
OtherProjects
Other
Projects
.png)
Years of experience
2
Projects Completed
10
+
Industries served
3
Clients satisfied
1
0
0
%