Developing the UI with Sketching

Something we’re massively keen on is sketching. Its the quickest way to get ideas out of my head and onto a page, and whilst I’m doing it I’m debating and justifying the decisions I make along the way. Its an incredibly good exercise for honing ideas quickly.

So today I began sketching UI ideas for the various sections of the site, having first digested the IA and User Research work we’ve completed.

The images below show the sketching I’ve been doing  whilst looking at the different display options for handling events. We need to give the user an initial snapshot of the day’s events, whilst enabling them to look at a week, a month or a custom time period. We also want to offer them the option to filter by type of event, or the venue.

So in this first image  I’m looking at a mobile view, and how users can interact to view the events as they wish. There’s ideas coming out such as colour coding events by venue. I also started with thumbnail images for each event, and then thought about download overhead, and so made a note that we could use a date card device there instead.

Events---Mobile

The next step was to take the ideas to the desktop view, and see how we could configure and add to them there. So there’s two ideas on how to treat the elements from the mobile view. You can see I’m exploring the options for displaying the filter – whether in a horizontal configuration that closely resembles the mobile UI, or in a sidebar so its very visible for the user. I’ve considered whether there will be images for each event, and what to do if there is not one. And lastly, how to use the colour coded tabs to indicate the venue for each event.

Events---Desktop-1

Events---Desktop-2

All a work in progress, but worth sharing so you can see how I quickly generate, discard and progress ideas. The next step for us is to test these ideas with users, and see how they respond.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.