Work Experience Outcomes

The following post will concentrate on my experience with Bate Brand and how it affected my work ethic and existing interpersonal and professional skills.

• Teamwork

When I was introduced to Squarespace, I often had to reach to Bate Brand’s Graphic Designer to show me how certain tasks such as modifying the layout of a page, incorporating custom CSS or changing the template can be done. An example of that was creating a blog page for the Signature Printing website. I had difficulties showing a summary of the categories of the blog and Elliott demonstrated how this can be done with inserting a new content block under the Summary section

In another situation, putting text content on the website had to be synchronized with Bate Brand’s copywriter who notified me whenever any changes to the information on the website had to be applied (making text short, adding new sections that were missing before)

• CSS

When working on specific elements of the Signature Printing website, I often felt that the template needs a bit of customization which could not be arranged by Squarespace’s options. For the purpose, additional CSS had to be implemented using the Custom CSS Panel in the Design menu.

A number of site elements had to be modified including:

1. Site title position for tablets and phones (or any devices with a screen width less than 768px)
2. Hiding a section of the website initially which will be then displayed by an animation
3. Changing the design of the icons in the timeline section of the website
   

• Squarespace

Apart from learning the basics of Squarespace, during the experience at Bate Brand I had the chance to explore how to make the most of the platform’s functionality. In some instances the template was limiting me as a designer as I wanted to add features that were available on different templates (customized parallax scrolling, timeline, rearrangement of the header). Regardless, satisfying results were accomplished by enhancing the presentation of the website by importing an HTML timeline which is fully working despite not originally a Squarespace feature. Also, transition effects were incorporated to give the site a more dynamic look (pop-up animations on the homepage for the intro section, fade in animations for segments of the timeline). Overall I now have a good impression of Squarespace’s capabilities and see it as a good addition to my skillet.

• Time Management

Ensuring that all tasks for the specific week are completed on time was crucial for the project. My inability to go to Bate Brand’s office more than once a week required being responsible that all content is in place for the next time I go there so that it can be reviewed by Bate Brand’s Graphic Designer. The team at Bate Brand is also really busy with other projects so I also had to make sure that if I had any questions, concerns or suggestions regarding the website I need to prepare them for Friday (the day I normally go to the office).

• Creativity

After getting familiar with Squarespace’s main principles, I was asked to come up with an idea of how the homepage of Signature Printing can be laid out. I looked up some Photoshop site layout mockups and designed the following arrangement. This idea was discussed with Elliott (Graphic Designer at Bate Brand) in terms of how to implement those sections with Squarespace’s functionality. Subsequently, I tried recreating this mockup using the Bedford template as a start. However, I realized that parallax scrolling is missing in this template and was encouraged by Elliott to try another template which seemed more dynamic – Shift. The latter worked better and looked smoother as it enhanced the presentation of the website with a full screen introductory section, scroll down functionality and interactive navigation. 

In another situation, I had to amend the icons in the timeline section so that they match

 the information in the section they belong to. I looked into each topic that was mentioned in the timeline, highlighted the main subject that was talked about and tried to associate it with simple words that can be searched as icons – inks,printers,3d printing

Also, I was asked to amend Signature Printing’s existing logo in a way that the same structure is kept but there is a slight variation in the colours.

Based on the color I chose for the header, I decided that the letters need to be filled with a blue colour. Also, the dots below the logo use different shades of blue which I think brings more professionalism to the logo and speaks for the brand as a well established one.

• Photoshop

Working on certain sections of the Signature Printing website required using Photoshop for editing graphics provided by Bate Brand. For the Case Studies section I had to come up with three images that represent best Bate’s work for the companies. I was given some PSD files and extracted visuals from them that best visualise what Bate Brand have created for three of their previous clients. 

• Communication

Being part of a well established team with many successful projects behind their back was sometimes challenging for me in terms of getting my ideas across and being confident about the outcome of my work on the website. However, this was gradually improved as after each time of completing a task on the website, I sat with Bate Brand’s Graphic Designer and went through the steps I took as well as how I think they could be improved later on.  Another example of working on my communication skills was a point when I suggested that I can make the presentation of the website more dynamic using CSS transition effects. Elliott liked the idea and was pleased with the examples I provided.

• SEO

During my work experience, I was invited to Basecamp, a platform that the team at Bate Brand uses extensively for managing projects by exchanging messages, files, making reminders about deadlines, etc. I had a conversation with Bate Brand’s CEO about making the website friendlier to search engines and learned about the importance of naming pages and content appropriately. Also, some tips were given about the management of the project in a way that putting real content (rather than dummy content or placeholding text) can shorten the length of work but still ensure that the content is appropriately placed.