Index page iterations for a tourist information micro site about cycling in Copenhagen – a mini case study about iterations and user testing.
Don’t worry, it opens in a new tab 🙂
The target audience
The target audience for this project is tourists in Copenhagen. They are more likely to bring their mobile phones (possibly tablets) with them, rather than their PCs. Therefore we took a mobile first approach in the design process.
User interviews and user testing
After wireframing and sketching, we took a few user interviews, to get some initial feedback. Those revealed that the initial version had many flaws.
The image navigation for the main content looked more like articles. Users are likely to ignore them while trying to find the actual main content.
The banner and menu was taking up too much space, and weren’t really necessary. We removed them, to bring the main content selection above the breakpoint for scrolling. With some visual tweaks, we also enhanced the main content selection area.
Then we used 5-second tests on usabilityhub.com to get some feedback about the new screen. The feedback was generally positive, people figured out what the page was about, where they were in the scheme of things, what services were provided, etc. There was one weak point; navigation. It appeared that the buttons intended for navigation were not obvious enough. So we gave them some color fill, and rounded corners to give them a more “buttony” look.
Responsive design iterations
Later on, I took the design further and created more iterations for the index page on tablet and desktop.
First, I used a layout that’s similar to that of the desktop version’s, but then decided to keep the design of the mobile version. Assumingly, the target audience will use mobile and tablet, so it’s better to use the same design on these two platforms, so they are familiar with the interface.