Author: EllieBird

The Art Therapy Agency Website Redesign

Background

Founded in 2011, The Art Therapy Agency is a membership based group of art therapists. The agency was set up to raise awareness of art therapy as a creative alternative to talk therapies. They specialize in offering a reliable service from their therapists to a range of different audiences, as well as membership support through regular training and support groups. After ten years, they are now looking for a redesign to make their branding more modern.

Restated Brief 

Branding

The first part was to create a new logo and set of branding for the Agency. Like the website, the client stated that they wanted the brand to look more fresh and modern. This included redesigning the brand’s colour palette, as well as completely redesigning the logo. From the first meeting, the client said that they wanted to keep a similar colour palette to what they already had, however update the colours to look brighter. The Art Therapy Agency needed a logo which could work in a variety of different formats, including online on their website and social media, as well as physically printed onto letterheads.

 

Website

The second part was to redesign their website. In particular, ensure that it is more user friendly and has a modern style. The client made it clear that she wanted the website to be much easier for users to find suitable therapists for their specific needs. This would be achieved by having a search bar option, which was missing in the Agency’s original website. The client also wanted to include a feature that would allow all the therapists to be able to edit their own pages and add anything they want without having to ask an admin to do it for them.  Along with the client, we agreed that both of the deliverables should keep the same colour palette to create consistent branding.

Teamwork

To help manage the workload and to meet our deadlines, we split the work evenly. We decided to break the job down into two sections; the branding (including colours and logo) – which Ellie designed, and the website – which Kamal and Dan designed. This meant that we weren’t all working on the same thing at once and that we could each manage and organise our own sections. As well as this, we frequently discussed the project using an online team group-chat to ensure that we were all in contact and working together as a team to tackle the brief. Setting up a group-chat was also really beneficial for our team as it allowed us to give each other regular peer feedback on each other’s work.

Extension of Deadline

Between us and our client, we agreed on an extension for the deadline of the project. This was mainly because we felt like we were rushing the design of the website and we did not feel like we would be able to meet the deadline with a quality of work we were completely happy with. Our client was very lenient with the deadline because she didn’t mind when she got the redesigned logo and website as long as it fully met her demands and we were all happy with it.

Logo and Colour Design

For the logo we spent a while at the start of the project brainstorming ideas together before Ellie took on the task on her own. Doing this was helpful as it gave us a wide range of initial ideas to take to our supervisor and the client. One part of important feedback that we got from our supervisor in the early days of the job, was to ensure that we were presenting our logo ideas to the client as part of a mockup (Logo mockups). We found this feedback really helpful taking the job forward as it allowed the client to be able to visualize what the logo would look like on the website, not just on a blank document. 

 

The icon

The Art Therapy Agency’s original logo had no icon, it just used typography. One of the main things we wanted to improve with the logo was it’s adaptability to social media platforms – which was also an important factor in modernising it. For us, this involved creating an icon to assist the typography for the logo. To start the design, Ellie hand painted some different shapes to explore how the idea of ‘art’ could be visually portrayed to users . Using a paintbrush to create texture, the hand drawn style also indicates the work that the Agency does. We felt that this style worked really well as it looked soft and inviting and our supervisor and client also agreed. For the icon shape, after feedback from our supervisor about initial sketches (Initial sketches) we decided to brand away from stereotypical concepts such as hearts and stars and really consider the brand’s aims and missions. We wanted to create a design which promoted the caring, inclusive nature of The Art Therapy Agency and so we began to look at circles – a symbol of togetherness and inclusion (Paint experiments) (Heart paint experiments). This idea worked really well and our supervisor was happy with how the circle looked in the brush stroke style, alongside the cursive typeface ‘bree’ – which we had chosen due to it’s soft and friendly style. There was a lot of experimentation using the circular icon (Logo experimentation) and in the end, we decided to create two different logo formats to give more flexibility for the Agency to use. One logo is a longer rectangle logo, which can be used to letterheads and sections of the website with more horizontal space. The second version is a circular logo, which can be placed in social media icons and areas with more square space. Creating two versions of the logo was more challenging than Ellie initially thought, as she had to ensure that they both looked consistent with the brand, whilst having different layouts.

Overcoming problems

We thought that we had finished the logo, as both our client and supervisor were happy with the design and it worked well across both the long and round formats, however we then realized an issue. Luckily before the logo was signed off, our client contacted us with her concerns that it looked very similar to their rival agency. On our behalf, we had failed to ask the client about their main competitors at the start of the project, which then caused these problems later on in the job. Reflection upon this, this has been a learning curve as it has taught us to always consider the client’s competitors during the research process, before we start any designs. However, we quickly responded to these concerns and came up with a solution to the problem and “save the day” as our client kindly said. By exploring with brush stroke marks again, Ellie came up with the idea of half a circle (RJ00485_BrushStrokeIcon), which our client said looks like a smile when placed alongside the typography. They really liked the way we had incorporated the text and image to create this and so we chose it for our final designs (RJ00485_Long_Logo) (RJ00485_RoundLogo).

Website Design

For the website design, it was crucial to first find the right wordpress theme for the client’s website. To narrow down the wordpress theme options, it was essential to make a list of the features needed, choose a responsive theme while keeping in mind the branding and the structure of the website. After taking everything into consideration, we found a theme that met all the requirements which was also approved by the client.

After choosing the theme, it was essential to download relevant plugins for the website which bring in important functions to the website, whether it’s UI and UX design, SEO, site speed, online store.. etc Whatever we needed, was most likely covered by a plugin. It was a bit challenging at the beginning, because we weren’t familiar with certain plugins, but after doing our research, we learned how to use them. 

Once the relevant plugins were downloaded it was time for us to get familiar with the wordpress UI, which includes sections such as:

  • The welcome page – The most important areas of the admin panel listed as quick shortcut links; including a step by step section on how to make your website look good.
  • Posts – Where you create blog posts.
  • Media – Upload images and other media files.
  • Pages – Create sub-pages for the website.
  • Appearance – Changing your site identity (site name, colours, logo, typography etc..)
  • Plugins – Install and manage website plugins.
  • Users – Manage user accounts that can access the admin panel of the website
  • Settings – The main settings.

After we got the hang of it, we dived straight into the design of the main pages. We met with the client several times to discuss what the main pages should be, how they should look and the features that should be included. Due to previous experience, we suggested using a plugin called Elementor, which is a website builder that controls every aspect of the website design work-flow from one place. This was a great suggestion because it made designing the website a lot easier thanks to the simple, powerful and flexible visual design tools and a faster performance. Thanks to Elementor we were able to straightaway start with the Homepage, while adding the other main pages into a menu bar. The menu bar includes; the home page, about page, therapist page, a join us page and a contact page. These pages were designed taking into consideration the client’s requests according to her standards, the branding and the visual content approved by the client after the meetings. 

After finishing with the page designs, it was crucial to optimize the website and make sure that it was compatible with other devices such as desktops, tables and mobile phones. This was also another challenging aspect of this project, but with the help of everyone we managed to make a responsive website compatible with different devices.

Last but not least it was important to map the domain before launching the website. The domain management of the website was another important task in order to fulfill the website’s identity. The client was already paying for a domain host, so it was our job to map the domain to WordPress and launch it.

Reflection

Dan

Personally, it has been an enjoyable project, however it took much longer than any of us would’ve thought. At the beginning of the project, I did not have any experience in designing a website with full functionality. However, it was a steep learning curve and I have learnt a huge amount of experience that will benefit my career. We definitely had times where we struggled in creating a good solution, but we worked our way around any issues swiftly. The main challenge of the project was to create a website that looked great visually, but also had the functionality that would make it successful, and I believe we have achieved that. In general, we had a close relationship with our client as we met regularly to go over changes and make any new ones to suit our clients demands. To improve in future projects, I should manage my time better and ensure deadlines are met. 

Kamal 

Overall, the project went very well. I really enjoyed it even though it took a lot longer than expected. One of the main reasons why I chose this Real Job was because I had some experience in web design, however during the project we encountered a lot of unexpected challenges such as finding the right website plugins and learning how to use them which took time to learn. Nevertheless, we managed to overcome these hurdles as a team and reached the client’s expectations. I’ve learned a lot throughout this project and gained plenty of experience which will come in handy in the future.

Ellie

This project has really opened my eyes with how long rebranding jobs can take. Despite a couple hurdles, I have really enjoyed working on this job with Dan and Kamal, of whom I had not worked closely with before. I think that we worked really well as a team as we were in constant communication regarding the job and we weren’t afraid to give each other constructive criticism. I chose this job as I am interested in a career in branding and I feel that this job has taught me some valuable lessons for that – such as making sure I fully research the client’s competitors so I don’t cause any copyright issues later on in the project. As well as this, I have also learnt a great deal about the production side of creating logos, which will be beneficial for my future as a designer.

Ure Museum Digital Exhibition Booklet

Background

The Ure Museum

The Ure Museum can be found in the Classics Department within the Edith Morley building on the University of Reading’s Whiteknights campus. Before I started this job, I wasn’t familiar with the museum, however now I wish I had discovered it sooner as it is such an interesting asset to the campus. Before the COVID19 pandemic hit, the Ure Museum used to hand out physical exhibition guides to explain the beautiful objects in their exhibitions to vistors. However, the coronavirus pandemic has meant that this cannot happen and so, the museum have expanded their exhibition booklet to an online format. This is a really exciting step for the museum, as it is leading them into a new digital world – hopefully expanding their audience and encouraging more remote visitors from around the country.

I was assigned this real job with the task to design a digital exhibition guide for their upcoming exhibition – Troy: Beauty and Heroism, which is a spotlight loan from the British Museum, due to visit the Ure between September and December 2021. During my intial client meeting, I was told that the digital booklet would include a combination of images and text relating to each of the different objects in the exhibition. Originally the exhibition was meant to take place in February 2021 but COVID19 stopped this from happening – pushing the dates back. Upon reflection, I’m glad that this happened, as it meant that I could spend longer on the project – handing over a design at the end that I am really happy with.

Restated Brief

The main deliverable for this project was an interactive eBook , of which vistors could download remotely to read about the exhibition objects on their phones, tablets or laptops. Due to the exhibition being a spotlight loan, it was important that I incorporated in both sets of branding to create an exhibition guide with reflects the branding of both museums. As the Ure Museum and British Museum already have very strict guidelines, I had to ensure that I was considerate and consistent in my designs.

The specific objectives

Within the restated brief, my specific objectives for the job were that:

  • The eBook must be easy to navigate for a reader – including the use of clear, interactive links.
  • There must be clear divisions to show the three main sections of the exhibition.
  • The prelims and end matter must be easy to find and read.

These three objectives gave me a clear starting point and a constant focus throughout the project, which helped me to stay motivated and on-track. Due to not having any specific software requirements to create the eBook in, I was free to chose an appropriate software, which I found really interesting as I learnt a lot about how eBooks can be made.

 

Changes to the brief

As the brief was very focused from the start, I didn’t encounter may changes. Although, due to the exhibition date being pushed back to a lot later in the year, it gave me some freedom and more time to get to know my client, which I really appreciated. However, at times I think that this did make the design process feel very lengthy, as I ended up working on the project for a couple months longer than originally scheduled.

Research

To start the ideation process, I began by looking at examples of other digital exhibition booklets to discover what navigational systems worked well, as well as mainly studying typeface sizes and the treatment of images and prelims/end matter. One particular example I was drawn to was the Pompei exhibition at Grand Palais (available to view at: https://www.grandpalais.fr/pdf/Guide_Visite_Pompei_GB.pdf). I liked this example as it is quite simple, yet effective, due to the large typeface, limited colour palette and straight-forward navigation system. As well as this, the clear clickable links within the guide related to the specific objectives I had been set as part of my brief, therefore, I used this resource as inspiration for starting my eBook.

I think that the guide is so easy to navigate as the different sections are clearly divided by large headings and the navigational bar is consistent on every page. This encouraged me to consider consistency during my own design process. However, the Pompei exhibition guide also urged me to think about what things didn’t work so well, or were missing, so that I could incorporate these into my own design. One thing I did find confusing with the booklet, was that the clickable links were not highlighted, so there was no immediate indication of which parts of press. This research was valuable to my designs as I knew that as a user, this is something I subciously look for online. Therefore, when designing the Troy exhibition guide, I used colour to show which links were interactive – furthering the clarify of the navigation system for the reader.

Creating the eBook

Due to my lack of experience in creating eBooks at the start of the job, I had to spend a lot of time discussing options with my supervisor. Having professional insight into the area gave me a lot more knowledge, of which I can now take forward for future projects. After researching different softwares, I finally decided to design the publication in InDesign as I had a lot of experience working with it and so I felt more comfortable. It was a really interesting process creating the eBook as I had never created an interactive pdf before – I thought it would be really time consuming but the process was very straightforward and by creating basic mockups I was able to experiment with different types of navigation.

 

Navigation

I started by focusing on navigation as I didn’t want to waste time creating layouts which could then be effected by changing the navigation. By the time I placed the text in, I was glad that I had this thought rationale, as I changed the original navigation system from a bar running down the left page margin, to small icons at the bottom of the page.

The final navigation system
The original navigation system

From using InDesign for editorial projects before, I was able to create a plan of what elements I wanted to focus on first. I started off by considering the following:

  • Margins and columns
  • Master pages
  • Headers and footers
  • Running heads and folios
  • Stylesheets
  • Paragraph and character styles

I chose to start the design with these page features as I wanted to create a strong foundation to place the text into.

Branding

After designing the main layout of the guide by using masterpages for different sections, I then moved onto the design stage. Having the Ure Museum’s brand guidelines was really helpful as it limited my choice of what colours and typefaces I could use. When I first met with my client, they gave me a selection of previous design jobs commissioned for the museum and these really helped me to get a feel of their branding. Looking through other examples, gave me a clearer idea of what the exhibition guide should look like in order to be consistent with other designs that had been created for the Ure Museum as they all clearly utilized the same colour schemes, graphic devices and typefaces. This job was my first experience of working on brand guidelines and I really enjoyed it as it gave me a clear direction with my designs.

Alongside the Ure Museum, working with the British Museum was a huge privilege. I was in frequent contact with their Press and Marketing Manager, who regularly assisted me along the project. Creating contacts with someone from such a respected company has been one of the most rewarding parts of this job. I received the British Museum’s brand guidelines for the Troy exhibition and had to ensure that I read them and understood them before I sent anything to my client. This process largely improved my proof reading skills as I had to read the text through many times to ensure it was all correct.

 

The cover

The final part of the design process, was designing the front cover for the exhibition guide. This part was where I incorporated in the British Museum’s branding – using their logo, featuring exhibition image and exhibition layout guide. As well as the booklet being consistent with the rest of the Ure publications, it also has to be consistent with the publications being produced by other museums working with the British Museum for this exhibition tour. This is why I chose the layout for the cover. I decided to change the boxes into the Ure Museum brand colours to add their touch to the British Museum’s layout. I think that the cover nicely combines the two brands together.

Originally, the whole publication was set in the Ure Museum’s blue brand colour. However, after placing in the images on the front cover, it seemed appropriate to use their orange brand colour instead – to create harmony between the text and images. Overall, the client and I agreed that this colour scheme worked a lot better than the original – which taught me that I should’ve furthered my experimental process within the brand guidelines at the start.

The final front cover design

 

The first draft of the front cover design

Reflection

I have thoroughly enjoyed working on this project with the Ure Museum, as it has improved my editorial and reader navigations skills, as well as teaching me many new skills – including how to create eBooks and how to work with brand guidelines. Being trusted to work on a project with the British Museum has also improved my confidence as a designer. Receiving such positive feedback from my client has been a huge highlight of the real jobs scheme for me and having the opportunity to create connections within the branding and marketing world has made the lengthy process of this job worth it.

Coming away from this project, I feel as if I could’ve worked more efficiently to still finish the job closer the original deadline, however having extra time allowed me to work with my client for longer, which I really enjoyed.