USABILITY WEBSITE AUDIT USCHOOL.COM.UA TECHNICAL SPECIFICATIONS UX-AUDIT PETER@UX-AUDIT.COM SKYPE: PETRNIKOLAIEV
Content Content... 1 Main page... 2 School Enrollment... 7 Price... 8 Our school... 10 Teaching... 11 Teachers... 13 Contacts... 16 1
Main page 1. Replace the favicon. I propose to draw a green letter U on a white background here link to website that will help make favicon quick www.///////////// 2. 2. Add callback functionality. You need this functionality, because the user can view the site outside working hours or on weekends. The user will order "callback" and you don t lose contact. In the future, you would have contact base on which you can do the email sending. This is usually a button "call back" in the header or right side, or on the bottom of the user's screen. "Call back" form you should consist fields name, phone number, email and send button. You can do without a designer and make a form based on design contacts page. 3. I recommend on-line chat provider www.//////// It is necessary to implement if you have a manager who will be able to respond promptly to the chat for 3-5 minutes. Free package will be enough for your project. 4. Header you need to make it easier. And to increase the emphasis on the phone by removing the less important elements. a. Main menu. Near the menu item "Our School", "Study" add the down arrow on the type Users will understand at which item there is a drop-down menu. The icon can be taken from the dropdown list here www////// b. The menu item "News" need move to the section "Our School" according to statistics users rarely read company news. c. The menu item FAQ is on the main page of the section to move in Our School item If you still want to leave "News" and "FAQ it is better move to the left (they are similar objects, as additional menu items and they should be there, as they divert from the phone), and remove icons. 2
5. Slider: a. Change font to Arial or Fontello as the menu fonts. b. The text on the left side is difficult to perceive because it is not structured, I would recommend to make it easier. The following example, all you need to align the left and place the words one by one c. d. Here you need to add CTA (Call to action) button. This button allows the user makes the main action on the site. For example, it may be a button "to enroll in the school", or "order a visit to the school" by clicking on the button user goes to form to fill out application. And you get contact data of potential customer. e. The second slide differs from the first only the logo on the picture, in this case it is better to turn off the second slide. The second slide is missing the word /////////. I recommend you to design the slide that had an extra interesting content about your school. f. Make animation icons to increase throughout the area in item. Clickable make the entire block area. 6. www.///////////// page should be structurally similar to the www.//////////////// It is necessary to remove this image and put a beautiful one with the students like on this page www.//////////////////// 3
7. Footer. a. "Marks" is not clear the title of the section, I suggest rename to Tags or Popular links or more intuitive title. Now "Competition" button leads to wrong page www.//////// you need change for this www.//////// b. Gallery in the footer is not necessary better put the contacts instead (all phone numbers and e-mail) and social icons. Now facebook icon too hidden. c. Form "Write to us" I recommend rename to more concrete action. For example, Ask question or Feedback form. Then rename the title, the "message" renamed to "wright the question". Add the field "Name" When you will responding to the letter you need to somehow appeal to the user. 4
d. Footer is absent in the other language versions. You should fix it. 5
Recommendations for improving the home page Few blocks of trigger such as Our principles. Trigger in marketing means hook it is kind of information that can engage the user. It should be added: 1. Guarantees quality of services provided. 2. Parents and children reviews, if you haven t then call and ask to provide, and better with a photo and save spelling and punctuation. Any way do not write your own reviews, or give the task to copywriter. 3. Why privet school better than state. Wright down unique feature and advantages. 5. Add block with school or teacher awards. 6. Logos of partner companies. 7. School certificates and licenses. 8. wright down benefits for parents to send their children to this school, for example: a. Parents save time in the evening, because they do not have to do homework with their child. b. School works until 7 pm so they able to pick up the child after work. c. Convenient school location. 9. Special offers both free and paid, for example: a. Additional yoga. b. Psychologist, speech therapist, violin, ballet, etc. c. Monthly Report about behavior and child development. d. Individual advice on child rearing e. Books included in the cost. 6
School Enrollment " School Enrollment " and "Price" it is the same page, and will confuse the user. On the page School Enrollment I expect to get information about how I should to prepare my child for the school year in your school, and not about money. I recommend to wright How to begin the school year. What child should be able or not able to admission to the school? What does it costs to prepare before going to school? What child needs to know about the school, mentally prepared for this? What to do if a parent wants to transfer a child to school for a second, third, fourth form? Write 10 tips how to spend the summer before school? 10 tips what child will need to enroll in school: 1. bafpack 2. Sport suite 3....; If your child wants go to the ballet, a violin, write down a list of needed items, or write that does not need all include in cost. 7
Price Now I can find the prices page only from the main page by clicking on the tab "Price". I recommend adding a prices page in the menu, but not in a prominent place. It should be the second level of the menu, I suggest to the section "Our School" or "Study". The user must first create the value of your services and then see the price page. I suggest add content to create value before showing cost on the pricing page. For instance, identify what is included in the price from 9:00 to 14:00: Consultation with a speech therapist, all training materials, a climate control room, special orthopedic chairs, desks of brand name, highly qualified teacher with experience at least 5 years in teaching, security system, video surveillance of the child, the monthly report on the child's achievement, personal consultation with the teacher about child development with an emphasis on the child's strengths, in the teaching class maximum 10 pupils, no homework, a special training program for such a procedure. Then list what is included from 9:00 to 17:00 you will get extra: as well as the opportunity to attend yoga, ballet, walking outdoors, educational games, and so on. Prices must be as packages views and name for example Half day and full day or Premium package. The customer buys not entry to school. He buys a comprehensive package of services. You can add a third package and call it a Family. Brothers and sisters after 2 children have 10% discount. Under the package to add the button "order package" and send to the form, where fill out three fields name, email, phone and send button. You should receive a letter ordering the package. 8
The following examples of packages 9
Our school 1. By clicking on the page "Our School", turn to the page "How it works". There are two options how to arrange navigation: a. Item " How it works " to put the first in drop-down menu "Our School" and do it not active (not clickable). b. Create a page with content "Our School" and fill it with the information 2. The order of the dropdown menu must be in sequence from more to less demanded by the user. Now line up in its sole discretion, after a couple of months, when there will be an analyst, what pages most visited, in that order. 3. In pages "Mission", "Who we are?", "Program" not enough content. Add a few missions, more facts about history, more detail about program, add photos staff, teachers with the children, the school photos by analogy with the page " How it works ". 10
Teaching 1. By clicking on the page "Teaching", turn to the page "Schedule". There are two options how to arrange navigation: a. Item "Schedule " put first in drop-down menu "Teaching" and it do not active (not clickable). b. Create a text page "Education" and fill it with the information 2. The menu item called "Schedule" so title to this page should also call "Schedule". User to be sure that he moved to the page he clicked in the menu. But already in the subtitle write "from 6 to 9 years group" The drop-down list of "All classes" does not fit in one screen of the standard computer screen for example laptop 1366x768. Objective: by clicking on the drop-down list, a user needs to see the entire list of items, regardless of what position he looks it. Solutions: Enlarge the width of the drop-down list to four columns will be 6 lines in four columns. Decrease line spacing. Make a list of the definition of the position relative to the screen. If I look at the list in this position, see. Example below then display a list above the button "All Classes" Remove from the list rarely items The column with the time to fill completely gray. 11
In this line tooltip display not correctly. Cells which do not have the content to fill greyed out Now different colors in schedule prevent to perceive information. Although colors should help read content. So I recommend structure colors in such a way 12
Teachers I propose on hover the teacher card to do the photo blur and write text with description about this teacher. On click goes on the page with a detailed description of the teacher. Example «Kindergarten IMN». Decrypt the abbreviation of the title, the second to remove the header. Add the Montessori logo, if permitted by copyright, increases the credibility of the brand. Add a short description of what the Montessori method of teaching their benefits, why it was chosen. 13
Articles 1. All recommendations also apply to the "News" page. 2. Pictures for articles worth doing 370x230 px size, for example as in the article "Do children have enough sleep?". Article size should be such that it fits into a standard laptop monitor. 3. For articles "Gordon Neufeld" and "Attention competition!" must be reduced to the recommended image size 370h230 px 4. It is advisable not to fill the image on a white background, and if you have to so add a 1-2 pixel border. The article will look structurally. 5. When user focus cursor on article you need add hover (animation), it may be an increase in the images and change the color for the header, such as in news text pages 14
6. In the article "Gordon Neufeld" I recommend change size youtube player for comfortable viewing 360x560 px. 8. In form Leave a Reply, change for example title to Leave feedback". You need to change the fields order to name, email and comment, remove the field site. All comments should come to you mail for moderation. 9. In article "Attention competition!" all link need to open in a new tab. Add information how you will define winner 15
Contacts 1. It is necessary to change the order Our Addresses put the first on the list, then email, then the work schedule. 2. In the form Contact us to remove the Subject field. The forms bottom should align block facebook, see the example below. 3. Now it is not entirely obvious that icons are clickable. Make hover for all block not for only icons. 4. 3. Icon Facebook should be round as the rest 16
Additional recommendations 17
Site Speed Optimization 1. It is necessary to use Google recommendations for optimizing site speed download. It is necessary to perform most all of Google's recommendation and the site become in the green zone, which has a positive impact on the ranking of the website 2. I will send optimized images for the pages of the first level together with the Technical Specification 3. An additional resource that helps to optimize the download speed https://///////////// Zone F E D are not allowed to the site. 18
Adaptivity A resource that can be used to see how the site will look on the most popular devices and screen resolutions http:///////////////////// Screen Resolution 1920x1080 Navigation arrows slider is highly desirable to align the edge of the menu Screen Resolution 768 px 1. The text does not fit in the slider 19
2. On the pages of the second level phone number in the header transferred to two lines 3. The items are clamped, add padding 10-20px. Hide second level menu in accordion Mobile version 320 px 1. Instead of the item "Information" better display a phone number. Add the indentation from the logo to the menu about 20 px 20
2. Tab "Enrollment" does not fit fully 3. Block "First time to the school," the timer must be placed horizontally and centric 4. On page "Teachers" between some units of teachers there is no indention 21
Conclusion Only Customer of this Technical Specification responsible to implement or not these recommendations in this document. The Technical Specification presented recommendations to fix bugs, improving site usability, marketing tools in sales services to promote your site in search engines. The chosen design template fits this type of service. Template design is trending in web design. The correct solution is to use the school photos on the pages, it is enhances the credibility of the site. The site should consist many textual information pages. This is the type of service, where the customer to make a decision you need to analyze a lot of information to adopted a decision that is based on long-term client relationships. 22