I blogged about my Windows Phone Design Session with Aruturo Toledo a couple of weeks ago. I took his advice on board for Find A Costa and it was released to the market a couple of days ago.

I implemented most of Arturo's suggestions, and I thought I would share what he suggested, and what I implemented. We spent a quite a time discussing icons, and search terms for your app in the store, so you can make it stand out, and help people find it.

When I did the original icon, I did a screen capture, and then spent what seemed like hours trying to tidy up the edges, so it didn't look jagged. I used the excellent paint.net, zoomed in, and made pixels at the edge transparent. I thought it didn't look too bad, but still a bit 'jaggedy', but I couldn't seem to get it any better. The original splash screen is:-

 Arturo took the same image, and using Expression Design showed me how to cut out the image. I changed the splash screen to use this image, and this is the result - I think you must agree it does look sharper.

Next we took a look at the 'main' screen. This is a list of the 10 nearest stores, nearest first. It shows the distance, details of the store, whether it is open or not, and icons to plot routes, and add to favourites. The original details screen was:-

Again, the image looks a bit jagged, so we can fix that. As I mentioned, Arturo gives images and icons a lot of importance, and he suggested that the icons for driving, walking and add/remove from favourites would look better without the circles. He also pointed out that although I was using the 'standard' icons for add to favourites, the toolbar icon for favourites was different.  So the next step was to change the icons.

Find A Costa shows you if the store is open or not, but it doesn't really stand out, so we decided to add a splash of colour to help highlight it. Finally on this screen, we did a bit of work on the top panel, changing the background to a solid colour, as opposed to our image background, and adding a subtle line to separate the header from the list. The resulting screen now looks like this:-

Next we looked at the details screen. As time was pressing on the session, we didn't spend much time on this, but Arturo did mention the font for the opening times. I explained I used a fixed font so everything lined up correctly, but I was also not particularly happy with it. So after a very useful session with Arturo, I looked at the details screen on my own, using the insights that Arturo had given me. The existing details screen looked like this:-

The first 2 steps were easy enough - replace the icon, and make the header match our main screen. That was soon done. Next, look at the opening times. I must have had a brain-blockage when I did this originally. Of course a fixed font will line up - but so will putting things in a grid, using the rows and columns.

I was never really happy with using check boxes to indicate whether or nor a store had an amenity, so learning the lesson of the main page, I decided to use the same indicators from the main screen, for open and closed. This is when I decided to add a tick and cross to the icons, just to emphasise the point. I also used the same driving/walking icons from the main page, and finally added an open/closed icon and status to the screen. The final result of all this is:-

Again, I think this screen looks much cleaner than the original. Finally I looked at the search screen. The only real difference here, was to make the header panel the same as the main page, and the details page.
   

Again, I think it makes it look much cleaner. I think seeing the before and after shots really illustrate this point
 

The design session has really made me think about the 'little' things, particularly icons and images. I think the finished result looks much better than the original.

My thanks go to DVLUP for sponsoring the prize, and of course to Arturo Toledo of Toledo Design - I really got a lot from the session, and would advise any Windows Phone developers to re-visit their design critically, and possibly use their DVLUP points to get a session of their own.

Originally posted 17/Apri/2014