Third year students Ruth and Maya and second year students Lucy and Grace were selected to form the ‘Undergraduate Recruitment team’ to increase applications to the BA Graphic Communication course throughout the 2020/21 yearly cycle. The deliverables for the project were to be determined by ‘blue-sky thinking’ and the innovative ideas that were generated, with a variety of possible outcomes, including social media posts, digital or physical brochures/leaflets, presentations and the organisation of online portfolio days. The success of deliverables was measured by the number of applications that the course and department received for the academic year, aiming for a greatly increased number than that of last year.
Aims
To increase undergraduate applications for the BA Graphic Communication course
To raise awareness of the course to students who may not think of it as a viable option for their career or university experience i.e. those not currently studying art or design
To generate innovative and creative long-term methods of promoting the department across the UK
To effectively encourage prospective students to apply through the emphasis of key statistics and facts about the unique academic and creative aspects of the course
To ensure portfolio days are run in the most effective way despite COVID-19 and so that they are run as similar as they would be if they were in person
To increase the use of student-fronted promotion of the course
Target market
Students in their last two years of schools who are preparing for open days and beginning to think about their UCAS application
Schools who hold career/university days to help their students explore many different degree paths and specific universities
Not just art students but also the academic students who may not have even considered Graphic Communication because they do not yet understand what the course is really about
Three specific target groups; prospective students, applicants and offer holders. These groups will all be at different stages of the applicant journey, so it is important that our approach is appropriate for each one
Additional considerations for parents, who are interested in the application process for their child
Roles and responsibilities
The roles and responsibilities of the design team varied per deliverable and each team member was heavily involved in the idea and design generation process throughout the project. Additionally, each team member had a specific role that allowed for better team organisation and understanding of individual responsibilities. Ruth was project manager, being the point of communication between the design team and the client, Maya was finance manager investigating the realistic costs of implementing ideas, whilst Lucy was creative director supported by designer Grace.
Lucy and Grace will continue the project into their third year with new team members in the next academic year, carrying our ideas forward for the next recruitment cycle.
User research
In order to fully understand the deliverables that were required at each point of the applicant cycle, a user journey was developed, mapping the various points at which we could interact with potential applicants and the language that would be used to target them. Figure 1 demonstrates how target users move from being prospects to applicants to offer holders throughout the year and the outcomes involved at each stage to promote the department. Figure 2 explains how this journey fits into the academic recruitment cycle, which is repeated each year, starting in September.
Figure 1: the user journey undertaken by prospective students over the course of the recruitment cycle and the corresponding actions of the recruitment team to meet their behaviour
Figure 2: how the applicant journey fits into the annual academic recruitment cycle
Outcomes
As the project progressed, a number of outcomes were developed and explored. As a team we were involved in the development of a Facebook group that was aimed at applicants. The purpose of this Facebook group was to create a platform for applicants to ask questions and to engage with the content that we posted. The Facebook group also enabled applicants to link with other students on the course and begin to recognise names from portfolio mornings and applicant sessions. Additionally, we helped to create posts for the department Instagram to promote the course, examples of which are shown in figure 3.
The portfolio mornings and applicant sessions were arguably the biggest part of this real job where most Saturday’s two members of our team would join our supervisor and tutor James and help him run the session. We felt having existing students have some alone time with the applicants helped to make the applicants more comfortable and gave them time to ask us more general questions related to university life. Following each portfolio morning, a personalised mailer was written and sent by Ruth to each applicant turned offer holder, commenting on their individual portfolios and aspects of the course that were discussed in the session. A copy of the departments diversity zine was also sent out, as seen in figure 4. These were also supported by emails and phone calls to the applicants, a personalised approach that proved popular and received positive feedback from the students.
Aside from portfolio days and running the Facebook group we were also tasked with smaller jobs to promote the department. One of these tasks was to create a promotional video for applicants that had a brief introduction about some of the students in the department (including ourselves). The creation of this video had the purpose of showing potential applicants that it doesn’t matter what background they have come from, graphic communication may still suit them. Using a variety of students helped to highlight our range of backgrounds despite still ending up on the same course.
As a team we also created a mailer that was to be sent out alongside our course brochure. We decided as a team that we wanted the mailer to be integrated with the brochure, and thought we could achieve this by creating a folded ‘R’ (for Reading) to sit on the corner of the brochure (figure 5). The ‘R’ contained a personal message from ourselves and also some information about the typeface of the ‘R’. Although this design was not produced for this year, the concept may be used within the next academic cycle.
Figure 3: The series of posts designed for social media to promote the course
Figure 4: the mailer containing a personalised written note and a copy of the diversity zine sent to offer holders
Figure 5: the ‘R’ mailer concept that would accompany a course brochure and intended to be sent out to prospects
Team work
As the yearly recruitment cycle progressed, it became clear that working as a team and delegating roles efficiently was the best method of ensuring success. The portfolio days that were held every Saturday from December through to April were mainly hosted by Ruth and Lucy to ensure consistency and so that each week ran smoothly. Ruth and Lucy formed a partnership and by the end were completely confident in running a portfolio day alongside James. Despite Maya and Grace not being involved in all the portfolio days, Ruth and Lucy had briefed us on what we needed to do so that everyone was able to step in if needed.
Aside from the portfolio days, working as a team was important when trying to create an innovative method to recruit possible students. In our weekly catchup with James we were often briefed with a task to prepare for the following week. We decided it best to think of our own ideas ready for a team meeting where we could then collaborate and develop our ideas further. We found this the most useful method to generate ideas as we sparked thoughts of each other.
Not only did we work as a team of four but James was also an element of our team where working with him was crucial to progressing through the recruitment cycle. James’ advice and insights into his previous experience of the recruitment cycle was helpful for us when pitching our ideas as James helped us to fine tune our thoughts into a successful plan.
Reflection
Working on this project during the Covid-19 pandemic created various challenges, mainly in generating and implementing mostly digital ideas, compared to the physical and more personable approaches used in previous years. As a team, we were required to adapt past outcomes in order to provide a relatively similar application experience for this academic year and we were conscious of increasing prospect participation at online portfolio days and continued interaction over social media and mailers.
Measuring our success was slightly different and more difficult compared to other design projects we have worked on in the past, as we were more focused on applicant numbers and response rates, which we did not always have immediate access to due to confidentiality issues. However, it could be considered that this academic year is not comparable with other years due to the pandemic, which will result in changes to applicant behaviour despite our work to improve prospects.
Overall, we worked coherently as a team throughout the year, having the opportunity to develop our creative thinking and strategy generation within the constraints of a mostly digital space. The project provided experience of working as part of a wider marketing team, as designers, consultants and idea generators, roles that could help inform our practice in our future careers. Personally, I (Ruth) have been able to improve my confidence and social skills in talking to a range of people online, especially at portfolio days answering applicant questions and promoting the department, which I can apply to upcoming job interviews.
The transition of adapting social skills to work online I (Maya) found initially nerve wracking, however as we began the portfolio days I began to develop more confidence. The skills I developed through the portfolio days will be transferable as I begin to apply for jobs and undergo interviews. Overall, I feel that this job was an exciting job to be a part of, as the success of this real job has a direct impact on our own graphics department, which is unlike other real jobs.
Over the last thirty years in the label and packaging printing industry, Swiss-born Bernhard Grob has travelled across the world to promote and sell flexography printing presses for the company Edale Ltd. of which he was a co-owner and Managing Director. During these travels, Grob has written a series of annual travel journals, detailing his experiences, and the developments and issues in the printing industry that he came across, now collated into his book; ‘Destination: Travelling the world for the printing industry.’
Grob enlisted third-year student Ruth to design the inside pages of his book with the main aim of producing a consistent layout appropriate to the content. This would involve proofreading, editing and typesetting the text, and sorting, editing and arranging corresponding imagery. Clarity needed to be achieved, whilst also ensuring that the book remained engaging and interesting. The client stated that they were aiming for this project to be ‘something that is not the norm, something that is different to everything else on the bookshelf, something unique’ and hoped that, as a student designer, Ruth would be able to expand her knowledge of the subject matter whilst also bringing a more youthful and on-trend approach to the design.
Additional stakeholders
The book was originally intended to be printed as part of a live event at the international Drupa print exhibition in Dusseldorf, Germany, initially due to take place in April 2020, then pushed back until 2021, until it was eventually cancelled entirely until 2024, due to Covid-19. Belgium-based digital printers, Xeikon, agreed to produce and print the book, to demonstrate their leading technology and highlight their high-quality digital colour printing.
After printing, the sheets were sent to be bound by book manufacturers Mueller-Martini who produced the final outcomes ready to be distributed. Professional designer Richard Jones was also part of the project as the designer of the book cover.
Throughout the project it was important to consider the various factors and influences on the production of the final book, whilst also maintaining necessary contact with the relevant stakeholders. These industry professionals allowed me to gain valuable insights into the publishing sector, improving my communication skills and expanding my technical knowledge.
Target audience
The publication is aimed at professionals within the printing industry, specifically those producing self-adhesive labels and packaging. The book will help to inform their practice, provide technical knowledge, be a reference point on the development of printing processes and most importantly, detail the entertaining experiences of the author on his travels around the world. It also includes articles from prominent international figures within the industry, whose inclusion will help promote the publication. As the book features many technical aspects, it is unlikely to appeal to the general public who have little knowledge of printing processes, and is therefore not for sale, but rather distributed with financial donations to the department of Typography and Graphic Communication at the University of Reading being welcomed.
Deliverables
Proofreading and editing of all text and imagery
Design of inside pages for the entire book, specified to be in full CMYK throughout to highlight the high-quality colour printing of Xeikon
A loose bookmark that is printed separately and fits into the front of the book containing information regarding donations
Input on the design of the cover
Design process
Research
Receiving and writing the brief was straight-forward in content yet complex in compiling as information was provided in small sections and by a number of stakeholders which I then had to combine into a succinct single brief. After clarifying the responsibilities of each party involved, I had a much clearer understanding of my role within the whole project and what each stakeholder was expecting of me.
Taking inspiration from the Swiss heritage of the client, I carried out research into interesting book layouts (figure 1), within the theme of travel (figure 2), and examples influenced by the famous Swiss style (figure 3), particularly editorial work by Jost Hochuli who is from the same town as the client, St Gallen (figure 4). Additionally, as the chapters of the book were organised by country, I had the idea of incorporating travel stamps into the chapter openers, inspiration of which can be seen in figure 5. Eventually these involved a mixture of illustrated stamps and photographs of the real stamps taken from the client’s various passports over his years of travelling.
Research into the client’s company, Edale Ltd, and the other stakeholders involved (Drupa, Xeikon and Mueller Martini), was also carried out to gain a better understanding of how the book would be produced and distributed, technical aspects involved in the project, and the motivations for each stakeholder in the project. I was also able to broaden my knowledge within the area of flexography and print exhibitions, having the opportunity to collaborate with international companies leading the sector.
Figure 1: mood boards demonstrating research into interesting book layoutsFigure 2: research into the design of travel books and journalsFigure 3: research into Swiss style book designFigure 4: research into the work of Swiss designer Jost HochuliFigure 5: inspiration for the concept of creating illustrated travel stamps for each country chapter
Content structure
The next step involved the client sending across all of the copy, which included a large text document and a series of photographs, sent both digitally and physically. I then organised these into their relevant country chapters, scanning in the physical photographs and ensuring all images were in CMYK and at least 300ppi, as requested by Xeikon to demonstrate their high-quality digital colour printing. The text was proof-read to ensure typographic consistency, such as capitalisation, the use of commas and correct use of hyphens, and to check for minor grammar errors given that English is the client’s second language.
Having read through the entire text, it was agreed with the client that the order of the content could be moved around slightly. Organised alphabetically by country, the book also contained additional articles written by friends and colleagues of the client, which originally interrupted the main text and disrupted the flow of reading and therefore the potential design and hierarchy. The client therefore allowed me to rearrange these articles to the end of each country chapter, with the addition of short descriptions of the external authors.
This initial stage of the project required great organisational skills, as there are around 60 chapters in the whole book, with a range in the number of images per chapter. This would later demand selective skills, ensuring that the best quality images were included next to the most relevant sections of the text. It also allowed me to fully experience the whole process of copy creation and editing alongside designing, a role I am now more familiar with and can build on in the future if I become a professional editorial designer (a career option I am currently considering).
Initial ideas
Using the content structure as a basis for the design, I created a number of initial layouts using a sample chapter from the text and accompanying images. Figures 6-10 demonstrate how these ideas progressed from initial sketches to digital iterations, experimenting with the grid system, number of columns, image placement, chapter openers, measure and typeface combinations. A key concept that was taken forward from this initial ideas stage was the inclusion of similar serif and sans serif typefaces for the different authors of the book, a serif typeface would be used for the main author (the client) which would be differentiated to the articles written by other authors with a sans serif typeface, ideally within the same type family.
Figure 6: sketches exploring initial ideas of layoutFigure 7: digital iterations of initial sketched ideas (ideas in same order as in figure 6)Figure 8: chapter opener design from idea four, which became the basis for developmentFigure 9: mind map of general ideas to apply to the design of the bookfigure 10: initial exploration of typeface combinations and hierarchy
Design development
Over the course of six months, the design progressed substantially. Frequent online meetings with the client proved extremely useful in the development of the design, as a wide range of options were shown and then narrowed down based on personal preference and effectiveness for the large amount of copy.
Taking into account the various levels of text and inspired by the ‘step’ approach often used in Swiss design and by Jost Hochuli, figures 11-14 shows how this typographic design was applied to the content.
After a design direction was established, I attempted to apply it to the copy of the entire book. This highlighted some challenging issues, mostly the unnecessary length of the book created by paragraph spacing (479 pages without images), which was resolved by using indents (figures 14). Additionally, the large number of images sometimes proved difficult to match up to the relevant paragraphs efficiently, however detailed notes from the client helped solve this. Further considerations were then also made, regarding the use of colour throughout the book, the chosen display typeface, spacing between headings and prelims design (figures 15 and 16).
At this point, I referred back to only making amendments to a smaller sample of the book, roughly the first 75 pages, to allow for quicker changes to be made whilst still designing enough of the varying types of content to understand how these would work throughout the rest of the book. After these issues were resolved, the new system was applied to the rest of the content, with only more minor alterations then being carried out afterwards (mainly moving some images around, some grammatical changes, addition of more images that better illustrated the content etc).
Throughout the design process, when it was realised that the book was going to be unnecessarily long, the dimensions of the pages were changed to a more effective size (from 160mm (w) x 200mm (h) to 170mm x 240mm), but all other aspects of the original print specification remained the same.
Figure 11: experimenting with different chapter opener layouts and text block placementFigure 12: testing out using coloured pages to differentiate new chapters, which although bold and eye-catching would result in clashes with the coloured imagery, makes the first page of each chapter appear separate to the rest of its content and was turned down by Xeikon due to the cost of inkFigure 13: comparing display typefaces and colour options for new chapters. Gastromond was eventually chosen for the display type, although at a smaller size than shown above, due to supervisor feedback that as a heavy font with only one weight, it should not overpower the rest of the text and should therefore have less prominence on the whole page.Figure 14: the development of the design from using paragraph spacing (left) to indents (right) to reduce the overall length of the text. This was implemented after the full book had been formatted and was found to be far too long (479 pages without images) so indents were preferred to cut down on the number of unnecessary pages. The right image also demonstrates the ‘step’ approach used to create hierarchy within a Swiss style.Figure 15: some example spreads that demonstrate developments in the use of colour in the text, image treatment, running heads/feet, measure, text placement, type size, display text spacing and the contrast in typefaces for different authors. At this stage, the main body typeface was also changed from Skolar Latin to the more consistent and ‘classic book’ typeface Georgia based on supervisor feedback, which was still paired with Skolar Sans Latin for external authors (compare the body type in figures 14 and 15).Figure 16: the development of the contents page matching developments to the overall design, with the last image being preferred for clarity, length and navigation
Bookmark design
In addition to the design of the inside pages, the client requested the design of a bookmark style slip that would be inserted into the front of the book informing the reader of the possible donations to the department rather than the book being for sale. This used text provided by the client which was then organised typographically to match the design of the inside pages, changing from a horizontal to vertical format to aid the reading experience. The developments of the bookmark can be seen in figure 17.
Figure 17: the different iterations of the bookmark donation slip design, with the final outcome on the right
Production
Professional designer Richard Jones created the cover of the book, combining the themes of travel and printing, through the use of reflected type representative of letterpress processes. I was able to offer some input on the design of the cover, and made some changes to the back and spine, changing the metallic effects to a more legible navy, as can be seen in figures 18 and 19.
The final books were printed in Belgium and France on Xeikon’s SIRIUS and CX500 digital presses, before being sent to Switzerland to be finished by Mueller Martini on their SigmaLine. 1000 copies of the book were produced, 500 for the client and 500 for Xeikon and Mueller Martini to use as technical demonstration pieces for their industry-leading machinery. The production of the book also featured in an international webinar by Xeikon Cafe TV, which can be viewed here: https://go.xeikon.com/l/61642/2021-03-30/3sp4lx2
Although I was not immediately involved in the actual printing and crafting of the final books, it was important that I understood the production processes used and that my files were well-organised and print-ready, to ensure understanding and clarity across the different nationalities involved. Receiving copies of the final book was a really satisfying experience, and it feels like a great achievement to have produced a physical item in a year where digital deliverables have been prioritised. The full book was larger (in depth) than I had expected, as this was the first time I was able to fully visualise all 355 pages, but this only added to the overall feeling of satisfaction in holding something so large that I had designed. I had been slightly worried about the inner margins, but the main text block was appropriately placed on the page, with only some headings reaching into the margin on right-hand pages. However, as these are headings and are therefore in larger coloured type, these are still very legible and do not hinder the reading experience. Some of the images printed quite dark, although these had already been edited to be brighter and was more due to the actual printing outcome rather than the images supplied.
Figure 18: the cover design by Richard JonesFigure 19: the final cover design, edited by myself, changing the back and spine coloured blocks to navy for improved legibility. Additionally the author’s name was changed to white on the front and spine, and spine text was reduced in size. The text on the back was also edited for clarity and consistency.Figure 20: an example page from the press ready PDF file, sent over in single pages and will all printers marks included, as requested by XeikonFigure 21: the final books
Figures 22-32: spreads from the finished bookFigure 33: the finished book
Promotion
The client’s extensive connections within the label and packaging printing industry provided the opportunity for an article in Labels & Labelling to discuss his career and promote the release of the book. Pages from this article can be seen in figures 34-36, in which I provided the images that were used. This article was later translated into Russian for their equivalent magazine, again with further images that I provided.
Figures 34-36: spreads from the article featuring the client in ‘Labels and Labelling’, including images sent by myself
Reflection
Overall, although a long and sometimes challenging process, the actual designing of the book was interesting and fun, especially as the use of colour in the text was encouraged, something unexpected and different to other books I have designed. Organisational skills were a must-have for this project given the large quantity of copy provided, alongside effective editing and selection skills, which I was able to develop.
It was a pleasure working with the client, his own knowledge of design helped facilitate the process and his feedback was always constructive and honest yet friendly. It has also been a great experience for me to work with industry leading printers, gaining a better understanding of large-scale production processes and technical considerations. I am grateful to have had the opportunity to work on such an international project, with the production, promotion and distribution of the book involving many countries.
As an individual project, I have been able to greatly improve my ability to make critical design judgements, now having more confidence to work independently on such large deliverables and becoming more efficient in managing my workload. I have also developed my professional communication skills, having a great relationship with the client, feeling more authoritative in justifying my design decisions and ensuring effective communication between the various stakeholders involved. I am very pleased with how the final book turned out and feel grateful to have been part of this large-scale project, providing a valuable learning experience that I will be able to discuss in job interviews, something that many students will not have had the opportunity to experience.
If you are interested in receiving a copy of the book please contact bernhardgrob.destination@gmail.com.
Client reflection
“After a relatively short online introduction (as it was during the pandemic), Ruth grasped the ideas and intention of my book quickly, coming up with a detailed brief to ensure we both understood each other. The next step included her various design ideas which we talked through and again, quickly agreed on the chosen version. The real work started once I transferred the 140,000-word document, together with numerous photographs in electronic form, as well as some historic actual photographs and documents. It was a real minefield to put all this into the right order and sequence, but Ruth tackled it in a confident, efficient and prompt manner, with fewer queries than I had anticipated.
Dealing with Ruth throughout the lengthy process was a great pleasure and I much appreciated her professional punctuality, accuracy and attention to detail; something I considered rare in a final year student at university, eager to enter the real business world. Her keen creativity and understanding of the author’s mind-set played a key part in completing the design in such a short period of time, leading to the finished file, ready to go to the digital printing press manufacturer for printing. The only negative outcome is that the planned live book production during Drupa 2021 at the digital press manufacturer’s stand was unable to happen due to Covid.
In conclusion, I can highly commend Ruth as an excellent designer with an understanding for the bigger picture. A competent, driven young person with ambition who can lead from the front in the interests of the customer. I am sure she will go a long way in her future career making full use of her skills and entrepreneurial spirit.” — Bernhard Grob, BMGrob Consulting
Figure 37: Bernhard visiting the department and Ruth receiving the finished book
The COVID-19 knowledge e-learning platform is a website created by the data science club at the University of Reading to help the general public stay informed about the COVID-19 pandemic as well as learning new information and reinforcing previous knowledge about the virus. The overarching idea behind the project is “for users to learn everything about COVID-19 in a better way than the news”. We were working directly with students from the data science club and researchers who were interested in the topic and this Real Job was completed as a team involving Anthony Mason and Olivia Francis and was supervised by Gerry Leonidas.
Deliverables
The key deliverable for this job was to create the UI for the COVID-19 e-learning platform but alongside it we were asked to create a logo for the platform and avatars for the profile screen where users can pick and choose elements to create their own custom avatar. Finally, for the developers to fully understand and apply the new UI styling we created a digital booklet for them to consult that outlined guidelines, typography and design rules they should aim to follow to ensure consistency. Anthony was handling the UI half of the project and creating the guidelines booklet while Olivia was creating the logo and avatar.
The final deliverables for the project were:
UI designs for the e-learning platform.
Logo
Avatar illustrations
UI guidelines booklet
Starting point
Prior to our involvement in this job there were no designers actively working on the project and all of the UI work was being completed by the developers themselves. Naturally, from their work in computer science they were aware of user experience basics but there was a great deal of work to creating a platform that could be shared with the public. An issue we faced when joining the team was that none of the developers had previously worked with designers before and it was a new experience for everyone but we quickly began to communicate and convey ideas efficiently.
Original design: leaderboard featured on the homepage to compare quiz scores between users.Original design: topics learning page with embedded YouTube video and flip-able cards.Original design: profile page with COVID-19 information video and quick access links to various areas of the site.
Restated brief
In the original client brief they were confident in what they wanted and knew exactly how our knowledge and abilities would benefit the project. This was reinforced once we met with the clients and had our initial meeting over Microsoft Teams. They were able to clarify information we were unsure about and we laid out a plan going forward on what to do in relation to working with the developers. Additionally, they showed us what they had created up until that point, as stated in the original brief “implementation of key functions are almost there”, so our roles were clearly to apply our UX knowledge to make the site more usable and add new, modern styling to it. The only bit of information missing was a clear deadline, however as the goal of the project was to be released before a COVID-19 vaccine was fulled created and the pandemic “ended” a general deadline was set for January 2021. After our initial meeting we made a strong restated brief that both Gerry and our clients were happy to approve and we moved on to our next phase, research.
Research & idea generation
Due to the nature of the project and how quickly we had to move along we were not able to properly conduct user research to understand what people wanted in an e-learning platform on such a topic. At this point of the project the pandemic had been going on for over 6 months and most people were moderately informed about the virus and the vaccine efforts being made. We used this information as an assumption going forward but we also spoke with the clients to understand what knowledge they had about their users. This was limited but offered us an insight that was previously missing. However, we were able research current e-learning platforms, both in general and ones created for Coronavirus, which we used as inspiration for figuring out the optimal user experience. We also explored current design conventions for a website such as this to better guide our designs.
Sketches
Having researched how to create the best user experience for an e-learning platform we focused on creating quick crazy 8 sketches to generate ideas and consider a range of possible approaches. As well as the research we had to keep the original design in mind as they had developed everything for that up to this point, we sketched out the 3 main sections of the website: home and information, quizzes and the profile page.
Rough crazy 8 sketches to develop ideas for the home and information pages.
Wireframes
Developing upon these sketches we created low-fidelity wireframes that got the basic structure of the website and helped the developers visualise our approach and see how it differs from the original designs they had created. Consulting with the developers and exploring the original website we were able to create a user journey to visualise how they planned for the users to navigate the website. After showing them they were instantly happy with the direction we were taking and over the course of only one meeting they approved our wireframes and we moved on to further developing the visual style of the site.
User journeyLow-fidelity wireframes: homepage including an embeded video, information and daily COVID cases statistics.Low-fidelity wireframes: profile page including worldwide data, embedded video and customisable information about the user.Low-fidelity wireframes: quiz page with question, embedded image or video and answers for the user to click.
Visual design
From our sketches and low-fidelity wireframes we had a strong idea of where we wanted to take the website. The overarching style for the website was modern that was inline with the visual style of large organisations like the World Health Organisation and the NHS. An important part of the website was having it entirely viewable on one screen, with no scrolling, so for this to work we took a very modular approach using tiles that allowed elements to shift across the screen as the viewer navigated through the site, however, there was still the flexibility for scrolling within tiles, for example, for large blocks of text. After showing this to our client they were confident in our ability to transform the site but there were some criticisms such as changing the layout of learning topics to showcase images and better implementing elements in the quiz portion of the site. There were also areas of the website requiring changes that were miscommunicated previously such as the inclusion of a rotating globe to indicate where in the world the user was (which was present in the original design concepts).
Visual design: default homepage with “What is COVID-19” explanation video embedded and information text.Visual design: profile page with quick access links, personalised avatar and about me section, worldwide COVID-19 stats and user trophies collected from completing topics.Visual design: quiz showcasing example question and selected answer.
The meetings we had were incredibly productive as we consulted with the developers on whether certain areas of the website could be properly incorporated and similarly they were curious about the design aspect of the project and asked us a great deal of questions about what direction we were taking in terms of typography, colour, grids and branding implementation. We were curious whether they required a prototype of the website to see how it would have worked but they refused the need for one as they were confident the UI designs were enough and that they had already, mostly, figured out how the website would work and how the user would navigate it.
UI Guidelines
To allow the developers to accurately implement the new visual style of the website we created a digital UI guidelines booklet for them to consult as they created the site while we were not involved in the project anymore. This covered a range of topics that were important for them to stay consistent with the designs including the CSS grid we used, the colour scheme, the fonts and all the UI designs to visualise how it should look. We spoke with the clients to ensure we included everything they would have needed to make the website in its entirety.
UI Guidelines: CSS grid showcase demonstrating the basic website grid.UI Guidelines: Padding showcase demonstrating minimum padding between elements
Avatars
While only a small part of the project we spent a while making sure the avatars suited the website perfectly, beginning by exploring a range of avatars used for similar purposes and quickly began creating sketches to decide on a style that would work. We decided on including only the shoulders and head so focused on the details; eventually deciding on having customisable skin tone, hair, t-shirt, mouth and extras such as glasses. After settling on a concept we brought it to the group, and like with the UI, they were incredibly happy and we progressed to digitising them in Adobe Illustrator. The final avatars were well received after being shown to the clients and Gerry.
Digitised avatars in a few example configurations.Avatar sketches showing rough to coloured versions.
Logo design & brand application
The process for the logo was very similar to the avatars, beginning with sketching and moving into digitising the logos before finally being included in the website. Between sharing our work with clients, our supervisor and during Real Jobs meetings the final logo was unanimously decided upon. The colour scheme too was overwhelming agreed upon and everything was brought together.
Developed logo concepts, the final logo is bottom-left (in black surround).Logo sketches exploring various ideas.
The logo was one of the main deliverables for the website and it is featured in the fixed navigation bar of the site. The colour schemes too were an underlying element of the website being used for accents and hyperlink texts, and presumably for promotional material in the future. While part of the brand, Anthony was in charge of deciding the main typography of the website as it was previously decided upon when planning and creating initial wireframes. We used Roboto as it is Google’s default font for their brand and Android which means it is designed to be legible at any size and on any screen which is perfect for our application.
UI guidelines: chosen colour scheme from the logo for use on the website.UI guidelines: chosen typography with example text, link to locate the font and recommended font sizes (taken from Apple’s Human Interface Guidelines).
Reflection
We were incredibly lucky to have clients that were clear on their goals for the project but were flexible with the design decisions we made. This allowed us to express extra creative freedom, additionally, it was a blessing to work with skilled developers that were able to bring our ideas to life in meaningful ways. In the end the clients were very pleased with everything we created for them. This project allowed us to work on a completely new and unique website that can hopefully be a valuable part of the university’s history and allowed us to diversify our portfolios with the inclusion of such an interesting project.
Client comments
The clients made it clear throughout the project how happy they were with our involvement and what we brought to the team. Having completed the project the team leader, our client, was happy to share these comments with us:
“Olivia and Anthony had excellent communication with the team during the project! They have an excellent understanding and analysis of the design requirements of the project. The presentation of ideas were clear and convincing and the progress was also appropriately paced. The design work was completed to a high quality.”
Final outcome
We were tasked with sharing the final UI designs with the data science club which essentially ended our personal involvement in the project but it has continued development and is currently not live. The new projected release of the platform is September 2021, which should allow it to remain an essential resource for COVID-19 information but sadly vastly overshoots their original release deadline of early 2021. It would be a pleasure to work with Dr Huizhi Liang and the data science club again in the future.
Baseline Shift is a series of design talks, events and workshops organised by a team of students for students at the department of Typography & Graphic Communication for the duration of the Autumn and Spring term. These talks happen on a weekly basis – every Wednesday, and are usually led by guest lecturers who are professionals in the subject. They aim at helping students expand and redefine their understanding of what a designer is, and what design can do.
I joined the team in the summer before the beginning of my third year at the department which made my job a bit challenging but also very engaging because of the ongoing pandemic. Since in-person teaching and events were limited to a minimum, the team had decided that all the talks for the upcoming year would be happening online.
These talks had already been happening for a few years now so the team and I were provided with guidelines which were written by past students who had been working on Baseline Shift.
Initial meetings
As a team we organised a few initial meetings between ourselves and the client – James Lloyd. These happened over the summer and we discussed how the new online events would commence in the upcoming year, what changes we might introduce to the guidelines and the talks, and how we would make them digital friendly, as well as discussing potential speakers we might invite.
Research
In the first stages of the job we had to do a lot of research on how we might introduce new alterations to the branding as well as strategies for promoting the events online and in the department so that students would be aware of the importance and benefits of the sessions and come to our talks. We also had to look up potential speakers and suggest four whose talks we believe would be meaningful and engaging for students in different years – from Part 1s up to MAs. Since Welcome week was beginning on the 21 September, we had to get everything done and signed off by James by the 18.
Working as a team, we managed to decide on speakers, rethink Baseline Shift’s branding, including poster design and screen graphics, talk about roles in the team during the year and set up all of the promotional materials in one single InDesign file for ease of use.
For speakers, I suggested four, but after a unanimous decision we only picked one of mine, which was the Bulgarian graphic and motion design Studio Four Plus who later went on to give a wonderful presentation.
For changes in the branding, I personally worked on creating animations for Baseline Shift’s Instagram story, animations for Baseline Shift’s Facebook posts and an animation to be played on the department screen. All of these you can see below.
Animation I created for Facebook posts.
Spring Term
After organising a plan of action, the team started splitting into roles. We had two main ones: Promotion – two team members responsible for the creating and posting of promotional materials, and Attendance and blog writing – two team members responsible for attending Baseline shift (run on Blackboard Collaborate this year) to run, gather from and document the sessions each term.
In the spring term I was grouped with another member of the team to do promotion, which meant I had to overlook the designs she created for every weekly event, make sure one of us posted promotional materials on Facebook and Slack (for MA students) on Monday and Instagram story on Tuesday, update the department screen graphics every Wednesday, take down and put away the old posters and print, cut and hang the posters for the new session on Wednesday.
I also voluntarily handled all speaker contact in the duration of my time on the team which gave me the opportunity to make some lasting contacts within the design industry as well as improve my communication skills.
Winter Break
After a successful spring term, the team decided to meet up during winter break to talk about changes in the roles for next term as well as some updates on some of the branding material. We were looking for a new message for the department screen stating that Baseline Shift sessions would be back soon to be played during the break. I worked to create a new message which you can see attached below, however we decided that there was no need for such a message since there was no one in the department during that time.
Message I created for the department screen.
Second Term
For the second term, the whole team switched roles so that everyone could experience every part of the job, which I believe was smart. That meant it was me and my partner’s turn to attend the sessions and write blog posts afterwards. We decided that at first I would be leading the sessions and taking notes while she would also be taking notes but write the blog posts afterwards which I then overlooked.
I really liked this role since it challenged my fear of speaking in public, however having all talks online over Blackboard Collaborate made it a bit easier. Also, my camera did not need to be switched on which was great! I even got a few emails back from our guests saying that I had done ‘excellent chaperoning’.
For some of the sessions me and my partner switched our attendance roles and she was the one leading the session while I had to write the blog posts. To be honest, this role was a bit more challenging but I’ve always had a problem with writing which I also managed to challenge working on this job and even slightly overcome.
Reflection
I really enjoyed being part of the Baseline Shift team and am even sorry that I was this late in joining and was only able to do it for one year. I believe this is a job that allows students to develop a range of skills from design and professional communication to public speaking and writing. I would recommend this job to anyone even slightly interested in developing their professional skills in all of these and other directions as well as to people looking to expand their contacts in the design world.
London AV Solutions is a family run business who provide smart home solutions using cutting-edge technology to simplify and enhance the lives of their clients. The services they provide include home cinema design and installation, smart home security system, hi-fi system installation and interior lighting control solutions.
The client has two offices, one based in London and the other in Surrey. For this project we worked with the Surrey branch to create visuals to display on their office walls.
Our supervisor for this project, Rachel Warner, had worked with the client previously so was invaluable in the process.For more information about London AV Solutions visit their websitehttps://www.londonavsolutions.co.uk/
The brief
The client approached the typography department looking for a pair of designers to create them some large scale wall graphics to display within their Surrey offices. This was a valuable opportunity for us to work with a professional client outside of the university and to gain more experience when working in large scale print.
This project called for two different deliverables, firstly a collection of motivational posters to be displayed within the offices upstairs to inspire employees during the working day and secondly a set of four large scale boards to installed in the downstairs meeting room, these boards should showcase their previous work and their brand to new and existing clients they convene with here.
In our initial meeting the client provided us with a printout of their initial ideas for each of the four boards as well as the copy they would like included on the morale posters upstairs. We used these as our guide when we later began sketching out design ideas. They initially asked us to use the same burgundy and teal colour scheme that they had in their downstairs meeting room but this changed to black and gold later in the project.
The process of getting the restated brief signed off was more troublesome, as a professional working client we found that they were incredibly busy and wanted to see results as soon as possible. Because of this they were reluctant to take the time to go through the brief, we discussed this in real jobs meetings where James stressed the importance of the brief being officially signed off before starting design work, we went back to the client with this and they did eventually sign off on it.
Research
Competitors
When google searching “london av solutions” our client is not the top result even though that is their company name, the results that appear before them would therefore be some of their highest competitors. These included TenAV, ITSL group, Mechdyne and AV Contacts, all of these companies provide very similar smart technology services. TenAV, who are also based in Surrey and have been running for 16 years, throughout their website they really emphasise the point of putting the clients’ goals and needs first so we should try and include this ourselves. However, TenAV caters more to businesses but others such as AV Contacts are much more direct competitors as they also work on personal homes.
Users
The users for the posters upstairs are the AV Solutions staff, their goal is to get work done, the posters are there to inspire them and make the room more colourful and pleasant to be in. The posters will also remind them of the company’s core beliefs and motivations which should in turn make them feel motivated to work there.
The users for the boards downstairs audience are the customers. One user could be a brand new customer who has never used London AV Solutions before. Their goal will be to learn more about the company to see if they are worth hiring. Some of our boards will be used to advertise the company, showcase their core values and the type of technologies they can provide.
A third user could be a different customer who has already used London AV solutions. Their motivation could be to add more technological solutions to their house. They would therefore have a need to find out more about the different types of technologies that London AV provides, our boards will feature these as well as photography of particularly successful projects that showcase the clients best work and act as inspiration for their customers.
Design Inspiration
The project was temporarily put on hold because the client found themselves overloaded with other work. During this time I looked for inspiration and ideas from existing office murals and other motivational posters.
Professional corporate design:
use of diagonal, coloured panels
professional, clear, high quality photography
blue and white tones
clean design
Company values in office space:
large scale, oversized
not framed, filling as much space as possible
typographic
very bold, easily read from anywhere in office
Office space wall art:
framed options, smaller
main motivational word with extra description underneath
no imagery in frames, purely typographic
illustrations used in yellow example, much more creative, probably less suitable for high end, corporate client
Designing
Morale Posters
Sketching
I began the design process by creating some basic sketches to explore different layouts and concepts that could be used for the morale posters in the office upstairs. I decided that the main message for each poster e.g. ‘work together’ should be large scale and in full caps so that it could be read by everyone, even the employee with the furthest desk from the wall. The posters could also feature some decorative elements such as a swirly border or a cityscape to make them more visually appealing as wall art. The cityscape concept was also inspired by the company’s logo.
Design progress
Moving on to the digital design process we felt that the posters may be more effective in colour, this way they would help create a more positive and cheerful atmosphere in the work room. I also created the cityscape concept but in monochrome to give the client more choice.
Both our supervisor and the client liked the artistic circles used in the second design concept so we developed these further, leaning more into the positive colourful approach.
Part way through this real job a new project manager at London AV Solutions was brought in and had changes they wanted to make to the brand, specifically their colour scheme. They wanted to change to a black and gold scheme for a more opulent, high-end feeling, so we adapted our designs to meet this.
We had also been working on the designs for the boards, for the client meeting room downstairs, at the same time and so changed the circles for the symbols we created to coincide with the first board.
Final morale poster designs
Boards for client meeting room
Sketching
We began our design process by creating some sketches of different layouts we could use for each of the boards, this allowed us to quickly explore alternative ideas and concepts to see how they would work with all of the elements together before digitalising them and adding more detail.
Design progress
I then moved our designs into InDesign and created multiple concepts for each board for the clients to choose from. I created some concepts based on the artistic circle designs that I created for the morale posters which the clients liked. I also created some alternatives featuring a zig-zag pattern similar to the corporate styles of design I used for inspiration.
Optional design concepts for board 1 (showcasing company morales):
Board 2 was undecided at this point
Design concepts for board 3 (includes a smart screen showing the different AV features the company provides): Board 4 (showing different remote control options):
As discussed previously, the project manager then changed and she requested that we change the colour scheme to black and gold. From the previous concepts we showed her favourites were the zig-zag designs, she also had some additional changes and finally brought us an idea for the second board. All of which can be seen in the next major design phase: She also requested that a graphic of a house be used instead of a photograph on the third board. The house graphic would act as a diagram to show where their various different products could be installed in a house. Anthony worked on creating a graphic for this but the client ultimately decided to provide one themselves.
We developed the designs further, using feedback from Rachel, our client and the real jobs team. James advised that the boards should have a design that flows seamlessly between them. I adapted the designs to accommodate for this so the zig-zag line connects them as one set.
Final grid
The grid did change as the design developed but the final grid where the zig-zag acted as a connector between the boards can be seen below. The grid was very useful as it allowed us to keep consistency in our placement of elements throughout the different designs for each border. This helped them look like a professional, cohesive set.
Final designs
Production
We spoke to DPS at the start of the project about the different printing options but when it actually came to getting the designs printed we discussed the options with Geoff and he said that the clients should use an external printer instead as it was such a unique large scale project and the offices were not in Reading. Although the client found the printers I still needed to send the artwork over to them myself, this taught me valuable lessons about communicating with an external printer and how to correctly export the board designs to be printed. I followed the blackboard checklist to prepare the final artwork and enlisted the help of James and Geoff to export the boards at the highest possible quality since at such a large scale a professional display piece could not afford to be pixelated.
Final products in use
“Thank you so much Olivia and Anthony for your lovely designs, it was a pleasure working with you both”
“We love how our new meeting room looks”
Reflection
Working on this real job was a truly valuable experience as it allowed us to work with a high-end, professional client outside of the university which will be a fantastic work experience to include on our CVs and to talk about in future job interviews. It taught us lessons about managing such a busy client and emphasised the importance of key non-design elements such as having the restated brief signed off and how to export files for large scale print. It also further improved our InDesign skills and use of grids as well as bettering our professional communication skills.
Overall I am delighted with how this project turned out and look forward to showing it to future employers. If I could change anything about the outcome I would have loved to have been able to see the final boards and posters once that had been installed in the offices but unfortunately this was difficult due to coronavirus restrictions.
Real Job: Amrita and Chia-yi created the site at https://greater-than-a-to-z.co.uk . Their report makes clear the value of learning how to communicate effectively with IT professionals in order to bring a design vision to life. Special thanks to @UniRdg_IT for supporting this project throughout.
