pendragon.online

Pendragon Online

Portfolio website | HTML, CSS and JavaScript | Always changing

Evolution of the Pendragon Online website

My portfolio website has evolved over the past few years. A website has existed at pendragon.online since February 5th 2017 when the original website was launched as a portfolio for my university interview.

Pendragon is Welsh for 'the head dragon, the leader dragon.' It's a strong statement that reflects my goals in that I want to be a leader in my field.

Today, Pendragon Online is more than just a university portfolio. Over the past few years I have written software, created websites and even photographed events under the name. Any commercial work I complete is done under this name.

The first website

February 2017 - October 2018

  • Created using Adobe Muse between November 2016 and February 2017.
  • Launched February 5th 2017.
  • Made as an entry portfolio to study BSc User Experience Design at NUA.
  • Featured examples of my A level work, which at the time was the latest and best work I had.
  • Showcased a variety of skills including coding (in HTML, CSS JavaScript, C# and Python), graphic design, video editing, photography and team leadership.
  • Content and projects were arranged entirely by category (e.g. 'graphics', 'web' and 'coding') and were not written as case studies at all.
  • Also featured a 500 word critical review of the ‘love or hate’ design of the Ling’s Cars website for my NUA application.
  • No mobile site and not representative of how I produce websites today.
The original Pendragon Online website running on a laptop, desktop computer and tablet.

The home page, welcome page (does not exist in newer versions of the site) and the page about my web projects shown.

The second website

October 2018 - April 2019

  • Coded using similar code to my Year 1 projects, the NB Aurora website and the original Storehouse website between May and October 2018.
  • Launched October 14th 2018.
  • Responsive and features similar bottom-placed hamburger button and menus to the sites it is based on.
  • Featured both of my Year 1 projects written as detailed UX case studies, as well as a review of the WymTrails app (a local AR history smartphone app).
  • Also featured a lot of information about the UX process and its importance (including a short animated infographic), how I conduct usability testing and how I design websites.
  • Updated in March 2019 to add detailed information about my internships in 2018 and more current university projects.
  • Full width images, parallax scrolling sections and hidden navigation were key design features.
  • Replaced in April 2019 with a site that improved on its visual design.
The second Pendragon Online website running on a laptop, desktop computer and phone.

The case study page, the home page (with the animated infographic graphic) and the menu on the mobile site.

'Pendragon II'

April - May 2019

  • Built on the same codebase as the previous portfolio in late April 2019, ready for a portfolio critique in early May 2019.
  • Launched April 28th 2019.
  • Added new visual and navigational features such as carousels, a ‘fat footer’, a ‘sticky’ menu bar (removing hidden navigation), background images for the header and footer area and a ‘mega menu’ to make finding individual pages easier.
  • Added a large ‘hero image’, title and project summary to each case study page. Also has a live version of each case study outcome where applicable.
  • Features exactly the same content as the previous site on the whole with a few case studies updated a little.
  • Allows the user to ‘invert’ the page colours to activate a dark mode. The choice is saved to a cookie so the user’s choice is remembered.
  • Burger menu button on the mobile site is no longer at the bottom of the page, but in the more conventional upper right corner.
  • Removes the ‘.html’ extension from web addresses.
Information architecture diagram for the Pendragon 2 website.

The information architecture of the Pendragon II site. For the first time, pages were categorised to aid navigation.

Pendragon II website running on desktop computer.

The infographic as it appeared on the home page on the Pendragon II site. Also shown is the image in the header area and the new 'mega menu', where portfolio pieces are arranged in categories.

Portfolio review

This portfolio was evaluated by five graphic designers in May 2019 at a portfolio review event. The feedback was:

A group of people graphic.

‘The projects seem really interesting and exciting and the animated infographic is an interesting way to describe the UX process.’

‘However, there is too much content and the content is too long. The page design isn’t exciting enough to make me want to read it.’

‘Where are the wireframes? Surely you wireframe?’

‘The WymTrails case study isn’t an app made by you, rather a review, so I wouldn’t put it on your portfolio website. Put it on a blog or somewhere else.’

‘Who are you? What do you do? What have you done? I don’t know just by looking at your home page.’

‘Are you a designer or a coder? Or both?’

'Pendragon 2.1'

May - August 2019

  • Built on the same codebase as the previous two sites and my Year 1 work.
  • Created in May 2019, launched May 21st 2019, ready for applying for work experience and internships for summer 2019.
  • ‘A minor update’, it addresses many of the criticisms of the previous portfolio.
  • Content rewritten to be 80% shorter than the previous portfolio and more images of the outcome and wireframes added – both sketched and digitally drawn.
  • Case study pages reordered so that the outcome is shown at the beginning of the page.
  • Information architecture reconsidered to reduce the number of pages and reorder case studies into themes.
  • Reduction in the number of carousels used on the home page and grids used instead of show portfolio pieces.
  • Addition of a photo of me and who I am at the top of the home page.
  • Less information on the UX process and my own design process.
  • AOS.js (Animate On Scroll) library utilised to add more visual appeal to the site and pages.
Information architecture diagram for the Pendragon 2.1 website.

The simplified IA of the Pendragon 2.1 website. Several pages were removed or amalgomated and case studies categorised by theme instead of university year group.

The Pendragon 2.1 site running on a desktop (showing the top of the home page), a laptop (showing the middle of the home page) and a detachable laptop/tablet computer (showing a case study page).

The home page and a case study page from the Pendragon 2.1 site, showing how it explains who I am at the top of the home page, the grid arrangement of portfolio pieces and the inclusion of more prototypes on case study pages.

Portfolio review

This portfolio was reviewed in early August 2019 by a UX designer who said the following:

‘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.’

A group of people graphic.

'Pendragon 3'

September 2019 - present

The current website.

The Pendragon 3 site running on various laptops, desktops, tablets and phones showing new features such as user personas, test data and outcomes in case studies and the UX process interactive diagram.
  • Created in August 2019 following this feedback. Launched September 1st 2019 in time for applying to graduate schemes and jobs throughout Year 3 of university.
  • A complete code rewrite. Built on new code, more manageable, less buggy.
  • Case studies rewritten to add detail into the process. Each case study is now broken down into ‘Define, Discover, Develop, Test, Outcome, Evolve’ to show each stage of the UX process.
  • User personas, quotes and data added into case studies.
  • Information architecture diagrams added into case studies where possible to show that skill.
  • More wireframes and high-fidelity prototypes added into case studies to show visual development process.
  • ‘About’ and work experiences page turned more into a CV.
  • Addition of an interactive UX design process diagram on the home page to explain the UX design process in a visual and concise manner (an SVG image that is made interactive with CSS and JavaScript).
  • Removal of some older pieces of work and newer ones added.
  • Removal of carousels and jQuery altogether.
  • Removal of parallax scrolling sections, the mega menu and fewer animations.
  • Images served as WebP or SVG files to make the site faster.
  • Site is fully compatible with screen reader software to improve accessibility.

Evolve

The portfolio site is forever changing. In a year alone it has changed massively. The nature of being a university student is that your portfolio is changing with each new project you add to it or each new piece of feedback you get from having it reviewed.

The portfolio will continue to change with feedback I receive and new projects that I do whilst I am a student. Post-graduation and whilst I am working, the site may need to change and show just the very best projects.

Related

Enjoyed this case study? Have a look at some similar work!

Storehouse Magazine Website

One of the only independent student magazines in the UK, 'The Storehouse Story' includes managing a team to produce the magazine, several websites and other digital tools along the way - as well as a lot of collaboration!

Helping The Visually-Impaired Read

'Expensive, difficult to use and incompatible with some platforms'. This is what visually-impaired users said about using technology to read. How can this be improved?

Redgate Database UI Project

As part of my application process for an internship, Redgate tasked me with designing a new interface for a database, based on user research that they provided for me. This is what I came up with.