MAY 21ST 2019 – Pendragon 2.1 is an update to Pendragon 2 (stylised ‘Pendragon II’) which was launched on April 28th 2019. This update is a result of criticism of Pendragon II from The Big Book Crit on May 2nd 2019. Pendragon 2.1 aims to address many of the suggestions given at this event.

What’s new in Pendragon 2.1?

Pendragon 2.1 is built on a very similar codebase to Pendragon II, so fundamentally it looks and operates in a similar way. However, there are some big changes that have been made.

Visual improvements

  • Reduction of the number of carousels used. Carousels are now generally only used in the ‘related’ section at the bottom of each page. Portfolio pieces are now displayed in a grid rather than carousels. This makes portfolio pieces easier to see.
  • Animations on scroll. The AOS.js (Animate On Scroll) JavaScript library is used to animate content into view when the user scrolls down the page, adding a nice touch of interaction.
  • The home and portfolio pages now feature small ‘video previews’ of each portfolio piece. This helps to make the pieces look more interesting and to show that my work often isn’t just static.
  • Smaller header area and a different header image to Pendragon II. The header image is now the dragon itself (much like the menus and the footer) which is a more relevant image and the smaller header area makes the site look sleeker and more modern.
  • All ‘legacy elements’ such as the dedicated photography menu, ‘case study rollover boxes’ and ‘photography rollover boxes’ have now been removed in favour of other navigation aids, such as carousels, which do not require the user to roll over or tap on the element to reveal that it is a navigation element. These legacy elements were poor for users of touchscreen devices, ran on fairly ‘messy’ code and relied heavily on the use of jQuery.
  • Redesigned error page, featuring a slideshow and new text. It’s inspired by the error page from the original Pendragon site, made in 2017.
Portfolio pieces are now shown in a grid rather than a carousel.

 

‘Legacy elements’ such as rollover boxes to see photography themes have been replaced with grids that animate into view. This is better for mobile users.

Content improvements

  • Vastly reduced amount of words on each page. The original site and Pendragon II were approximately 17,000 words long. Pendragon 2.1 is approximately 3,500 words long – representing an 80% decrease in the number of words on the portfolio. The length of the content on the previous site was heavily criticised so this was a key aim of the new site. This has been achieved not only by rewriting every page to be more succinct and only include the relevant information, but also by removing pages that are no longer needed.
  • Case study pages are now much more visual and feature more images and videos showing the final result. Images and videos of the final result are also at the top of each case study page. This helps somebody who is looking through the portfolio quickly to find what they want to see – the outcome.
  • Additionally, more wireframes, both sketched and computer-drawn, have been added to the case studies where they were made to show my development process. Some user journey examples have also been added where it is appropriate.
  • Content is now more specific, for example my thoughts about teaching as a career (which used to appear at the bottom of the educational technology page) have now been removed.
  • The first item on the home page is a little bit of information about me and what I do, swiftly followed by my a visual representation of items in my portfolio, then a bit about my work experience. It was suggested at The Big Book Crit that this would be a more ideal content order than having the infographic about UX as the first item on the home page.
Case studies now generally have an introduction, the final outcome, project information and then finally related pages at the bottom of the page.

 

A brief summary of who I am and what I do is the first item on the site’s home page.

Information architecture improvements

  • Several redundant pages have been removed altogether or combined. Examples are:
    • The ‘case studies’ page and sub-directory has been removed and all case studies now appear on the portfolio page for improved IA and navigation. Links to the old case studies page redirect to the new relevant URLs.
    • The WymTrails case study and all links to it have been completely removed from the site. Any links that used to go to the page on my portfolio about it now redirect to here, where the original June 2018 review of it is available.
    • The SALT Glass Studios case study has been removed from the site altogether.
    • The ‘user testing’ page has been removed and combined with the ‘UX’ page.
  • Portfolio pieces are now arranged by theme rather than by when they were completed. It was suggested at The Big Book Crit that the age of the piece didn’t matter, but sometimes it was nice to see what themes pieces followed. The themes are:
    • Research & Testing
    • Visual Design
    • Development & New Tech
    • Team Leadership
  • The ‘UX’ section of the menu has been removed as the specific ‘UX case studies’ page has been removed and the content that was in this section has been moved. This means there are now three main categories on my portfolio: Portfolio, Work Experience and About Me.
  • Work experience is now arranged into ‘Jobs & Internships’, ‘Edtech’ and ‘Microsoft Education UK’ to make it easier to find out about what I’ve done.
  • ‘Photography’ has been removed from the portfolio menu section as I feel it is now a secondary part of what the site is about, so the photography button is now located on the right side of the menu with the ‘blog’ and ‘invert’ buttons. It is now no longer possible to choose a photography category to look at directly from the main menu, however links to individual photography categories/themes are still in the footer.
  • The footer is now four columns wide rather than five. The ‘UX’ column has been removed and its content amalgamated into other columns.

Above: the simplified IA of Pendragon 2.1.

Reducing the number of pages and sections makes the menus smaller and less-cluttered.

Technical improvements

The site’s codebase is extremely similar to Pendragon II’s with a few modifications made to it to accommodate for the AOS.js JavaScript animation library.

Overall code length has been reduced by removing ‘legacy elements’ and this in turn also reduces reliance on jQuery. A reduction in the number of parallax scrolling sections has also slightly reduced the amount of CSS required.

The future of the Pendragon Online website

Showing to industry

Starting as soon as possible, this will be my new portfolio to send to industry to see if I can get an internship in 2019. So far I still haven’t secured anything. I’m now not too concerned about not securing an internship for the summer of 2019 because if I don’t get one I can do some volunteer work (something interesting for the CV!) and start to research graduate schemes and my dissertation. However, it’s good to have an up-to-date and functioning portfolio site to share with industry.

This will also likely be the portfolio I apply to graduate schemes with if it’s not updated again before September 2019. This is why it was important to me that I took onboard the feedback from The Big Book Crit to help make my portfolio even better.

This version of the portfolio has also been launched at a time when several freelance clients are potentially looking to hire me to build new sites. Yes, I said I wouldn’t go freelance again, but I know these people and feel that I can make something for them.

Project outcomes are easier for readers to see.

Further content updates

Which brings me neatly on the next point: if these jobs go ahead they’ll need to be added to the portfolio – especially since I aim for at least one of these to be built on Angular.js or React.js instead of jQuery. This would be my first site to do so and would be a major ‘shouting point’ for my portfolio since the industry is moving away from looking for jQuery developers and more towards those who use newer front-end frameworks.

I’d like to add some information about my dissertation piece to the portfolio site before I apply to graduate schemes with it because of how well it has gone down with the local tech scene who are impressed at what I am trying to do for my dissertation.

‘Pendragon 3’ and the end of this version of Dragonbase

At its core, this site is built on code that was written as long ago as November or December 2017 and used in the original Storehouse website from March 2018 and Nellies Nursery prototypes from February, March and April 2018. The core code is getting old and as the Dragonbase framework has been adapted over the course of the past year to include new elements such as parallax scrolling, mega menus, ‘sticky headers’, custom-built slideshows, animations and a change of measurements from mostly percentage-based to mostly viewport-based measurements just to name a few, it’s become harder and harder to maintain and add to and small and annoying incompatibilities are beginning to show.

The version of Dragonbase that Pendragon 2.1 runs on is much better than earlier versions, but at some point a complete rewrite of the Dragonbase framework is in order. My plan is to experiment with newer frameworks and even introduce Flexbox into one of these smaller freelance client websites over the summer of 2019 and write a new version of Dragonbase based on that. Then, over the course of several months the portfolio site can be migrated to this newer framework and launch when it is ready.

Although I won’t be building any more websites on this version of Dragonbase, I am confident I can keep maintaining it and updating the portfolio whilst the new framework is in development.

The portfolio now features more wireframes to show project development.