I love developing software because it changes so much and changes all the time. As mentioned at the end of the Elebase 3 testing post, Elebase 4 is going to bring a lot of new changes to the table with major changes and improvements in almost all areas built on the feedback from the user testing.

It’s amazing to think that the photograph below was taken just a few days before the first round of user testing. It feels like an eternity ago since the prototype looked like this on mobile devices, but this photo was taken on February 12th 2018 which at the time of writing is just over a month old.

In just over a month I have developed an initial prototype, completed two rounds of user testing, analysed two sets of user testing data and built software on data from these prototypes. Elebase 4 will part of the development continuum of the Nellie’s Nursery website.

Technical changes

There will be some under-the-hood changes to the way the site runs to improve performance on a range of devices.

Improved network performance

In the 26th February-2nd March reflective journal I mentioned that I had big plans for excellent network performance and impressive site loading times. Elebase 3 is no more optimised than any of the previous prototypes were, meaning that the load times are still about the same and everything mentioned in that post about network performance still holds true. Part of making Elebase 4 an excellent mobile experience will be optimising it and ensuring that it meets the speed requirements specified in that post. Research I conducted on January 17th 2018 concluded that nursery websites are often poorly optimised for mobile data connections and take far too long to load because they typically have too much multimedia content on the websites.

My broadband speed at home is 26.71 MBps download and 1.76 MBps upload (test conducted using the BT Wholesale Speed Test on Friday 23rd March 2018). The average UK broadband speed in April 2017 according to Ofcom was 36.2 MBps download and 4.3 MBps upload. However, different sources online will quote different figures, A Guardian article from August 2017 for example quotes the average UK download speed being 16.5 MBps which they say is slower than 19 other European countries, New Zealand and the United States and only 31st fastest in the world. An article on Wired which was written at the same time (August 11th 2017) quotes the same download speed figure and the same ’31st fastest in the world’ ranking. It can be assumed then that the average UK download speed is somewhere between 15 and 35 MBps and that my connection at home is probably ‘very average’. The site therefore needs to loads in a reasonable amount of time on speeds like this.

With caching disabled (to imitate a ‘first time visit’ in which no files downloaded from the website have been stored on the user’s computer to improve the load time), the Elebase 3 loads in 988 milliseconds on my connection and downloads 1.2 MB of data from the server on my 26.71 MBps down internet connection. The biggest file it downloads is the feature image which is a 680 KB PNG image and takes 458 milliseconds alone to download. That makes this image roughly 57% of all data downloaded and roughly 69% of the site’s load time is loading this image on my connection. At the moment the prototype features very few images and this feature image is likely going to be replaced by some photography anyway, but clearly file type is going to be an important consideration because the more images I have the bigger the total assets will be and PNG files are typically bigger than JPEG files.

I don’t envisage having a lot of data on the Nellie’s Nursery website, certainly no more than about 15-20 MB and on the average UK broadband speed the site should should load in well under 3 seconds (with or without the assistance of a preloader).

With this being mobile-friendly too, mobile broadband speeds also need to be considered. On Google Chrome’s ‘Fast 3G’ preset (which throttles your broadband speed to that of ‘fast 3G’), Elebase 3, which does not have a lot of content on it yet, takes 9.52 seconds to load with 7.12 seconds (75%) of that load time being down to the feature image again. On ‘Slow 3G’ the site took a massive 34.39 seconds to load, with 26.19 seconds (76%) of that being the feature image again.

The average UK 4G download speed according to Ofcom research in November 2014 is 14.82 MBps (I calculated this by working out the mean speeds of the five providers Ofcom provided data for). I made a preset in Google Chrome to throttle my download speed to this and recorded the results. It took 1.07 seconds to load the Elebase 3 home page, with 697 milliseconds of that (69%) of that being to load the feature image. Interestingly, I was able to calculate that the average time taken to load a page on 4G in the UK using Ofcom’s data is 1.054 seconds, so Elebase 3 is loading slightly slower than the average website does on 4G. With optimisation, loading in or faster-than-average time should be achievable.

Given that the full site isn’t finished yet and that the average page takes just over a second to load on 4G, I expect that on 4G my site should not take more than 1.2 seconds to loaf (with or without the assistance of a preloader) and on 3G my site should not take more than 15 seconds to load (with or without the assistance of a preloader).

On mobile devices it may be possible to download smaller, lower resolution versions of images to help improve load times, reduce the amount of data downloaded and then in turn reduce the user’s mobile data bills. If possible I will implement this, but Elebase 4 will achieve better network performance by using lower quality and lower resolution images than previous prototypes and also be making use of the HTML 5 preload tags that can be used to preload content. These (and a jQuery preloader) have worked well for Storehouse Online, which loads in just 2.71 seconds on my connection, yet downloads 7.3 MB of data – over six times the amount of data that Elebase 3 downloads.

Improved scaling for smaller devices

Elebase 3 already scales well to various mobile device sizes, however it can be made to work better on smaller devices such as the iPhone 5 and iPhone SE. These devices are often forgotten about especially in a world where most mobile phone screen sizes are 5″ or larger, but let’s not forget that Apple introduced the iPhone SE in March 2016 as a smartphone for those who wanted the modern features of the iPhone 6s such as the upgraded CPU and memory and support for iOS 10 and 11, but preferred the format factor of the smaller iPhone 5s. Apple even refreshed the iPhone SE in March 2017, so clearly there is a market for it. Older smartphones tend to have smaller screens too and many people are still using these smaller phones. Elebase must also be compatible with these devices.

The graph below is the best graph that I could find to illustrate the fact that sub-5″ smartphones are still popular. In 2016, 13% of all smartphones shipped in India had sub-5″ screens, so there is a still a market for phones of these screen sizes.

This graph is only applicable for India and doesn’t show how many people are currently using sub-5″ smartphones, but if 13% of all new smartphones shipped in one country were sub-5″, it’s probable that the market share of sub-5″ smartphones in use is fairly high.

On an iPhone 5s and SE, Elebase 3 works and displays fine however the fixed menu buttons could be made a little smaller to help increase screen real estate – especially in landscape orientation where the screen estate is reduced anyway because the width of the text container goes down to 75% to accommodate the fixed menu.

The iPhone SE has a 4″ display and is a current production model. As screen sizes go this is quite small and phones with smaller screens than this tend to use old browsers and operating systems that will not be compatible with the site anyway and have long since been discontinued by the manufacturer.

Visual changes

Left-aligned text with bigger line spacing to improve legibility

The justified text was heavily criticised during my user testing. Participants felt it was difficult to read especially if you wanted to read the content quickly. In Elebase 4 all text will be aligned to the left and line spacing will be made a bit bigger too so that text is more legible and easier to read when skim-reading which a lot of my participants felt readers would be doing on the site. The font for the copy was not criticised with participants feeling that the font itself was easy to read.

Removal or replacement of the heading text

The heading text has been criticised since the first round of user testing which took place in February 2018. Most participants criticised its legibility but did understand why I had used this font to try and keep the site looking friendly. It will likely be replaced with a more standard font for the time being or I might try and find a different childlike font instead that is more legible. I’ll get opinions from graphics students who know more about typography than I and go from there with the font choice.

Likely removal of the buttons and up arrows on the groups page and replacement with collapsible sections containing information

One participant mentioned that it would be a good idea to have a single ‘up arrow’ (‘return to top’) button present at all times on the groups page so that the user could easily go back to the top of the page without having to scroll up a bit to find an arrow to go back to the top. I thought this was a great idea, then another participant suggested getting rid of the individual group sections altogether and instead putting the information in collapsible sections with the reasoning behind this being that parents are likely only interested in the class group that applies to the age of their child, so might end up needlessly scrolling through a lot of information that doesn’t apply to them. It’s potentially a little risky introducing such a large change to the design language at this stage of the development process, but this system might even be able to replace the tiles system to make finding information easier and reducing the amount of scrolling.

Removal of the home button from the hamburger menu

A large amount of my participants were in favour of removing it and most participants instinctively used the home button on the fixed menu rather than the button in the hamburger menu to navigate home. My participants felt that by removing the home button from the hamburger menu the site would be a lot cleaner and the navigation less cluttered.

The contact button on the fixed menu may be changed to a ‘dial’ button that will call the nursery directly

A lot of participants thought the contact button on the bottom menu was a dial button. It will likely be changed to either a dial button or the icon will be changed to something that resembles ‘contact’ better, maybe an envelope – however this might be misinterpreted for an email button. Another iconography challenge lies ahead!

A visual overhaul featuring CSS animations and other visual improvements to give the nursery website a better look and a more friendly feel

This will involve the creation of new wireframes and an updated look and feel for the website. Compared to my peers’ work, Elebase 3 looks a little drab with a limited colour palette, however the colours were generally liked by participants and with some hover animations on certain elements and photography on the website, the site will soon a lot more colourful and much more like a nursery website probably should. I envisage having a new feature image on the home page which has the Nellie’s Nursery group mascots (the monkey, lion and giraffe) animated a little and on other pages there will be a lot more photography and other imagery.

Content changes

Addition of copy

This speaks for itself, Elebase 3 and earlier prototypes don’t have a lot in terms of copy and in fact most of the copy on the prototypes is just Lorem Ipsum which is placeholder text. Copy will come from the current website and will be check by myself for spelling and grammar errors. I am not a copywriter, but I am able to check for little errors in copy like that. I may need to arrange a visit to the nursery soon to get the rest of the copy written for the pages of the site that haven’t been made yet, but will hopefully exist in Elebase 4.

Creation of additional pages such as contact and meet the team pages

The pages that do not exist in Elebase 3 do exist in early prototypes of the site, but have not yet been made and do not function at all. I hope that Elebase 4 will feature some of the unmade pages in Elebase 3, expanding the size of the prototype and giving the client and the next set of testers a better idea about how the final site might look.

Addition of photography

Imagery and photography is lacking in Elebase 3 and earlier prototypes with the slideshows only having two images and other imagery being very limited. Elebase 4 will have photography on it to help engage more emotionally with my audience. Parents will see the photographs of happy children and want to send their child to the nursery too. I hope to visit the nursery soon to get some photos for the website, safeguarding and data protection policies providing, of course.

Testing strategy changes

New testing tasks and interview questions

The increased content on the site means that the testing questions and tasks used for testing Elebase 3 and the previous prototypes is not going to work for testing Elebase 4. Testing tasks and interview questions for Elebase 4 need to include tasks relating to navigating to the new pages and finding content on them. Unfortunately, due to the additional content in Elebase 4 the user testing will not be directly comparable to the user testing data from Elebase 3 and the earlier prototypes. Information architecture will not be comparable between Elebase 4 and older prototypes due to Elebase 4 having a lot more information on the pages. Testing Elebase 4 will have to be done as a standalone prototype to test how well feedback has been implemented from Elebase 3 to create the next prototype. There is only so long that I can continue to produce two versions of the same prototype for A-B-C testing. Elebase 4 testing will have to be a simple A-B test between the desktop and mobile version of the prototype. All feedback gained from Elebase 4 testing will be used to produced Elebase 5, which again will be an evolutionary prototype built on the codebase of Elebase 4.

The testing will focus on the whole usability of the prototype

Previously, testing has mainly focused on navigation and a little bit of information architecture. Elebase 4 testing will be designed to test more aspects of the prototype, namely:

• Navigation
• Information architecture
• Information heirarchy
• Aesthetics of the site (colour palette, photography, other elements)
• Typography

By the time that Elebase 4 is ready to test in mid-April there will be about one month of the project left and it will be time to test all features of the site and get critical feedback on all aspects so that Elebase 5 can be developed in time for the submission with feedback on all key usability areas so that Elebase 5 can be developed faster. Hopefully, thanks to the technical feedback from the February 2018 testing and the aesthetic/typographic feedback from the March 2018 testing, Elebase 4 will be a prototype that works for my testers and hopefully the website’s users.

Feedback on the navigation system of Elebase 3 was generally very positive, so asides from the changes to it mentioned above the navigation system will likely remain.

Improved device testing

When it comes to the user testing session, the mobile test will only be done on a device that is fully compatible to avoid bugs like the big one with the groups page that was found only during Elebase 3 testing. This bug unnerved testers and made the experience poor for them and also meant that the same negative feedback kept coming up in the user interviews, meaning that other problems that may have existed in the prototype might have gone unnoticed by testers as they focused on informing me about the big bug. It was unfortunate, but a lesson learned in the importance of device testing and running prototypes on as many physical devices as possible and not relying solely on emulators.

Bugs like this discovered during user testing (and discovering that the home button in the hamburger menu doesn’t work during user testing too) really pointed out flaws in my device testing. Clearly I did not test Elebase 3 thoroughly enough on the devices, so for the next round of testing device testing will take the form of myself completing all of the testing tasks on each device. If I can complete all of the tasks without any setbacks then the software and hardware that the prototype was tested on is compatible.

Different testers

I have some new testers in mind for the next round of prototyping. My reasoning for using different testers in each round of testing has been mentioned in several recent posts, including the March 2018 testing write-up, the Redgate visit write-up and the February 2018 testing write-up. I may even get some international friends to complete the tasks and an interview over Skype to get an even wider perspective. If testing cannot be done in the UX lab or at university for whatever reason (time, perhaps) then I may choose to conduct testing and interviews on Skype.

Prioritised list

The priorities are as follows:

• Edit typography on existing copy and text – this involves changing the heading title font, increasing the leading/line height in the copy and removing the text justification.
• Contact Nellie’s Nursery and try to arrange a day to take new photographs for the website and obtain any additional copy that is required.
• Create wireframes for the additional pages that I envisage creating.
• Redesign the groups page and experiment with collapsible sections, replacing tiles and the buttons on the groups page.
• Improve the performance on mobile devices and optimise assets.
• Improve scaling on smaller mobile devices.
• Modify the icon for the contact button on the fixed menu.
• Experiment with ‘aesthetic niceties’ such as CSS animations and alternative colour palettes.
• Design the new user testing strategy.

Are you ready for Elebase 4?

I hope that it is completed by mid-April which is when I hope the next round of user testing will be conducted. I may make other changes along the way but I fully expect to begin coding this on the week beginning of Monday 26th March.

Bibliography

Share of smartphones launched across India in 2016, s. (2016). India – share of smartphones launched by screen size 2016 | Statistic. [online] Statista. Available at: https://www.statista.com/statistics/809477/india-share-of-smartphones-launched-by-screen-size/ [Accessed 23 Mar. 2018].

Ispreview.co.uk. (2017). Ofcom 2017 Study – Average UK Home Broadband Speeds Rise to 36.2Mbps – ISPreview UK. [online] Available at: https://www.ispreview.co.uk/index.php/2017/04/ofcom-2017-study-average-uk-home-broadband-speeds-rise-36-2mbps.html [Accessed 27 Feb. 2018].

Sweney, M. (2017). Average UK broadband speed slower than most of Europe, report finds. [online] the Guardian. Available at: https://www.theguardian.com/money/2017/aug/08/average-uk-broadband-speed-europe-germany-spain-singapore [Accessed 27 Feb. 2018].

Bradley, S. (2017). You shouldn’t be surprised that UK broadband speeds suck. [online] Wired.co.uk. Available at: http://www.wired.co.uk/article/uk-broadband-speed [Accessed 27 Feb. 2018].

Ofcom. (2014). Ofcom publishes 4G and 3G mobile broadband speeds research. [online] Available at: https://www.ofcom.org.uk/about-ofcom/latest/media/media-releases/2014/3g-4g-bb-speeds [Accessed 27 Feb. 2018].