ID study association

web development

Updating an outdated website

ID is one of Delft’s largest study associations and has a innovative image—partly because of its connection to Industrial Design Engineering. Sadly, in 2016, the website did not really fit with this image, both visually and technically.

Visit svid.nl

A gray, dark blue and acid green website, in 2000s style.
Screenshot of the previous website.

A new website, connected with our new members’ administration

Because of this, Nils and I built a new website, with a front page focussed on upcoming events and our social media channels; the content most visitors (the ID Members) are interested in.

A scanned black-and-white sketch of a wireframe, with Dutch scribbled text.
Sketches for the education page.
A scanned black-and-white sketch of a wireframe, with Dutch scribbled text.
Sketches for the about page.
A grayscale wireframe.
The wireframe for the education page.
A screenshot of several slightly differing forms for submitting education feedback.
Visual design explorations for forms.
A screenshot of several slightly differing events.
Visual design explorations for events as shown on other pages.
A screenshot of three different ways to display social media postst from Instagram, Flickr and Vimeo, plus a link to Facebook.
Visual design explorations for the latest social media posts as shown on the front page.

We also integrated the members’ administration, so members can edit their contact information themselves, for example. Furthermore, integration with Facebook allows the board to easily publish events on the website, which have already been created on Facebook.

Lastly, since its launch, our successors have requested adjustments to the website. Most notably, we updated the website with the new branding of ID, which launched in 2018.


Designing, building and hosting

This was project relatively strange, because Nils and I were both the project owners and developers at once; we decided it needed to be done and made the planning, but also did the designing (research for the requirements with users, sketching and wireframing), building (a Wordpress theme from scratch, with API integrations, using Git—Emil Flach en Alexander Weiss helped us with some features) and hosting (configuring a VPS with a LEMP and Let’s Encrypt, with the code deployed from Travis CI).

All code is on GitHub.

‘Our committees’ page, showing four comittees.
The overview page of the committees ID has.
The top of the education page, showing a form for feedback.
The top of the education page.
The
The education page in its entirety, explaining three things: what will be done with the feedback, what has been done in the past and who is in the committee.
The login page of the website on mobile.
The website is of course fully responsive, so this login page works both on small screens...
The login page of the website on desktop.
...as well as large ones. ID also changed its branding sometime after the website was launched. We updated the fonts and logo, which fitted the website just as well.
The page for a single event, in this case Flight Case.
A single event page.

Contact

Oh, right. Yeah, yeah sure. So... talk to you later?

Yeah please do! :D

Communication

Following