Fine-tuning a school's website

Screen Shot 2017-11-01 at 22.12.11.png
 
 

Background

Based on a recent usability testing and guidlines by GovTech, the school’s website was falling short of meeting the site visitors’ expectations. Some of the most pressing problems identified were:

 

  1. Non-responsive design. 

  2. Old design

  3. Navigational system lacks bread crumbs (users get lost while navigating) Main navigation tab doesn't give users the ability to see the subpages easily

  4. Absence of the search function across pages

 

Users behaviour:

Based on a short guerrilla interview with 12 parents who were around the school premises while they wait for their children to finish school, I sum up their common behaviours.

- They look for the information they need and then exit the site after that.

- They already know what they want to look for before visiting the site.

- They hardly linger around on the site after finding what they need

- They rely mostly on their mobile phones. In fact, all 12 interviewees use their mobile phones for that purposes.

-  8 out of 12 of them browse the homepage for latest happenings and calendar events.

- Average time spent on site is about 3 to 5 minutes.

 

Persona:

persona_parent.001.png

 

 

Analytics:

Analytics also helped confirm the time spent by the users as well. Out of the 102 sessions, the average time spent per session is about 3min 54s.

Based on analytics of the website, I was also able to breakdown the pages with the highest traffic on the site:

-Home Page

-About Us/Our Staff

-Contact Us

-Information

-Departments

Page View.png

These pages are crucial pages as they contain the bulk of information that a parent would want to know regarding the school and for their child. E.g. to be able to find contact info or to find the email address of the teacher who is teaching their child.

Analytics also provided an insight on how much of the browsing was done on which platform. In the month of October, out of 102 sessions:

device breakdown.png

- Mobile took up 40.20%

- Tablet took up 4.90%

- Desktop took up 54.90

As mobile and tablet account for 45.10% in all, this puts the website in a disadvantage because the site currently doesn’t support a responsive design. A lack of responsive design means the site can’t scale properly for a mobile device, thus affecting user experience. E.g. users have to manually pan around and to scale the website themselves to fit their device. When they load a new page, they have to do it again and this distracts the user from reaching his or her goal.


Goals for the project:

  1. Mobile responsive website.

  2. New design that takes advantage of full screen on a desktop browser

  3. Improve the navigation 

  4. Improve the pages with the highest traffic

Wire-framings and full mockups of site

The following contains wireframes and mockups of the redesigned pages with the highest traffic. A search field is now available on every page consistently at the same place. Navigational breadcrumbs are also available to help the users know where they are at any time. On mobile, because of space constrain, the breadcrumbs is limited to 1 step back to the previous level. All pages are designed to be mobile-friendly as well.  For the colour scheme, I have decided to go with the two main colours used in the school logo - blue and red. Against a white background, the blue and red hues serve as accent colours. Text colour are not pure blacks, but rather cod grey (#111111) as they are more suitable and less jarring on the eyes. 

1. The Home Page

The Home Page is the most important as it is the first page that a visitor sees. Thus a good first impression must be established here. The site must be usable on both desktop and mobile.

Old Home Page:

- non-mobile friendly

- navigation bar lacks dropdown for easy access to the subpages

- Announcement and news are limited to 4 on the homepage

- Other links at the bottom of the page lack signifiers that they can be clicked on

New Home Page:

mobile friendly

- navigation bar contains dropdown for easy access to subpages. Navigation bar displays prominently where users are at via breadcrumbs.

- Announcement/news section is now a carousel, saving space and allowing more news and announcements  to be uploaded at one time. 

- Homepage includes links to a couple of pages with high traffic.

- Links to parent and student resources are added too to aid parents and students.

 Left: Revamp Home page (wireframes)  Middle: Home Page on mobile (wireframes)  Right: Home page on mobile with navigation expanded (wireframes)

Left: Revamp Home page (wireframes)

Middle: Home Page on mobile (wireframes)

Right: Home page on mobile with navigation expanded (wireframes)

 Left: Revamp Home page  Middle: Home Page on mobile  Right: Home page on mobile with navigation expanded

Left: Revamp Home page

Middle: Home Page on mobile

Right: Home page on mobile with navigation expanded

 Home Page with subpages navigation expanded

Home Page with subpages navigation expanded

2. Departments

The Departments page has been revamped to allow visitors to see all the departments in the school from a bird's eye view. Breadcrumbs are added as well so users know where they are at any time. Since departments are staffed by school personnels, I have also added a link to Our Staff page. 

 Wireframes for Desktop and Mobile view of the Departments page

Wireframes for Desktop and Mobile view of the Departments page

Department view in browser and also mobile

 

When users click on a department, the entirety of the page's content will be shown. Unlike the old design where the content of each heading is hidden unless clicked. When users reach the end of the page, they will see a link to the next department. This is added as I didn't want the page to reach a dead end at the bottom. 

department_english

Hi Fidelity wireframes of Department_English

 High Fidelity of Department_English page on mobile

High Fidelity of Department_English page on mobile

 

3. About US - Staff

About Us page has been revamped to minimise unnecessary scrolling down the page. In the old design, if the visitor's child is in level P6, he or she has to scroll all the way down. In the new design, the 6 levels (P1 to P6) are spread across in a carousel. Users will only need to click on the arrow button to reach their desired level instead of having to do lots of scrolling. On mobile, they just swipe across the carousel to see the different levels or they can use the on-screen arrow button.

about us_staff_low.png
about us_staff_new_mockup.png
 

4. Contact Us

Besides merely just having the information for visitors to contact the school, visitors can now enquire about anything by leaving a message, saving the users' time without having to copy the email address and send the email from another browser tab or mail client. If users do not wish to send a message, information to contact the school is still available along with directions for getting to the school. 

 Wireframes for "Contact Us"

Wireframes for "Contact Us"

 High Fidelity wireframes of the "Contact Us" page

High Fidelity wireframes of the "Contact Us" page

 

5. Information and downloads

For "Information and Downloads" page, a toggle bar allows viewers to switch between information and downloads. For examples, some events involving the use of slides  will be uploaded to the Downloads section for visitors to download. 

 

 Information tab 

Information tab 

 Information tab in high fidelity wireframes

Information tab in high fidelity wireframes

 Downloads tab

Downloads tab

 Downloads tab in high fidelity wireframes

Downloads tab in high fidelity wireframes

 

Feedback:

After showing the re-designed site to parents on a mobile phone: 

The pros:

- They are happy with the mobile-responsive website and also a new look since the website’s design hasn’t been updated in years. They also like the clean look of the site, saying it looks “refreshing” to finally have a change. 

- They also feedback that it’s so much easier to find a link to the gallery of the latest event in school or to simply see all the galleries, since they are now located on the Home page.

- Another feedback was the ability to easily see the upcoming events with the information such as date and time, so they know when to fetch their children after a certain event.  Because of  its location, parents say it’s harder for them to miss the details. 

- Remarked that the new Homepage is more useful than ever as it provides all the necessary and useful links to information

The cons:

- They pointed out about the hamburger menu at the top left. Because it is located just beside the school logo (brings you back to Home page when clicked), they clicked on the school logo by accident when they intended to click the Menu button. 

- They also mentioned that if the page “Information” contains both “information and Downloads” in 1 page, perhaps I should rename “Information” to  “Information & Downloads” in the main navigational bar. They get confused when they are in that page as the page’s name suggests “Information” but yet offers Downloads as well. 

 

Next Project >