Business Category – Clothing | Location – England, UK | Websitemandsyourschooluniform.com

During my first year working at Red Hot Penny I had the opportunity to work on a huge and exciting project for one of the UK’s most well known brands. My role on this project was to mock up the initial wireframes and concept layouts of each key page. Once the design had been completed based on M&S branding requirements my next task was to code the design into our in-house ecommerce platform at Red Hot Penny. During the site build and as an ongoing task after launch, photography and image manipulation were required for all products added to the site. This involved using Photoshop to ensure all images were consistent across schools and editing scanned school logos onto pre-photographed apparel.

The Brief

M&S wanted to launch a new site specifically for selling uniforms. Our task at Red Hot Penny was to build and populate a brand new website for their project. This also included ongoing site updates to content, images and products.

Roles & Responsibilities

  • Mocking up the original wireframes
  • Design implementation into an in-house ecommerce platform, non-responsive
  • Ongoing image creation for new products

The Solution

When the project initially landed with the design team I was tasked with creating some basic wireframe concepts in Photoshop for each page. This included the homepage and categories through to product lists and detail pages. The lead designer then used my wireframes to produce site mockups using M&S branding. Once the mockups were signed off by the client the design was transferred to our in house ecommerce system. I spent a lot of time creating batches of images for the first set of products. Unfortunately this meant I didn’t get the opportunity to do much of the build. At the end there were some small areas of the site that needed tidying which I took on in between image editing.

Homepage

Here is the final implementation on the in-house ecommerce platform at RHP:

mandsyourschooluniform

The homepage contains list of counties each linking through to display a list of schools within that county. There are also sections here where specific sale adverts can be uploaded either manually or on a set date/time.

Category List

mandsyourschooluniform

After selecting your school you can then select whether you are shopping for boys or girls school uniforms. The user was also presented with an informational section at the top of the page with contact details of the school.

mandsyourschooluniform

Product List

On the product list page for your school each product showed a single image, title, price (including offers/discounts) as well as any colour variations for that particular product.

mandsyourschooluniform

Product Page

Each product image had to be edited in Photoshop with the schools logo and colours. For the school below two different variations of logo were provided, a red for blue colour clothing and blue for red coloured clothing. The provided logos also matched up with clothing of a certain material to give a more seamless blend between logo and template.

mandsyourschooluniform

After the site launched requests came in for new product images to be created in batches as well as designs for promotional banners which I undertook regularly and uploaded to the site.