MP_Hero

Role: UI & UX Designer

Duration: Sep 2021 – Dec 2021

Marine Printers is Vancouver’s leading digital printing, offset printing and wide format printing provider. A family-run business founded in 1935. 

The goal of this project was to redesign and update their old website. Part of it was also adding an online store for certain products. Highlighting the difference between Marine Printers and its competitors was also important.

1.

Simple e-commerce and product overview page give the customer an option to make a purchase online. 

BCLI_Mockup8

2.

Request a quote section stands out and gives customers an easy option to contact the printer directly.

3.

Downloadable templates for different print projects make the design process and communications with the printer seamless.

Marine_2_Mockup

Challenge

  • How can we make working with Marine Printers as easy as possible for the users?
  • How can we solve the simple customer services problems users have without the need to contact Marine Printers?
  • How can we display Marine Printers as capable modern and established printer with great customer service?

Research

User Personas

Based on our research we identified two main user groups – designers and non-designers (small business owners and their employees). These two groups have different technical knowledge and priorities.

For designers, the helpful thing to have would be the ability to download templates and see file specs. For non-designers, the most important functionality would be easy access to their customer service telephone number and a simpler FAQ without too many technical details. We thought that it would be helpful for both user groups to have a page showcasing the best work of the printer.

MP_User_Persona_Simone
MP_User_Persona_Marta

Sitemap

Over time we will be adding product and company-specific pages. Product-specific pages will give customers a better idea about the technical capabilities of Marine Printers and company-specific pages will help business owners and non-designers to get a better idea of how they can elevate their business through design and print.

MP_Sitemap

Design

Paper wireframes

As one of the first steps in the design process, I started sketching different layouts and information structures for the most important pages.

wireframes

Visual Design

In terms of visual design, we are keeping elements from the current brand identity but trying to elevate the product presentation. In the next step of the project, we are going to update the product photography on the website.

Photography Moodboard

MP_Photography_Moodboard

UI Guide

I decided to keep the same accent orange colour in combination with black and white imagery. To add a more contemporary feel I updated the typography with a new bold and modern heading type. Together with updated iconography and button styles – Marine Printers visual style has more edge and appears modern.

UI guide
UI guide – 1

Next Steps

As the project progressed we proposed steps to help Marine Printers to improve their website experience:

  • creating new product photography to highlight the best work of Marine Printer
  • adding product-specific pages (for example direct mail, packaging)
  • creating landing pages for specific industries to improve SEO
  • creating and uploading templates to simplify the process for designers they work with