The first step was to examine the content of the existing website. Previously, none of the pages were grouped by theme or topic. Each page was isolated from the other(s), and users would have to go back to the landing page to access the complete list of topics to choose from. My goal here was to create a list of information elements on all the pages and classify them by topic and sub-topic. I created headings and subheadings, and categorised all the text and media files. After labelling and categorising all the existing data, I approached the director of the organisation to see which topic(s), if any, needed to be updated. 

 

In the meantime, while the content was being updated, I conducted usability testing to identify all the existing pain points. 5 participants, separately, were asked to explore the website and speak out loud whatever it is they’re thinking and feeling as they experience the website. My goal was to find out:

• How do users find information?

• Which navigation components are utilised?

• Which navigation components go unnoticed?

• Which navigation components are avoided?

 

Perhaps the biggest challenge during the usability test was to make sure users focus more on the navigation and flow of the website than the interface and design. 

 

The results revealed that users: 

• Feel overwhelmed as soon as they arrive on the landing page

• They don’t know which 'box' to focus on

• They felt really frustrated that there was no header/navigation on top of the page and that they had to go back to the landing page to access other parts of the website 

• 3 of the 5 users did not notice (and therefore, access) the vertical navigation bar on the left

• The colours and the design "don’t make any sense"

• After choosing the ‘box' they wanted to access from the landing page, users quickly abandoned searching/choosing and instead just randomly chose any 'box' they felt like

 

A consensus of all the 5 users was that they still don’t know much about what our company does. At the end of each test, I would ask participants if they have a better understanding of what Shehri does than when they did before accessing our website. "They make animated videos on laws of the country”. And this statement was said out loud more as a question than an answer. So I was able to identify the problem(s) that needed addressing. 

 

The next step was to create an information architecture for the website. 

 

The feedback from the usability tests showed, very clearly, that even after going through our website, the participants did not know much about who we are and what we do. And because these participants were not familiar with our company prior to the testing, I believe they left with a very bad first impression. 

 

First order of business was to create a logical flow of the website; to categorise and label pages and information in an intuitive way. The reason I went with using the closed card sort method for this task was, in my initial meeting with the project manager and the CEO, they explicitly said that "Helpdesk" and "Videos" are two of our most important features. Accordingly, I made separate pages for each, so they’re easily accessible by a single click. "Contact Us" was going to be a separate category as well. All the remaining pages were to be sorted into two categories: About Us and What We Do. The results of the card sort were unanimous, and the entire process of card sorting, first time for the entire office, was really fun to conduct! 

 

In addition to the existing pages and information, I presented a case for adding an additional feature (and subsequently, a separate web page): Shop. I had noticed that we had merchandise lying around at the office: notebooks, pens, tote bags, posters, notepads made from recycled paper etc. If the website were to create a new brand identity, I proposed that we make available our merchandise to people as it would: 

• Make people visit our website

• An opportunity to connect with our target audience 

• Because we make different kinds of illustrations and animations, there are a lot more opportunities of creating new merchandise 

• We could integrate the shop feature with our app (currently under development): users of our app would collect 'Shehri points' through our app (by sharing our videos, for instance), which they could in turn use to purchase our merchandise
   

After adding the Shop page, all the categories and sub-categories were complete. Because this is a relatively small website which would mainly serve as a catalogue of our work, I decided to use hierarchical navigation to make it quick and easy for users to access the information they are seeking.