All PROJECTS

//Merch Hero

UI/UX, Branding
2020
Merch Hero landing page displayed on a mac-book.A laptop and phone leaning up against a white wall showing the Merch Hero website homepage.

Merch Hero

A Shopify Print-on-Demand Fulfilment Solution

The Brief

Create a brand that is going to encourage Shopify users to integrate their online fashion business with the global Merch Hero fulfilment chain.

The Solution

To not only create a brand that visually stand out from it's competitors, but to offer a robust and clinical user experience that installs confidence and trust within it's users.

Deliverables

We would deliver the full UI/UX designs for the platform whilst working closely with the development team and product managers. On top of this we would build the face of the brand by creating a logo, brand colours, illustrated assets, font selections, documents and marketing collateral.

Black mackbook pro showing the Merch hero landing page with screen reflecting onto the keyboard.

Workflow

//1

Audit

Looking at the framework and data streams from an existing print-on-demand platform, we were able to pin point exactly what was working and what wasn't.

//2

Research

Continuing on from our audit, we began to scope the market for competitors and establish Merch Hero's positioning amongst them. This resulted in a small community of active sellers that would provide us feedback throughout the process, and sculpt the product they desired.

//3

Design

Starting with the logo we began to build the face of the brand. Through a process of exploration and refinement, we were able to push concepts to their boundaries and cherry pick the strongest elements of the design until we were left with something we were completely happy with.

//4

Testing

Once we had a brand and the platform figured out, it was time to put it to the test. We underwent feedback sessions from our pre-existing sellers and set up several AB tests certify what the most optimal design solution was.

Black Merch Hero logoGrey Merch Hero logoBlack outlined Merch Hero logo with construction guides.Blue full colour Merch Hero logo

Branding

Logo Design

We created a logo that was simple, modern & reflective of the brand. Varying the contrast between the vertical and diagonal lines added depth to the design, and in turn created a dynamic monogram logo.

Colour Palette

We used an analogous colour palette for Merch Hero and created radial gradients to offer a vibrant look and feel to the brand. This offered a visual differentiation from it's competitors and worked well with the core of its user base.

Font

Keeping inline with the brand's sister company, we opted to use 'Montserrat'. Montserrat is not only a modern, clean sans-serif font, but it was also available in Vietnamese which was incredibly important as over half of Merch Hero's user based there.

Besixth business cards falling through the air.
Merch Hero website displayed on white desktop, mac-book Pro, iPad and iPhone

UI

Website

The focus of the landing page was to generate sign ups to the platform. We did so by strategically placing signup forms through-out the site and showcased the power of Merch hero through graphics, images, mock-ups and interactions.

Specification

Although the primary focus was on creating a high preforming, high converting landing page, we also wanted to tell the story of the brand and showcase their services. We did this by creating several other pages including; the story of the brand, a product showcase, shipping details and a blog with the latest industry know how.

Merch Hero landing page design
Merch Hero website designsMerch Hero website designsMerch Hero website designsMerch Hero landing page website design

User Experience

User Journeys

Throughout the design of the platform, there were several key features that were implemented. The hierarchy of a feature was determined by two things; It's commercial viability to the company and it's value to the user base. A feature would start in the form of a users story that would be provided by the product manager, and working in tandem, it was our job to create the easiest and most logical way for the user to get from point A to point B. Once a tangible design solution had been put forward, it would then go on to AB testing, where we could collect valuable information on the effectiveness of the design. With this information we would continue to refine the design until we achieved optimal performance.

CSV Uploads Feature

An example of a successful feature we added was multiple CSV uploads. This enabled people from all platforms in the industry to upload their orders and have access to Merch Hero's global fulfilment solution.

We reused components throughout the site to ensure user familiarity, and issued clear error & success messaging to make the whole process as quick and easy as possible. This was vital as some of the orders contained hundreds of orders, and if one was incorrect, it needed to be identified as soon as possible to prevent the user dropping off.

Merch Hero UX CSV upload screen step 1Merch Hero UX CSV upload screen step 2 - drag and drop uploadMerch Hero UX CSV upload screen step 3 - drag and drop upload hover stateMerch Hero UX CSV upload screen step 4 - Upload loading animationMerch Hero UX CSV upload screen step 4 - success messagingMerch Hero UX CSV upload screen step 4 - error messagingMerch Hero UX CSV upload screen step 5 - review orders collapsedMerch Hero UX CSV upload screen step 5 - review orders expanded

Merch Hero Academy

To attract new sellers to the platform, we developed the Merch Hero Academy- A beacon of information designed to take a new seller through the process of getting their first sale step by step. This was also a great data capture and would eventually effective tool turning leads to users.

Merch Hero training academy mock up on mac-book pro

Mobile

As with every modern design, mobile comes first. We made sure Merch Hero was super quick and accessible, giving us the best opportunity to convert them to a user of the platform.

The Design

The design utilised a bold blue gradient and curved sectioning to add emphasis and structure to the page. We also created various vector illustrations and iconography to support key bits of information.

Merch Hero homepage displayed on white iPhoneMerch Hero 'product section' displayed on white iPhoneMerch Hero 'step by step' displayed on white iPhone.Merch Hero 'partners' page displayed on white iPhone.Merch Hero 'timeline' page displayed on white iPhone.Merch Hero blog displayed on white iPhone.Merch Hero navigation menu displayed on white iPhone.Merch Hero sign up modal displayed on white iPhone.Merch Hero shipping information displayed on white iPhone.Merch Hero 'product' page displayed on white iPhone.Merch Hero product displayed on white iPhone.Merch Hero product filtering navigation displayed on white iPhone.
"Rob created a unique brand for Merch Hero from scratch that reflected our values and was extremely attractive to our users. He combines the creativity required to imagine new designs from a blank page and the pragmatism to take feedback from his clients and iterate quickly to get to great results."
Olivier Stapylton-Smith
Merch Hero - FOUNDER

Get in Touch

Got a new project or business venture in mind? Send us an email today and let's bring your idea to life!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.