1. Assessing the old site
I started by assessing the existing site from a usability point of view by making note of any obvious issues and easy fixes. The main areas I assess are navigation usability, content placement, readability of text and language style, imagery and illustration accompanying any content.
Google analytics helps me identify user behaviour, popular pages and traffic routes through the site. Using acquisition data I can see which channels traffic arrive through and make suggestions where appropriate. On this project I mainly focused on the flow of traffic. We were particularly interested in which pages users navigated to and from, this would show us the order in which the content is consumed. This helped me inform how we placed in page links later on in the project.
Once we had a good overview of how the current site was performing we presented our findings to the client. Styled elements, user journeys and wireframes were also presented to help start a conversation around the look, feel and flow of the site.
We used pre determined personas from the client to identify the types of users and the tasks they were visiting for. A draft sitemap was created and the content for each page was added in a hierarchical order. This gave me a base to begin working on a wireframe. After discussions with the client we had a sitemap we could test.
3. Tree testing
We chose to use Optimal workshops ‘Treejack’ to run a tests on the information architecture of the site. I sent out a series of questions asking users to navigate through a simple menu structure and choose where they think they would find a piece of content.
Tree testing is a usability technique for evaluating the findability of topics in a website. It’s also known as ‘reverse card sorting’ or ‘card-based classification’. Tree testing is done on a simplified text version of your site structure – without the influence of navigation aids and visual design.
The results gave me individual user paths to follow so I could see where content couldn’t be found or was expected to be. Tree testing is also a good way of seeing if the names of your navigation labels are understandable.
4. Wireframes & prototyping
By this stage I had a simple set of sketched wireframes completed which was shown to the designer and developer for input. These mocks were taken into Axure for some rapid prototyping and then a higher fidelity click through prototype was produced. This prototype became a point of reference for internal and external stakeholders. Tweaks to the prototype were made as we went along, even during development enabling us to quickly test functional ideas out.
Using versioning for everything produced on this project was important, even the wires and sitemaps. We did this by using a custom made project tracker, a url which had a feed of the project progress, downloads and links to the most recent versions of the production.
The final site can be seen at www.jobsataramco.eu