Ryman Printshop

The client required an online portal to be used in-store initially and later set up as a B2C site for customers. This project was a collaboration with team members. My main focus was on the UI design and feel, as well as building a few templates. Take a look at the live site: rymanprintshop.co.uk

My project tasks:

  • Style portal
  • Create templates
Ryman Hero Image

UI Work

I was responsible for the UI work, which included implementing several of my own layout ideas.

Ryman UI

Landing page

I created a simple grid layout for the product cards, as the client didn’t require much content overall. Each product card features an information box that appears when the card is hovered over.

Specsavers Poducts

Design option page

For most of the products, the client required a page where users could choose from a selection of editable templates or upload their own design.

Ryman Design Options

Products page

I created a card for each product, with each card displaying the design name and size. I also included icons to indicate which editable features the product offers, such as text editing and image uploads.

Ryman Design Options

Product Editing Area

I updated the design options palette, which includes the colour and font options. In the product area, i refreshed the style of the material option drop-downs, along with the price tables. The material and price elements are used within the artwork upload products, so i managed the styling with CSS grid and flexbox to ensure they adapt to the different layouts.

Ryman Product Design Area
Ryman Product Specification Area

Upload your artwork page

As the material and price table elements were already styled, they accommodate the space within this area by sitting side by side, based on the grid and flex styling I applied. Below them, the client wanted an area for downloadable guides. Depending on the product specification chosen by the user, the download link would point to the relevant artwork guide and update the artwork guide preview. It was my task to create and style this section, along with adding the guides created by a team member.

Ryman Upload Area

Funeral Stationery page

The funeral section required additional options, so it had to be split across multiple pages.

Ryman Funeral Categories