A simple and clean responsive modern website targeting both web and mobile platform which showcase accomodation booking information and comprehensive guide books with a fully customized SilverStripe CMS for the client to have full control on the website.
#SilverStripe #Bootstrap #Sass #AWS #Gulp #PHP
Otautahi House is the student accommodation provided by Ara Institute of Canterbury and offers rooms for 72 students in modern attractive apartments. The new buildings were being built at the time to cater more than 200 students at the beginning of 2017. The Student Service Department in Ara were operating a few IT projects that would enable students to help themselves through the online resources. They wanted to build a standalone website for the Otautahi House so that more students would be attracted to apply for the expanded accommodation and students could be fully prepared before they moved into the room.
I created a resourceful and appealing website for the Otautahi House to promote Halls of Residence to new Ara students and provide useful information before they settle in. The website aims to meet the following two objectives:
- Promote Otautahi House students accommodation to potential students and guide users to the booking action so that the student services will have enough applicants to fill up the available rooms;
- Provide sufficient and useful information for the students to encourage self help which will lead to the reduction of workload for the support staff.
The target audiences for the Otautahi House website are 18 to 30 years old local and international students. The following personas were written to guide the design process and bring empathy towards the users.
There is a large number of content the client wanted to show in the website including booking information, rules and regulations, what to bring, etc. To properly arrange these information and categorize them into a sinple navigation bar, I wrote down each information on a post-it note and reordered them into different categories. Finally, I narrowed them down to five groups: booking, move-in, Christchurch information, Apartment related information and contact.
To make the content more appealing and intuitive for the users, I figured out that since the purpose of the website is to provide guidance and support for new tenants, it will be a great idea to package the content into different guidebooks. This approach made the content to have more personal touch.
One of the challenge I faced during the graphic design was to fit the website into the Ara brand which has various hues of blue and green. These colors have a strong corporate and business look which are not well suited to the our young audience.
To fit the Otautahi House into the Ara brand, I chose a green color from the color palette that looks vivid and dynamic. The website will still look like part of Ara while not being too serious. The orange color was used for the buttons and underlines to make the important elements stand out.
The logo design of the website followed the same principle. It focused on the Otautahi House brand and the dynamic spirit while keeping in line with the Ara logo. The "Institute of Canterbury" and Maori wording were stripped away to bring simplicity and shift more focus on the "Otautahi House". The use of white color on green background further differenciate the logo from the Ara one.
The most complicated page while designing the layout was the booking page. It was the place for future students to get access to details of the apartments, price and fees as well as application process. To highlight the most important information, room options were shown on the top with price, facilities and slider. The application process was reorganized into 3 steps. The content for each step was listed in the form of Q&A to reduce the pressure of reading long paragraphs. In the end, all the booking information was clearly organized and structured.
Based on the client's requirements, I built up a fully customized Silverstripe CMS from scratch which allows administrator to have full control of the website content. Various components such as booking options, home page feature, and guide page tabs can be created with unlimited number. The customized admin portal give client the control to add/remove/edit website content easily at any time.
Usability testing was implemented to validate the effectiveness of the UX design. I invited 20 respondents aged between 18 and 30 which are the target audience group of the Otautahi House website. About 60% of the testers are male and 40% of them are females. They had to complete 9 tasks which include navigation test, click test and survey by using the online usability testing tool. The testing result showed that most of the participants were happy about the Otautahi House website. Several UX design ideas were proved to be effective and would lead the users to the correct path.
