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
UI Work
I was responsible for the UI work, which included implementing several of my own layout ideas.
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.
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.
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.
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.
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.
Funeral Stationery page
The funeral section required additional options, so it had to be split across multiple pages.
