# Old Arupians Community Website (2019)
URL: https://www.associativetrails.com/work/oldarupians/
Client: Old Arupians
Type: Community website
Summary: Freshening community fellowship — A thorough refresh of one of our most venerable and successful projects. Now fully responsive and even easier to use.

This vibrant community of retirees continues to use the website as the focal point of their social relationships with ex-colleagues. They also enjoy keeping tabs on their successors' attempts to continue their legacy.

## The challenge

Our original community website for the Old Arupians (https://www.associativetrails.com/work/oldarupians) had done fine work for 12 years, but the time was right for an update.

In consultation with the client, we decided to retain much of the functionality of the original system. They also wanted to ensure that their investment in a new website would ensure it was low-cost to host and easy to maintain in the future.

Interface-wise, a complete rewrite of the front-end to improve the visual design and make it responsive would ensure it was usable across a broad range of devices.

## The solution

An extended HTML prototyping process before the main development began allowed Old Arupians administrators a large amount of input into the visual and information design of key pages - something that then informed the rest of the system.

The client has a skilled team of administrators who were happy with the way the previous site worked - our focus was to present the existing information and workflows in a better way. We used the Bootstrap framework and a modular front-end coding approach to build a rich interface that is responsive across all screen sizes. Some functional enhancements (e.g. automatic thumbnailing of PDF newsletters, profile image cropping) allowed us to add additional layers of gloss to the new interface.

The new system retains all of the rich functionality of the previous one, with some handy additions:

- A sophisticated rich text editor to write page body text.
- Granular administration privileges meaning author access can be restricted to certain sections of the system
- Image cropping and optimisation
- Automatic thumbnailing of PDF uploads for gallery-style display
- Gamification of profile completion - encouraging members to fill out their profiles more fully
- Granular privacy of member profiles - users choose exactly what personal information is shared on the site
- Event and RSVP management with bulk emailing
- User subscriptions to new content email alerts
- Weekly digest emails keeping members abreast of new content

## The outcome

The hard work rewriting the entire system in open-source technologies was rewarded when the website went live. Hosting costs have dramatically reduced, and the range of hosting providers is much greater and more competitive. The site is currently hosted on Amazon Elastic Beanstalk, making it easily scalable and deployable with a single terminal command.

The new design has gone down well with users:

- "I think this is a splendid piece of work... It's clean, intuitive and a fantastic resource for us elderly types. Bravo."
- "New website is user friendly and offers great features."
- "Congratulations to all for their hard work, it is much appreciated, much easier to navigate around."

Technologies used

Python, Django, PostgreSQL, Bootstrap, HTML, CSS, Javascript, Amazon Elastic Beanstalk, Jekyll (HTML prototype).

## Screens
- Home page: The homepage gathers the latest news, people, Arup films and publications, with upcoming events and their RSVP counts, under a rotating banner.
- Latest news: Members can browse and search past news posts, each carrying a comment count for community discussion.
- RSVP management: Event organisers can search, edit, email or export the whole RSVP list as part of bulk event management.
- Event page with RSVP list and member comments: Members can see an event's details and invitation, who can and cannot attend, and the comments other members have left.
- Committee members: The page sets out who administers the site and what each committee member is responsible for.
- Publications with automated thumbnailing: Thumbnails are generated automatically from uploaded PDF newsletters, so publications display as a browsable gallery.
- Member profile: A completion indicator encourages members to fill in more of their own profile information.
- Stock photo gallery: Photos can be uploaded and then edited or deleted individually from this shared image library.