The Homepage

Pain Points

Promo highlight : The homepage lacked pods which were used to highlight new products and help surface any ongoing sales and offers.

Trust and reliability : As made was expanding into Europe the current site lacked a sense of strong brand trust and reliability for new customers outside of London.

Simplify navigational structure : Navigational options and product categories needed to be clearer.

Future Proof : As Made was going through a complete rebrand at the time, the new design would be used as a foundation for the new design system.

Better value proposition and brand perception : As research suggested the customers were interested in the history and origins of how MADE products were crafted and the artisans behind it.

Highlight key sections : MADE wanted to drive more traffic to its new services, interior design blogs and TalentLab sections of the site.

Design for responsive view ports : As data suggested almost 40% of MADE's traffic was coming in from tablet and mobile devices - along with the rest of the site the homepage also needed to be optimised.

Wireframe Discovery

I began by exploring layouts in the form of wireframes. I produced multiple layouts and iterations, which were discussed with the team, stakeholders and tested using a mix of guerilla and instore. After some deliberation we managed to whittle the ideas down to two options to further explore.

Also extensively looked at the different types of components that were on the page and how they could be re-used within the new design system. 

Exploration

After settling on a few different layouts and structures for the wireframe, I began to explore the UI. I worked closely with the brand team in order to explore appropriate fonts, colours, content and imagery.

To assess brand perception, I worked closely with the UX researcher and PO to carry out a variety of tests on prototypes and static visual stimuli – including guerrilla testing, the 5-second test, closed word choice testing and general interviews.

The Structured one :This version of the design was based on a rigid grid structure and pattern. The UI colours were less protruding, and instead images were used to highlight key touch points on the page.

The Unstructured beast : This design was all about breaking the grid and rigidness of the first design. It was more focused on free flowing content and interaction, but as a structured comparison I used to the same imagery, colours and fonts throughout most of the design. 

Test, Learn & Iterate

A series of visual stimuli tests were carried out in the Made store to test cognitive retention and brand perception.

The results for the 5 second test weren't conclusive enough, most users missed key points from the page and were only able to retain the main hero image, without remembering much of anything else. 

The brand ethos pod was also missed by users in most cases. This was due the to the fact that the heading font was not strong enough and with a mix of overwhelming images for the user, made it very confusing.

The closed word testing performed a bit better, with a few common words being mentioned these included sleek, clean and trust worthy. But still not conclusive enough to go ahead with any of the designs.

Design Breakdown

Based on learnings from the previous tests and iterating on feedback from results of user testing I started working on a 3rd version of the design. Working closely with the brand team we started exploring options around heavier weighted fonts and variation of colour. 

The imagery was reworked, so rather than having different smaller packets of images - we went in the direction of large singular images with emphasis more the blocks themselves.

The final design was made up of various components in blocks that could be slotted in and out depending on what Made wanted to promote. This allowed for more flexibility on the layout of the design and the reusability of the components on other pages.

Navigation Analysis

The current navigation had a number of issues, according to baseline studies conducted on the website. These included :

Menu items too hidden : Key navigational links were too hidden on the website, which was often missed by users (TalentLab, Store Locater)

Poor iconography : Small unlabelled icons for account and basket were often missed

Font size : Smaller font size made for legibility issues

Responsive : The current navigational structure was not optimised for tablets and mobile devices.

Structure not optimal : The navigational structure was too deep, four levels down - which meant it took longer for users to find the right category or product page.

Search : The search was not prominent enough, as data suggested a high portion of users were navigating using search.

Navigation Update

The new navigation was made up of two levels (primary and secondary). The primary sectioned contained the product categories. The secondary contained icons for quick links to basket, wishlist, account, support and store locator.

Search : This was also made prominent by the extending the search bar on desktop and mobile, with the inclusion of live search.

TalentLab & Ideas : these were added to primary navigation and highlighted to give prominence.

Mega drown downs : The product categories were simplified to be only two levels on desktop, one over arching category followed by a sub level.  Contrasting colours and an increase in font size were also used to help with visibility and distinction between categories.

Promo Pod : To use the space more effectively an optional promo pod was also added to the drop down, this feature could be turned on and off.

Post Launch Metrics

The launch of the homepage was staggered and in phases.

Phase one was updating the entire site with the new font system and grid structure, and phase two was the release of the new homepage, followed by the release of the updated product pages.

On average users were scrolling further down the page compared to the old, this was driven by an increase in engagement with the "New Arrivals" carousel pods.

Content views mostly correlated with pod positions down the page - further down the page, the less views it got. However the TalentLab Pod ended up having the highest CTR on the page. Which was a good sign - as it meant more people were engaging with this content.

The impact of the navigational change was also a success directly correlating with an increase in page views to TalentLab and the Ideas blog.

Summary

In conclusion I would say a month after its release the page was on track to meeting some of its goals. Conversion rate was up YOY compared to previous and more traffic was being driven to TalentLab and Ideas.

Changes for the future : Looking at data I would tweak positioning of pods, as it suggested more CT's tend to happen higher up the page. I would also A/B test a more condensed version of the page to see if this helps in increasing conversion rate.