As part of the redesign for the new site, the main thing that I really wanted to change in terms of the look was the front page.Based on my experience and discussions with staff about what our users look for when they arrive at the site, I had an idea of what information should be on it. (I didn’t want the type of website where what people look for is not what is on the front page.)
While we might have had the information people were looking for on the front page of the old site, it was too cluttered.
I also always found it weird that things didn’t quite align. Not sure if that was on purpose, or if it was a code issue.
The Goal
Apparently, many people also have this view that the process of getting stuff is hard and slow, but that’s not true at all! With the new front page, I wanted to show that it’s a really easy process.
Most users would come to our site to look for 4 things:
- how to apply (and the application form),
- how to request items,
- how to access requested items, and
- how to use the items they receive.
For the purpose of the front page, I decided to focus more on the process (meaning the first three points), since that applies to all of our users and let the last point be answered under the technology section of the website.
The Mockups
By looking at some other well-designed and popular sites, I got the idea in trying to convey the process as 3 easy steps, then added in one or two links as additional relevant information.
This idea was literally put down on paper through a basic sketch.
The sketch has three parts, because I was also thinking about how to make it responsive.
To get the basic layout, I wrote up some basic text, stuck it into the front page and took a screenshot.
The sidebar was not only the news, but also the website search, which I ended up leaving on all the pages since it was not in the header.
When I did the first mockup, I took the idea of the three step process further by simply using numbers to represent the steps.
While clear, it seemed a little boring, so I decided to make it more visual with some icons, producing the second mockup.
The colour of the numbers and the icons is a slight gradient based the blue, which is the inverse of the yellow in the logo (which marketing included as part of the colour scheme of the new branding).
I have an opinion of which I prefer, but I wanted to get some student feedback.
Guerrilla Usability
While ideally you test with people in your target audience, it can be difficult to test with remote users. Our users have some specific needs, but the goal was to get feedback on whether students “got it” just from a quick look, so I believe getting students even if they may or may not use our service would provide enough usability feedback. (I was also working on a bit of a tight timeline.)
Methodology
It was a simple set up where I borrowed a big whiteboard, wrote a one liner (along the lines of “Help us design our website with 5 minutes, and get chocolate too!”), and taped the two mockups to the board in the concourse area during the lunch hour.
I asked students as they were passing by to simply answer 2 questions for me to get chocolate in return. (Strangely I got students who were willing to answer my questions and then refuse the chocolate!)
Results
The results were not too far off from what I expected. However, there were some interesting comments.
Numbers Mockup
- Positive
- cleaner, simpler / easier to read / more organized
- gets the process across better
- Negative
- forces you go in order vs. focus on the part you want to know about
- 1 student said it makes it look like an ad (definitely didn’t think I’d get that comment)
Using Icons
- Positive
- looks nice, friendly / more visually appealing, stimulating, relatable
- stronger imagery / don’t need to read to know what to do
- easier to remember
- Negative
- need to think about relation of icons to words / some think the icons are confusing
I will not give you actual numbers (because they’re not statistically significant as they say), but more students preferred the icons, and what I got out of it was that using the icons meant that the icons themselves would appeal to the more visual ‘learner’ and the text could appeal to the not so visual person.
With the numbers, it only appealed to the non-visual people, and the visual people got nothing out of it.
Conclusion
It was decided that we would go with the icons in order to appeal to a greater number of people, not only because it was the majority, but also because it would appeal to more learning (or interpretation) styles.
Since part of the feedback was that people did not understand the middle icon, we changed it. However, it wasn’t until a coworker pointed out that the top and bottom icon refer to the big word (the verb), but the middle icon referred to the smaller text (the noun part) that we finally knew how to change it. The middle icon then got changed from focusing on different formats to choosing the formats.
This is the final (and current) version complete with the new website header.
