SEPTEMBER 1ST 2019 – Pendragon 3 was released as the fifth version of my portfolio and the third major version (hence for ‘3’). It succeeds Pendragon 2.1 (launched May 21st 2019) which in turn was a minor update to Pendragon II, launched on April 28th 2019.

Pendragon 3’s new case study page layout and responsiveness shown in 30 seconds.

Pendragon 3 has been built as the result of feedback from UX designers who evaluated Pendragon 2.1 at the end of July 2019. Construction began on August 4th 2019, with the majority of it taking place between August 14th and 31st, and was completed on September 1st 2019, with several minor patches being added since.

The most important release yet

Pendragon 3 is the most important release to date. We are now in September – and it’s my final year of university. The portfolio no longer needs to be able to get my temporary summer work placements – it now needs to get me a job or get me onto a graduate scheme. It therefore needs to showcase my wide range of skills and work that I have completed and show that I am a UX designer, not a graphic designer who occasionally makes website and app prototypes.

If the portfolio were a product, it’s probably been through enough rounds of ‘testing’ and redesigning now for this third major iteration to have most of the rough edges smoothed.

This needs to be the portfolio that sets me apart.

The feedback that created Pendragon 3

Olivia Campey provided a lot of feedback that helped shaped my portfolio in August 2019.

Ironically, one change in Pendragon 3 is the introduction of my own portfolio site as a case study which you can view here. The feedback from the UX designers that reviewed Pendragon 2.1 is there. This page exists as I believe it’s interesting to show how I’ve changed the presentation of my work.

An impressive set of skills showcased.

Too much animation – tone it down a tad!

A lot of work to look at, more than I’d expect than a standard portfolio. But it’s all good stuff.

Show your process and workings. That will set this apart from a Graphic Communication portfolio.

There are some minor bugs with the site functionality.

The mega menu confused me somewhat. I think standard menu buttons would make navigation easier.

That’s the feedback that helped to shape Pendragon 3, provided by Olivia Campey (UX Designer) from The User Story.

Putting the ‘UX’ back into my portfolio

Problem definitions (backed up with statistics) and quotes from users help to make bring Pendragon 3 back to being more of a UX portfolio.

Pendragon 3 puts ‘UX’ back into my portfolio. One key criticism of Pendragon II by graphic designers was that it was ‘too wordy’ and not visual enough. Pendragon 2.1 therefore launched with 80% less text and many more images. UX designers criticised this move, saying that it didn’t show my process enough and it was more like a graphics portfolio (not surprising, given that graphic designers’ comments influenced the changes). Therefore, Pendragon 3 has been focused on showing the UX process applied to all of the case studies presented on the site. Each case study is broken down into the following sections:

  • Discover – often a fact or statistic is stated which introduces a problem.
  • Define – often real quotes from real formative user research is shown here.
  • Develop – user personas, information architecture diagrams, system flow diagrams and high- and low-fidelity wireframes and prototypes are shown here.
  • Test – real test data and real quotes and data from testing sessions is shown here.
  • Evolve – at least one idea about the project could have progressed.

This is the order of the UX process and each case study details in a visual and beautiful way how each step has been applied.

User personas are a key feature in some case studies. Some personas are more detailed than others, but this is the first time any have been in my portfolio.

For the first time ever, my portfolio now includes user personas, real quotes, information architecture diagrams, real test data, research maps and system flow diagrams. These are all things that most ‘average’ graphic design students and computer science students won’t have – their courses focus more on the aesthetic or functional/’code-cleanliness’ side of a project as opposed to really considering how the user’s needs.

This version of my portfolio also features more wireframes (both sketched and digitally drawn) and high-fidelity prototypes than any previous version to help show my design process.

Visualising the UX process – and making it interactive

The UX process interactive diagram works on desktop, laptop, tablet and mobile devices.

At the centre of Pendragon 3 is making the UX process clear and obvious.

When I was interning at The User Story in 2018, one of the challenges I was given was to come up with a diagram that visualises the UX design process for their website. I came up with some ideas, shown in my User Story case study on the Pendragon Online website, not none of these went into production.

So, when redesigning Pendragon Online, I took one of my designs and placed it on the home page of my website to illustrate the UX design process.

The diagram shows the five stages of the UX process, four of which are from the traditional ‘double diamond’ and the final one is one that The User Story and I added, ‘evolve’. The diagram has each of the stages placed around the user, illustrating that the user is at the centre of the design. When the user clicks or taps on part of the process, an animation happens and a very short description of the process is shown. The next part of the process then animates, inviting the user to interact with it.

The image itself is an SVG image, its CSS is manipulated through the use of JavaScript. Animations are from the animate.css library and are selected randomly from an array of animation classes which means that each time the user uses the interactive element the animation is different.

The UX process diagram shows the user at the centre of the design process. Visitors can interact with this diagram on their desktop, laptop, tablet or phone.

Everything’s been rewritten

And I mean everything. The content has been completely rewritten because the content from Pendragon 2.1 was too ‘sparse’ and the content from the original site and Pendragon II too wordy and ‘dense’. The new content is approximately 12,000 words long, meaning that there is around four times the amount of text on Pendragon 3 than there was on 2.1, but still approximately 30% less text than the original site and Pendragon II, yet there are far more case studies.

Wireframes and designs, both hand-drawn and software-drawn, feature heavily in the updated portfolio to help show a design process.

The text on the new site is a lot more detailed than the previous, but it is presented in such a way that it doesn’t appear to be very long. Images and subtle animations help to break up text and detailed text is required in order to explain how each part of the UX design process is satisfied.

The average length of a case study on the new site is approximately 1,000 words, compared to approximately 1,300 words on Pendragon II and approximately 1,800 words on ‘Pendragon I’. There are ten case studies on Pendragon 3, eight on Pendragon II and just four on Pendragon I. Case studies are just 207 words long on average on Pendragon 2.1 – too brief for this discipline.

The copy for Pendragon 3 took approximately 68 solid hours to write.

A new codebase

Pendragon 3 is built on Dragonbase 2, the same framework that the new Bidwell Joinery and the FFA accessible e-commerce websites are built on.

Dragonbase 2 is a complete rewrite of my ‘common framework’, which essentially combined the code from several of my first year projects into one HTML, CSS and JavaScript framework. It worked well in 2018 when I was creating relatively basic websites, but in 2019 I found myself doing much more web development and soon started adding bits to this framework and its code started to become messy and buggy. A complete rewrite was required in order to ensure I could still understand how the code functioned.

Dragonbase 2 is much cleaner than its predecessor, much more responsive thanks to using Flexbox and viewport widths and heights (which vastly reduces the number of media queries needed – 171 lines for Pendragon 3 compared to 300 for Pendragon 2.1 and 917 lines for Pendragon I), delivers images in more efficient WebP and SVG formats and has better options for accessibility and screen reader compatibility.

Dragonbase 2 also deprecates the use of jQuery and uses ‘vanilla’ JavaScript where JavaScript is required. This improves performance and security, since jQuery is vulnerable to XSS (cross-site scripting) attacks. Animations are now all CSS3-based, further improving performance and battery life on mobile devices.

Outcomes are shown in grids, typically images are shown first followed by a video. Showing them at the bottom of the case study is the right place to show them. The outcome is the final result of the process.

Other changes

This update is a large one, lots of changes besides the content and codebase were made.

Appearance and UI

  • AOS (‘animate on scroll’) animations now only display once and only on desktop devices. This improves mobile device performance and legibility because often the animations would play and not be seen underneath the header.
  • There are now fewer AOS animations – whole divs and containers fade into view rather than individual elements. This makes the animations more subtle and the site looks slicker.
  • All animations are controlled with CSS3 (including AOS animations – AOS.js is built on CSS3 animations) which improves performance, security and battery life.
  • All carousels have been removed and replaced with items in Flexbox rows and columns instead. The OwlCarousel library that was previously used relied on jQuery, which is no longer used.
  • The ‘invert’ mode has been removed – instead, pages are a mix of white and black and the header and footer is dark blue with the traditional red Pendragon dragon.
  • The mobile view has been greatly improved for those using smartphones in landscape orientation.
  • Illustrations are used extensively to help break up text, the different coloured sections also help to beak up text and make it appear shorter. The text also spans more of the screen width to help make it seem shorter and the font is larger to help this and improve legibility.
  • There is a slideshow at the top of the home page that showcases some of my different skills and design principles – it talks a lot about putting users first.
  • The titles and captions on the photography page now appear underneath the image in a white container rather than on top of the image in the blue container. The titles and captions fade which is a smoother animation than the old one which slid up and down.
  • Navigation buttons are now much closer to each other so that they look more like a menu.
  • The photos on the photography pages have been updated with some of my best images from 2019 so far.
Photography pages feature many of my newer images, such as those I took in France in June 2019.

Navigation and information architecture

  • A simplified information architecture combined with the ‘fat footer’ used since Pendragon II means that the ‘mega menu’ seen in Pendragon II and 2.1 has been removed. Instead, more traditional navigation buttons in the header are used.
  • All menu buttons are visible on page load now – Pendragon 2.1 had a bug which meant that the menu buttons weren’t visible until the user scrolled.
  • The page outlining the work I did as an A level graphic communication has been removed, however the A level computer science page remains and has been extended to become a UX case study.
  • The work experience and ‘about me’ pages have been amalgamated into one page: ‘about’, which acts almost like a CV. With it being a CV, it also adds information about my certifications and some additional voluntary experience that wasn’t shown on the older versions of the portfolio.
  • The ‘pendragon.online’ logo text now navigates to the home page.
  • Titles, images and buttons on the home, portfolio and ‘related’ sections on each page are all clickable.
  • The ‘action photography’ page has been removed and replaced with aviation photography instead. I shoot more aviation photography than general action photography.
The aviation photography section brings some blue skies and reheat action to the portfolio.

Media optimisation

  • The vast majority of images are delivered in WebP or SVG formats. This helps to improve the website’s performance and also reduce the amount of content downloaded. There are JPEG or PNG fallback images for web browsers that can’t display WebP images, notably Safari. WebP images and SVG files are much smaller than other formats an so reduce download times and increase performance.
  • SVG graphics also of course remain crisp and clear across all resolutions since they are vectors.
  • MP4 video files are smaller than those from previous versions, with the average file size being 1.48MB in size, compared to 3.54MB from Pendragon 2.1 (60% smaller).
  • There are also fewer videos. Pendragon 2.1 had a higher quality version of the videos on the home page and portfolio page than in carousels and on the case study pages. Pendragon 3 uses the same (lower quality) video on all pages. This means that fewer videos are downloaded and therefore the chances are that they get cached sooner as the user visits more pages on the site, further reducing the amount of data the site consumes and further increasing performance. Videos are now shown on the majority of pages because they replace images in the ‘related’ section at the bottom of each page.
  • The average size of a piece of media on Pendragon 3 is 237KB, compared to 590KB on Pendragon 2.1 (60% smaller). Furthermore, there are just 238 pieces of media on Pendragon 2.1 compared to 609 on Pendragon 3 (a 155% increase).
  • The smaller images and delivery in ‘next-gen formats’ means that the loading screens no longer need to be used, therefore improving the experience as page load times are reduced. There was a bug on older versions of Pendragon Online where the loading screen would occasionally hang, especially on mobile devices on slower internet connections.
Mobile optimisation is not only about creating user interfaces that scale well to devices (portrait and landscape views of Pendragon 3 shown here), but also about serving content in a way that is fast and effective.

Other technical changes

  • The user is now consulted about cookies in like with EU law and has the option to enable and disable analytics collection on their device.
  • Flexbox is widely used across the site, replacing the older grid system which was made by defining set widths of CSS columns. This makes the site more responsive, but does mean that the site can never be made to work with older browsers.
  • If you visit the site on Internet Explorer, each page redirects to the home page of the ‘legacy website’ (the first version of my portfolio site, from 2017).
  • When viewing the Broads Web App prototype, a message shows on the screen informing the user that they should view the app on their smartphone for 5 seconds before redirecting the user to the prototype.

What happens next?

Pendragon 3 is online and running smoothly. This is the portfolio I will be using to apply for jobs and graduate schemes with. I hope that I don’t need to make any major changes (i.e. rewrite and rebuild the entire site) for a long time – by which time the site might have a different purpose.

In March 2019 I attended a day-long lecture about CVs and portfolios and in it I remember the lecturer saying that portfolios are never finished and keep evolving. At the time those words didn’t really resonate with me. However, having rebuilt my portfolio site entirely twice and applying several big updates in under 9 months, I know understand those words completely!

Much like Pendragon 2.1, Pendragon 3 was created quickly as a result of some feedback from professionals. Nothing gets me to change the portfolio site quickly quite like hearing some feedback that needs to be addressed and prospects of a job on the table. It turned out that I didn’t get a long internship in the summer of 2019, but upon hearing the feedback from Pendragon 2.1, I decided to act quickly and put other projects on hold to improve the portfolio ahead of applying to graduate schemes.