Gibu Bestratingen
For paving company Gibu I designed and developed a website that shows their most relevant projects, explains their strengths, experience and process and let's potential clients get in touch.
Gibu chooses for a very personal and flexible approach while not willing to be labeled as either too expensive or exclusive. This and various user observation sessions resulted in a simple site that suits most needs.
I made a full functioning redesign of the current (still live) website, using the earlier test results.
View 2022 Concept
Roles and Responsibilities
I was responsible for the entire project;
- client interview
- user interviews and observation sessions
- interaction- and visual design
- development of custom Wordpress theme
- customization of Wordpress back-end
- user manual and after care
Final Product
Homepage on both desktop & tablet and separate website for smartphones. The decision for a separate site was based on user research showing that the tasks performed by users on smartphones differed significantly.
Process and Methods
I started with the target audience/user and observed them using and searching for competitors' websites, accompanied by questions to determine how and what information they expect. For these sessions, we used existing clients of the company.
Left: one of over ten pages of notes from observation & interview sessions. Right: collecting requirements from the observation & interview notes. In the middle one of four different sketches of the homepage.
First prototype. Contrary to the Schove project (also featured in my portfolio), I tried remote testing through surveys with images. This didn't work out as expected with the 45-65+ aged demographic. We agreed to visit users again.
Redesign after first prototype testing results with users in face to face sessions. The project detail page isn't shown above, but passed the user tests just fine.
The three most different of ten style tiles I created. The client chose the middle one (tile 7) to continue.
Variations on tile 7 featured above, with different background colors.
Toughest Challenge
The design process was quite easy; the target audience observation session provided me with a load of insights of what the user expected. The remote prototype survey provided some small changes, a usability test of the full site still has to be done though.
What I'd do Differently
I tried remote testing, but it didn't work well and got some participants confused. It seems hard for people not used to wireframes to envision how it should work without explaining them face to face.
Although I explained the purpose of the survey, how the wireframes weren't representative of the real website in terms of colors/images and tested the survey thoroughly with two test participants in the same demographic, four out of six sets of participants were confused.
Tools Used
- Word: documentation, client manual (all as .pdf)
- Trello: checklist and project planning
- Illustrator: wireframes & style tiles
- Notepad++ & Dreamweaver: custom theme development
- Xampp: local hosting
- Wordpress: CMS + plugins (Advanced Custom Fields/Arconix shortcodes)