(Almost) Real Job: We encourage our students to let us know when they are entering their work for awards, as the experience can count towards credit on their degree course.

Read more

Background

David Woodward, the head of the Dunsden village hall charity needed a website redesign. The goal was to drive traffic and promote the many services and amenities the village hall has to offer. The charity survives on donations as well as the halls profits, however, increasing the halls profits is a primary objective of this project. Whilst functional and rigorously built, the current website lacks many features that could really benefit the halls success, and the overall design style does not compliment the newly refurbished, yet wonderfully historic building (fig. 1, 2). As no one had taken this project for some time, David did not prescribe a completion date. The brief is very thoroughly laid out in terms of what features are desired, however, the nature of this project gives me the opportunity to do some critical background and user research to establish how the website can best achieve its goals. My supervisor for this project was James Lloyd.

Research

Dunsden & Eye

Dunsden and Eye are both villages north-east of Reading. They are part of a collective of satellite villages, each with rich historic backgrounds. On my walk there for the first client meeting I found walking through Sonning Eye and Dunsden to be calming. It’s a quiet, well connected community. David even informed me that many prominent figures own real estate there such as George Clooney, no doubt for its serenity. Eye and Dunsden specifically is a parish with an estimated 500 people residing there, meaning this project will be geared towards a very close-knit community with an emphasis on repeat custom. Wilfred Owen is a local poet who was born and raised there. Before being lost in the first world war he wrote many poems in Dunsden and often about the surrounding places and events. The surrounding area has adopted this heritage, amenities such as the Wilfred Owen trail have been founded in his honour. This is one of the many cultural influences of the hall itself.

 

The village hall

The hall began as a school,  however over the years the property became disused until it eventually converted into a town hall (fig. 3). It now uses its two main halls, large outdoor space, and kitchens to provide community services. These services include regular activities such as Pilates and yoga as well as renting out hall space for events. From my early understanding the majority of the hall’s profits come from weddings, which typically rent the entire space for full and sometimes multiple days. That being said the income from renting to regular classes and activities is also critical to the charities cashflow. A final aspect of income is a two-story rental property attached to the main building itself. After a £400,000 refurbishment paid for by the charity as well as council funding, the hall has the opportunity to maximize its profits, all it needs is a modern website to promote the profitable areas of the hall. The hall itself is available to anyone, however, its primary catchment is the surrounding villages of Dunsden, Eye and Play Hatch. Nearby villages (and their town halls) have similar websites which leant itself massively to the research phase of this project. A bust of Wilfred Owen features in the main foyer, he has become very much a symbol of Dunsden and of the hall itself. The brief specification also includes a trail information page about a hike in tribute to the poet. I felt fortunate to be able to engage with a full UX task with such a rich cultural and historic background.

 

User research

The original brief gave a very clear outline for the website’s functions as a direct result of the needs of its existing users. This left the opportunity to explore the user groups and design the website in such a way that it increases the halls popularity rather than just providing for the users it already has. The first user group was defined as locals looking to engage with activities. The second was opportunistic renters looking to rent the hall for events such as weddings, birthdays, and regular activities. The third was those looking to rent the apartment on site. The final was charity members looking to access important documents regarding the hall. Secondary, less frequent users include those looking to fund raise for the hall and those who have found the hall because of the Wilfred Owen trail. These groups were used to outline the main user needs and mapped onto a plan of the website (fig. 4). This exemplifies the journeys these users would need to take to achieve their goal. James praised this method and agreed that it would be beneficial to giving the client confidence and clarity. Trying to combine the client specification with extra user research proved to be challenging, however, the user journeys helped incorporate both my own research and that provided by the client.

 

Market research

Many local villages and towns have professional websites, the client sent some to me as a form of early inspiration. Many of these websites were, however, limited to simple functionality such as blogs and galleries. The most useful market research was found in museum websites, many museums offer activities and rental space like the hall, and many of their design directions are promotional and drive admittance. Reading Museum was one such example as it organizes complex information and updates the home page frequently to promote repeat custom (fig. 6). Another valuable example was the St. Albans museum website (fig. 7), which uses a very controlled appropriate brand as well as organizes complex information using elegant panels and white space. All of the examples looked at used forms such as email inputs to encourage user engagement.

 

Restated Brief

The research phase very much fed into the restated brief. Whilst the thoroughness and professionalism of the client brief eased this process, the restated brief altered the specification in such a way that more features and interactions would be present per page. The background and descriptive text were kept mostly consistent as it summarized the history and needs of the website very well. I worked closely with David to ensure the brief met all the requirements of the website. James also offered some valuable feedback, including consolidating the idea that doing my own set of user research was valuable to this project. The client brief was intimidating to say the least, there were many aspects within it, such as calandar intergration, that I had never encountered before. The task of reworking it in conjunction with the client really benefitted my understanding and my confidence in tackling this project, and it made the intimidating sections feel sigificantly more manageable.

 

Deliverables

The primary deliverable of this project is a website. The client also wanted some signage to be designed to label rooms inside the hall as well as floorplans of both the hall and the apartment. These plans would need to be designed graphically to be useful to prospective renters/hirers.

Home page

• Live Instagram, Facebook and Twitter feeds.
• News updates
• Must be interesting for returning users.

 

• Events page
• Access to the events calendar.
• Contact details for event organisers.
• Contact details for hall staff.
• Directions/map to the hall.
• Photographs of the hall space.

 

Hiring page

• Potentially a separate page for weddings.
• Photographs of the hall space.
• Floor plan of the hall space.
• Access to the events calendar.
• Hall booking form.

 

Donor page

• Access to fund raising documents.
• Updates on how donator money is being invested.
• Access to the donation system.

 

Admin/committee page

• Private entry form.
• Access to the events calendar
• Access to paperwork/documentation.

 

Wilfred Owen trail information

• Links to Dunsden Owen association.
• Photographs and details of the statue.
• Notes on hall access.

 

Designing

Wireframing

The Wireframing phase was made easy by the thoroughness of my user research. This task was massively enjoyable as it simply took the website plan and adjusted it screen by screen to ensure every feature was included in the most user-friendly way. My initial rapid wireframes were used to brainstorm layouts for each page. After selecting the strongest options, a digital wireframe was made for each page in Adobe XD. The reason for this was to make the wireframes interactive so it can be used as a test prototype at the next client meeting (fig. 7, 8, 9, 10).

Prototype Link

 

Test prototype

Due to the Covid-19 lockdown, this meeting was held over Skype and I finally had the chance to meet the rest of the team. It was exciting to listen to- and engage with the inter-politics of the charity, it was clear that all the members were passionate about their roles and the hall itself. Skype lent itself nicely to demonstrating the interactive prototype, however, I would have loved for the clients to test it themselves in person. The feedback was mostly good, they whole team was impressed by the quality of the prototype and from the feedback I knew the project was moving in a direction the clients were happy with. One of the main client sentiments was that the way the website was designed, it would need high quality photography, however, the clients discussed arranging a professional photographer to do so in the coming months. After over an hour of exploring the test prototype and recording feedback from each of the members, I left to adjust the prototype, ready to begin moving into WordPress for the final design.

 

Client meetings

As mentioned, there were existing politics within the charity of the hall that affected the course of the project. It was by and large great to see how engaged the members were with their roles, however, there were some disagreements that arose. David and I both agreed that google would be the best option for an integrated calendar as it meshed nicely with WordPress and is simple to use. The member who managed the calendar was unsure about this option due to potential security risks and despite frequent discussions, no conclusion has yet been met.

The initial meeting was in person. It was fascinating to walk through the surrounding area as much as it was to meet David at his home for tea. Shortly thereafter we travelled to the hall and I was able to take photographs and investigate the hall. Being there in person put the magnitude of the project into perspective, this would be a complicated website for a real charity, and I knew then that the project would need extensive research and development to be done right. David contacted me later thanking me for my professionalism and offered me some helpful advice for getting started with WordPress.

The next client meeting was the one held over skype. Whilst it was critical to moving the project forward, I would have preferred another in person meeting. As this project progresses and the lockdown comes to an end, I will travel back to meet the charity members in person and hopefully even engage in some of their regular activities to learn more about the hall and more importantly the community.

 

Still to come

There are still many aspects of this project I am looking forward to exploring. The floorplans need to be created and rendered in a graphically useful way which will tap into my knowledge of branding and information design. The graphical style of the website has yet to be established as well. Whilst there is already a brand to base this off, the current brand is limited to a logo, colours and a typeface which grants me immense freedom to explore usability and accessibility. Currently I am experimenting with WordPress to establish this graphical style. Not only this but I have only just began learning WordPress as an application and it has become clear how vast and powerful this website building tool is. I hope to complete the project by the end of June and the client has been supportive with extending the deadline, given the covid-19 lockdown.

 

Outcomes

Whilst this project has yet to be completed, there were already many valuable outcomes. I learnt the importance of communicating my progress as well as any delays, keeping the client informed has allowed the project continue despite unavoidable circumstances. It has additionally kept the clients confident that the project will continue. I also learnt that research provided by the client is valuable but should never mitigate doing my own research. Finally, I learnt the importance of getting to know your client beyond the reaches of the project. Understanding the politics of the hall and the relationships between the members would have sped the design process up by ensuring each member had the opportunity to communicate their needs and concerns

 

Reflection

Working with clients on such a personal level was a new experience. Previously I had engaged in mostly corporate environments and working with a charity has been immensely rewarding. Conveniently, the client has knowledge of the design process as well as website building so being able to collaborate on this has been a fantastic learning experience as well. I have learnt to explain my rationale in a variety of ways that adheres to all levels of technological capabilities and my confidence pitching design work to non-designers has grown.

Unfortunately, the Covid-19 situation has affected all parties differently and has left the project delayed beyond the agreed time plan. Other deadlines have been affected and time management and prioritisation has been critical to ensuring the project will be completed to the highest standard. Thankfully, the client is fully understanding, and we have maintained contact throughout the lockdown to ensure progress continues where possible.

Overall, the project has been a valuable learning experience in growing my confidence as a designer and as a person. I have never felt more engaged in a real job and look forward to completing this project over the coming month.

 

This is a progress update report for a project being completed for University of Reading’s SportsPark, which is still ongoing at the time of writing. Though the original intention was to submit this project complete at the end of my degree, the interruption to the academic year and closure of public resources (caused by COVID-19) have impacted the concluding stages of the project. As the project is not yet fully complete, this report not only reflects on the progress up to this point, but also highlights the future intentions for the ultimate conclusion of this project.

 

 

Initial Steps

After being allocated the job, arranging to meet with the client in person was a top priority. I needed to introduce myself to the client, as well as gain an understanding of who I would be designing for. With a number of parties involved in the production of the publication on the client side (including a researcher, writer and project supervisor), I requested that we had an initial meeting with all parties present. This would allow us all to build a foundational understanding of what each person would be responsible for and ensure everyone was on the same page. It also provided the possibility to share opinions and thoroughly talk through initial ideas through verbal conversation that emailing back and forth would have complicated.

 

The Restated Brief

Restating the brief before diving into designing is good professional practice and is a key aspect of the design process when completing any project. By restating the brief, the designer can establish exactly what is required and expected from them, both from a design aspect as well as in a professional capacity. It is key for showing the client – and yourself – that you have understood what they are after; and if not understood, it means any misinterpretation is addressed before designing starts. It also provides the client and designer alike with a point of reference throughout the design process, keeping the project focused and on track with a mutual agreement stating how the job will ideally progress. With an initial face-to-face meeting with my client lasting over an hour and then follow up emails providing additional information to questions raised but not able to be answered at the time, creating an accurate and comprehensive restated brief was made easier.

The brief was to produce a commemorative short run booklet along the same lines as the 80 Years: University of Reading booklet, approximately 40–48 pages in length, about the history of sport at the University of Reading between 1892–2018. Commissioned by UoR SportsPark and overlooked by the Director of Sport, the booklet would be written by a retired professor of English at UoR based on the research conducted by a retired UoR Historian. The goal is to hand out the booklet to anyone who attends the launch of the new active campus strategy during the second induction to the sporting hall of fame in the summer of 2020; at which there will also be three celebrity ex-athletes in attendance. It must communicate the University of Reading’s rich sporting history with incredible sporting success and will help encourage and promote the improvement of health of the young, as well as academics, through sport.

Although outlining the required deliverable was made relatively straight-forward due to the initial in-depth consultation, one of the more challenging aspects of restating the brief was creating a prospective schedule of deadlines. The project had an open and distant deadline, one much longer than I have been restricted to in the past. This made it hard to know exactly how long I should be giving for each stage of the design process. I learned that starting by outlining what would be required on the completion of the project and then working backwards from the final deadline was a useful way to tackle this challenge of a long deadline. This process not only made me have to consider my own time and project management skills, but it also pushed my leadership qualities as it would be my scheduled timeline that the client would work to when holding up their end of the project.

 

 

Design Process

It was my challenge to create a traditional and classy design with a modern twist. The historic and academic aspects lend themselves to a traditional style of book design, however, the sport aspect gave the opportunity for exploring an experimental, modern and dynamic piece of editorial design. The design process can be slit up into 5 key sections: Research, Document Setup, Copy, Imagery and Cover Design.

 

Research

Upon meeting the client, it was made apparent that most of the thorough research regarding the content of the booklet had already been completed. However, the writing of the prose had not yet been finalised, with refinements and fact checking still being completed. Although not provided with the text in the early stages, I was provided with copies of some of the raw research files to get started. While I was awaiting the writing of the final copy, I took it upon myself to do a bit of background reading of the research notes and started to think about the potential feel of the booklet, as well as source some of the easier to find images referenced in her findings. Through doing my own research using resources such as the Reading University Boat Club website, I in fact raised the issue of some discrepancies in a couple of areas of research, identifying where dates had been miswritten and some facts were mistakenly repeated for multiple dates. This meant the mistakes could be addressed before designing occurred, elevating a potentially larger knock on affect. This taught me that being proactive in the early stages of the project, even in a time where there is seemingly little to do, in fact is useful to the progression of the project later down the line.

When thinking about the possible design of the booklet, I was informed that there were no University branding guidelines to be adhered to. Having said this, the client was very keen for the booklet to take inspiration from the 80 Years: University of Reading booklet. It was indicated that the client was after a similar composition; utilising a comparable timeline system as well as the manipulation of images, captions and pull quotes. This gave me a great starting place in researching potential formatting through an existing publication. I first read through the booklet leisurely to get a feel for the style, before then looking back over the design with a critical eye and trying to identify the underlying grid system and paragraph styles.

 

Document Setup

The client specified in the briefing that they would like the design of the booklet to resemble that of the 80 Years: University of Reading booklet. This was helpful for me as it not only gave me a clear structure and template to follow, but it also meant I had the possibility to start setting up the document before I was supplied with content. In preparation for the copy, I set up the file to the fullest extent I could including: page size, margins, the grid, a few paragraph styles and furniture. I also thought about the rough composition of how text and image elements interact. Having this prepared in advance of receiving the copy was hugely beneficial, as it meant I could simply feed the copy in as and when it was provided.

Copy

Allocated this job in June 2019, at the end of my second year of studies, my hope was to get a first draft of copy set before going back to study for my final year. Knowing I would be hit with a lot of university work from October onwards, it was my aim to spend my 4-month summer break working on the booklet to get as much done before returning to study, however, this was not to be. Unfortunately, I was informed that the copy was still being written and initial draft copy would not be available until October 2019. While this still gave a fair amount of time before I would have to ultimately submit in the spring of 2020, dedicating time to designing the booklet would now have to be fitted in around five other projects and dissertation writing. While this disrupted my initial plans, it encouraged me to develop my time management skills by allocating a set time every week to work on this job.

Once I got the copy, there was a lot of ‘cleaning’ required with an abundance of random tabs, double spaces and incorrect use of punctuation such as en dashes – sifted out by using the ‘Find and Replace’ feature. This kept me busy for a while as I tried to get each element of the text ready for flowing into the .indd template I created. My primary focus was ensuring the type was set perfectly with paragraph styles, before worrying about addressing the flow at a later date. I also knew the copy was subject to change through revisions, so did not want to spend long adjusting the flow only for it to be changed. When the copy was revised by the client, the full word document was sent me, instead of just indicating the changes. To help identify what the changes were, I utilised Microsoft Word’s compare documents feature which clearly highlighted differences between the two documents. This meant that I could manually enter the small changes directly into the .indd file, instead of having to repeat the process of cleaning and formatting everything from scratch again. This was a new technique that I learned on this job and it helped to drastically improve my work rate.

Only when I received acknowledgement from the client (after multiple copy revisions) that all the copy was final, other than possible minor spelling or grammar fixes, I began to address the flow of text across each spread. After setting the text as desired I showed the progress to my supervisor who said “It’s coming along nicely, but refinements are still possible” regarding the typographic detailing. I then went through the copy with a fine-toothed comb to pick out all the fine typographic details originally missed as well as improve the overall aesthetic of the text blocks. This included instances of tweaking hyphenation and justification for certain occasions, manually inserting thin spaces where required and inserting forced line breaks to make a text blocks visually flow better. This process helped to improve and develop my understanding and application of good typographic practise.

 

Imagery

Although the primary research was complete, it was my job to trace the images referenced as well as source my own images where required. Sourcing imagery was one of the most challenging tasks of the whole project. While some relevant images were referenced in the research files, many of the images were originally published in newspapers and were too poor quality to scan and reproduce. Although I sourced some images at the beginning, I would not know exactly which images would be useful until I set the copy and identify how it ran in the booklet. Because of this, I decided to wait to source further specific images until I had the copy set. While it was important to source as many images as possible before beginning designing, the research phase of collecting content was an ongoing constant in this project, sourcing images as and when they were required.

With the copy set, I could begin adding in some of the images already collected where relevant. This left me with a clear indication as to what images would still need to be sourced for which pages. To help source some of my own images not referenced, I was introduced and given access to the UoR asset bank, an image catalogue new to me. This resource proved vital for sourcing and downloading high resolution and loyalty free University of Reading images. I also used other image banks such as the Reading Museum’s archives as well as university associated websites such as the RUBC website. This process of trawling through archives to find, often obscure and low profile, images of historic events dating back to the early 20th Century significantly improved my knowledge of image sourcing. As well as this, a lot of the images needed correcting to become clearer and to appear visually consistent throughout the booklet. An example of a before and after is shown below.

While sourcing images was going well, I decided I would pause my search to focus on completing other university projects. My intention was to return to finalising imagery by sourcing books referenced from the collections at London Road once I had some free time after submitting my other projects. However, the three months I put aside for this have been scuppered by the current circumstances of COVID-19. I have been left unable to access all the initial research files and my personal notes on the project left at my university address before the ‘lockdown’ but still tried my best to source the images. Due to the closure of public resources including libraries, it was not possible to access a book in the collections, from which a number of the images were referenced. I did not let this hold me back though and strived to see what I could do to acquire the resource. I found what I thought was the referenced book online and ordered it for delivery to my home address. Unfortunately, it would appear that it was in fact a different publication with the same title and did not contain the required images – although by chance, one image which was useful. At a time in which I was unable to access physical collections, I had to return to the internet as a key resource for sourcing images. However, this was not without its frustrations too, with access to the key resource of the asset bank unavailable due to maintenance for the past two months. In order to get the book closer to being finished, for the purpose of submitting as complete project as possible for my degree, I had to unfortunately use some sub-par images. Some images are currently placeholders until I can regain access to a better solution. This has left the imagery in the booklet in a position of looking complete in terms of no missing/blank pages, but it is my full intention to replace these when times return to normal.

In hindsight, I could potentially have alleviated the issue of having to source replacement images had I made a conscious effort to source more of the images earlier. However, I do not believe I could in any way have accounted for three-month disruption caused to the time I set aside for this project at the back end of my studies. The most notable point from this is that, even if you plan your time well, unforeseen circumstances can still occur. Instead of giving up, it is important to show commitment to the task at hand and continue to find different possibilities to resolve issues and strive to complete the work to the best of your ability.

 

Cover Design

While the cover of any publication is important, in this instance, there was slightly less pressure for the cover to sell the publication as it would be given out at the event. Having said this, creating an intriguing and striking cover would set the mood for the rest of the publication. The current cover design is a nod to the Sports Hall of Fame housed in the Sports Pavilion on University of Reading’s main Whiteknights campus. This ties the cover visually to the event at which it will be distributed while still being slightly ambiguous to intrigue the audience. The current cover is shown here but is possibly subject to change further down the line.

 

 

Production

Due to the present circumstances, I am currently unable to send the booklet to print, not only due to additional image sourcing still required, but also the fact that printers are currently not operating. I did however still learn new production skills as I had to complete a print specification in order to receive an estimate for the job. Although production is often seen as the final stage after the design is signed off, this process taught me that it is integral to the whole process. Acknowledging aspects of the production such as physical format, stock materiality, printing processes, binding methods, print run and costs is vital to influencing design decisions.

Unable to print and photograph the completed publication, I have created a series of mockups to showcase the prospective final deliverable in a manner which resembles its ultimate intended format.

 

Reflection

Client Communication

It was vital to establish how best to stay in contact with the client right at the start of the project. It was agreed that emailing regularly would be the best way to keep up to date with progress reports and for the client to provide me with content. We also arranged to conduct meetings in person at various landmarks in the process. While it was possible to send over basic queries and reports, the most useful conversations happened in person. It was possible to send over PDF files to provide context to a question, but assessment of the final feel of the book could not be asses like this. For this, we had multiple physical meeting in which I delivered draft spreads trimmed to the eventual size for us to be able to evaluate together. This meeting in person helped to forge a strong client–designer relationship and was a good way to assure the client that the project was under control.

With an open deadline, it is very easy to have the mind set to put the project aside, forget about it and worry about it at a later date. To ensure this did not happen, I made sure that I stayed in regular contact with my client informing them of my progress. While progress was slow at times, I made sure to email my client to let them know where I was with the project to keep them in the loop. I believe I stayed in contact well with the client throughout the long process by communicating clearly, effectively and professionally on a regular enough basis.

 

Overall Success

As of writing this report, there are still further details that I need to continue to address, however, I believe the current submission is a comprehensive representation of the final intended outcome. In evaluating the outcome, I believe I have created a polished booklet which, with a few minor alterations, will be exactly what the client requested. This project strongly helped me to continue to develop my advanced editorial skills with a number of typographic and pictorial variables and challenges tackled.

Although not currently finished, I believe I can be proud of how I have worked throughout the process up to this point. I have thoroughly enjoyed the pleasure of being able to work on a project with a topic which I have a genuine interest in and feel a personal connection to having competed in sport during my time at University of Reading. While this project has been submitted in an incomplete state for the purpose of my degree, I fully intend to continue to improve this project to deliver the client with exactly what they are after. I am motivated to not only prove to myself that I can do an improved job, but also to deliver the client with the perfect publication that they deserve.

I learned a lot from this project, not least that working to a distant deadline can in fact be just as difficult – if not more – than a short one! This job has tested my commitment levels and I believe I have passionately shown my pledge to providing my client with what they want, no matter the circumstances.