I am working as a web designer and developer for the Applied Research and Innovation department at Humber College. I and Rocio Penaloza, who is a student in Multimedia Design and Development program, work together as a team and we are in charge of designing the department's website newly and developing it from October 2016 to April 2017.
First step to begin the project was having a meeting with Amanda Brown, Research Partnership Development Manager, and Michelle Bozzetto, Research Assistant in charge of Media Communications in order to listen their expectations for the new website. During the meeting, Amanda and Michelle explained problems of current website such as outdated design, functionality flaws, difficulties of using current Content Management System, etc. Also, they suggested general guidelines for their new website such as main colour of ARI department, core content and new functions wishing to have.
After having the meeting, Rocio and I started to reorganize all content of the current website by removing old and unusable content, moving some content under right sections and adding new features. Once organizing content finished, we began drawing rough sketches.
The biggest challenge that we faced when drawing sketches was to find the best way to display the content as ARI department has massive content and they are all important. We ended up giving priority to the content by thinking what users expect to see first or what their purposes are to come to each menu. During this process, we did a lot of research and checked examples to figure out the right solution.
After we finalized the sketches, we made low-fidelity mockup and style guide. This process helped visualizing the sketches and preparing the next process, high-fidelity mockup. With completed lofi-mockup and style guide, we started to colour the mockup and added all the content like images, icons, text, etc.
In order to check the design working well, we created a prototyping with InVision for user testing. Testing the user experience before starting to develop is most important part of checking design. As we could see what parts users are having difficulties, we can find some design problems in advance and fixed them before developing. Click here to test our prototyping.
My team decided to use Wordpress as Content Management System and PHP, HTML, SCSS and jQuery to build the new ARI website. Thus, all content in the website will be able to access from backend of the CMS so that ARI staff can make changes like adding, editing and deleting content, creating a new page or reorganizing structure of the sections by themselves. We have done setting up development environment such as being able to work on the project locally, installing Wordpress and sharing codes on Githup. We created our own custom theme in Wordpress and are working on structuring backend of CMS by using Advanced Custom Fields.