While updating my portfolio I took the opportunity to document its conception, design, user testing and subsequent reshaping and build.
Here I show paper wireframes, low-fidelity wireframes and high-fidelity prototypes and you can also click through to them online.
My purpose was to make a website that:
Facing a blank page it is easy for a designer to draw designs that will put web developers to the test. For my own website I tried not to allow fear to restrain me and instead I resolved to design as I ordinarily would but then to do what it takes to implement the design myself as faithfully to the 'paper' design as possible (and I think I managed that).
My intention to build the site by myself would bring me up-to-date with (for example):
Justin gave us peace of mind: we quickly understood that all of his efforts are well thought out, skilfully executed and the results are powerfully persuasive. I was impressed with his ability to consider, balance and manage business aims, creative concepts and practical considerations. Any business would do well to have Justin on board.
For me it is good practice to make a site map first so that I have a good sense of journeys.
One of the very first questions that came to mind is 'what is more important to the type of person who might hire me?' and so in what order should the pages be?
So I asked my testers about this.
This is the initial page structure and at the time it seemed to me to be a sensible way to start.
Although the testers agreed that a home page with very visible links to case studies is important, the case studies themselves should not be buried within the site. They remarked that while it is helpful to follow the home page with an about/introduction page (with problems/solutions and what I can do) it must be followed by the crux of the site.
Here is the revised structure.
Paper sketch wireframes are the best way to start any design in my opinion.
They are quick and allow for a number of variations of layout. They can even be put online and linked to each other interactively.
More importantly they are a great way to think and analyse without expensive commitment.
On the home page I thought it important to showcase some work I am proud of.
However, even the Nielsen/Norman Group have mixed opinions about carousels/sliders.
Most visitors to my websites are not casual passers-by – they are interested for work and business reasons. Secondly, I provide a page that shows cards for all of the case studies and it links to each case study's detail page so there is less chance of content going completely unseen.
Lastly, I took Nielsen/Norman Group advice seriously and steeled myself to reduce the number of case studies to only three.
The least time is spent on paper wireframes but they can give a huge proportion of the result.
Something I did not know is just how much of my face visitors can cope with. Does a photo of me help or hinder or is it just cringeworthy egotism? More on this question later.
Many designers have the experience of being asked to find such and such an image that depicts a very specific scenario. Most times life just does not work that way. Even with millions of photographs available from photo libraries you’ll seldom be lucky enough to find the exact scene you want – unless you hire your own photographer and models.
In this instance I searched for photos that might fit the bill, and then drew them directly into my paper designs.
83% of visitors to my previous website browsed using non-mobile devices.
It is a reasonable assumption that this site should be similar (although I will keep an eye on the statistics over time).
Nevertheless, when building this website I’ve written the code so that it will reconfigure its layout to suit a wide variety of screens. Given the data from its predecessor this website has been designed ‘desktop first’, the designs for mobile devices coming second.
For the sake of completeness and exercise I did a lot of work on these low-fidelity interactive online prototypes.
They were helpful to articulate the journeys a visitor may take and they also helped to crystallise how the navigation might work, particularly for the mobile version.
However, not every project requires so much formatting detail on every page or indeed making up every single page. Some things can be left for high-fidelity prototypes.
(Opens in a new window)
Each project is different and requires differing amounts of effort for every part.
On the one hand it makes business sense to do the least amount to achieve the aims. On the other, kicking design decisions down the road can burden developers and content management system editors and they may struggle to fill in the blanks in a way that is faithful to the design.
Consciously or unconsciously the end user may sense that something is strange.
When testing menus on a phone and tablet it became apparent that secondary menu items must have sufficient space to work properly. In version 2 I gave each case study and each tip more generous spacing to accommodate larger fingers (more on this later).
Having a big picture of a product in situ on each case study home page seemed ok but lacked context so in version 2 I added a client logo and a little explanatory text.
The case studies and tips & tricks pages are the longest by a wide margin. A reader might click the down arrow to jump to the next page or perhaps may appreciate an easy link to a similar page so I added some.
Having sitemaps, paper sketches and/or low-fidelity interactive prototypes can make high-fidelity prototypes more economic because much has been figured out already and therefore fewer iterations are required.
With an agreed page structure, navigation and an idea of outline content, style and brand identity can be tried out, moulded, and finessed and thereafter changed more easily than would be the case if the project had already gone into production.
(Opens in a new window)
Phase 1 of the design of this website was open to evaluation by a group of testers as a high fidelity commentable interactive online prototype.
Here follows a number of the testers' observations that have since informed changes to the site as it now stands (Phase 2).
Opinion was a little divided about colours although there was some consensus that the yellow/brown colourway was a little insipid and that tinting of my portrait did not work. One tester pointed out that the logo had a colour not seen elsewhere.
Many commented that they liked the power of the dark mode colourway but some felt the red on the home page was too aggressive.
There were helpful suggestions about the page order. I've written about this above and shown how it affects the site map.
I had envisaged a one page website that utilises scroll snapping behaviour (and lazy loading of course) and my initial designs had separate 'pages/sections' as introductions to case studies. It became clear from testers' comments that a visitor could jump straight to a case study detail page and miss out on the contextual information given in the introductory page.
In any case, from a technical build standpoint, there is too much content for a single page design to work smoothly on both desktop and mobile.
When a visitor arrives at the home page they are presented with a short logo animation. A tester pointed out that the screen was taken over with this and they were presented with no options. Even though the animation plays only once per session the duration was a little indulgent.
On the home page the case studies carousel was most prominent but it was pointed out to me that the headline (a crucial detail of the site) could easily be ignored so it had to be made less missable.
Placing a block of colour behind the heading would have been an easy fix but that would have been inconsistent with the rest of the site. Instead, this issue was much improved by changing the timing of the loading of the elements on the home page so that, once the intro animation has finished, the headline loads at the same time as the logo and navigation elements, with a slight delay before the carousel fades in. This happens once only at the start of a browsing session.
Within the navigation menu there are user settings buttons to toggle Sound and also Light/Dark mode. It was pointed out to me that the function of the Light/Dark mode button is not readily apparent. This is especially true because the button resides in the (full screen) menu so the user might not notice the effect of clicking the button while the menu is open. They might click the button twice, close the menu and see nothing change.
Testers agreed with what practical implementation proved: on some phones there is very limited space for a menu that shows all options. Phone browsers have notches, address bars and toolbars and the latter two do not hide or shrink on an Apple phone until the user scrolls.
Complicating matters further is that some people have bigger fingers, and some have less agile fingers. It made practical sense to allow more breathing space.
The clearest feedback of all was about my portrait that appears on the About page, the Contact page and a Thank You page (for users who have sent me a message using the form).
I had asked testers how they felt about it. On the whole it seems it adds a personal touch but a using a tint of the background colour was disliked. However the strongest opinion was about the eyes which moved to look up at the contact form when the user hovered nearby. Far from being humorous (my intention) it looked spooky.
Following on from the comments about page order it was noted that the prose on the About page it was not very well targeted to any specific audience and that the list of industries I have worked in was sparse.
I was told that words such as 'Click here' are "my least favourite things ever". I had not considered well enough how web savvy my particular audience is and that I should not explain (at least in this way) how to interact with a web page.
A seemingly throwaway comment made me realise that the testimonials were not linked with any proof of origin.
Confusion about acronyms – even though they had been defined earlier – led me to the conclusion that it is better to spell things out (unless all of your visitors happen to be in the same small niche).
There isn’t usually a business case for me to write code for clients; instead I work with specialists who do this every day.
This exercise was a challenge and helped to embed my knowledge more deeply. I have an excellent grasp of up-to-date html, css and sass and it helps a great deal in communicating with developers. They like to work with me because of my understanding of their work and getting my hands dirty makes me an architect who at least knows how to hold a shovel.
Audio – I've added some audio feedback (button hovers and clicks) but for politeness it is off by default. Users can enable it in the navigation menu. The option to toggle it on and off shows in those browsers that are likely to handle it elegantly.
Dark/Light mode – This is becoming the norm in major web apps and it is something I really appreciate as I always have my operating system set to dark mode. My website should pick up the user's operating system preference but they can toggle the mode as they wish by clicking a button in the website's navigation menu and their preference will stick for future visits.
Optimisation – I've made this a fast loading website by, for example, using deferred loading and lazy loading of images, the tiny webp image format, a smart lossy compression png format and also by serving smaller images for mobile.
Miscellaneous I've done a few less visible things like using Open Graph for search engines and social media, spam catching contact forms and I've also obscured contact information from bots and spiders.