Yesterday the Sea Urchin Charters iPhone App went live in the app store, so I thought I’d take some time to write up a case study for anyone who might be interested in the planning and design behind the app.
As a quick side note, the development of this application was handled by Kriss Bennett of Createful. Thanks Kriss, great job! Now on to the case study…
The Sea Urchin iPhone application was really pretty straight forward. In essence it lets people who are interested in chartering Sea Urchin (a boat captained by my client Mick) find out a little more about exactly what’s involved in the day, costs, videos, availability, weather forecasts and tidal information. You can download the app from the iTunes store to take a look for yourself.
Stage 1: Information Architecture
The first step was to organize the information on the homescreen of the application.
Mick told me the sections he wanted the app to have, so I sat down with a pen and paper and started to think about how these could be best organized to allow users to quickly access each section of the app from the homescreen.
After a quick bit of sketching I decided that there were too many areas to simply list in one menu without the user having to scroll to see all of them. Ideally all the areas needed to be visible to the user without any need for scrolling. With that in mind I decided to break the navigation up into two sections. One for the ‘Availability’, ‘Weather’ and ‘Tides’ information and another for the more text heavy based pages. I used the conventional black bar at the bottom of the app (which many other apps use) to house the ‘Availability’, ‘Weather and ‘Tides’ icons, and then settled on a simple button style navigation for the links to the other sections.
Prior to starting the wireframes Mick had also sent me a few images of his boat and also some happy customers snapped with their biggest catch of the day. I felt it was pretty important to include some of these images, so there needed to be a space devoted to that on the homescreen too. My idea here was for the images to fade in and out in a nice smooth cycle.
Once I’d settled on a layout for the homepage I opened up my wireframing tool of choice (Omnigraffle) and reproduced the sketch to then present to Mick. I also produced wireframes for the ‘Prices’ and ‘About’ screens of the app to show Mick how the ‘content style’ screens would look.
The ‘Prices’ page was a crucial one to wireframe in my opinion. The content Mick had sent across for me to work with included all the right information, but it was buried away amongst a mass of text, so actually finding all the different price options was pretty tricky. I solved this problem by clearly highlighting the prices and costs for chartering the whole boat in their own clearly defined blocks.
Stage 2: Icon & Application Design
With the wireframes signed off I started work on the icon design. Initially I went with an all blue theme, but after some input from the client I worked in an orange tone to match the clients existing website.
The icon itself went through several iterations until we reached the fishing hook and waves which was immediately chosen by Mick. First off I went down the route of having a boat in the icon, then tried a couple of approaches with a fish silhouette and rod, but I knew we were on to a winner with the hook and waves combination.
With the design of the homescreen of the application I wanted to keep things really simple and focus on the navigation and images of the boat and past customers. Since this screen was really only a means of navigating around all the content, that had to be immediately obvious.
I was also keep to use some nice iconography to draw the users eye to the more key parts of the app – the availability calendar, weather and tide info.
Here’s a look at the designs for some of the screens:
Stage 3: Development
Once we’d signed the designs off (which happened very quickly might I add!) it was time to save out all the images for iPhone 3 and iPhone 4 retina display and then send them off to Kriss at Createful to develop.
Prior to the development we’d discuss the best way of integrating the Sea Urchin availability calender along with the weather and tides info.
A mini version of Mick’s availability calendar was able to be linked to from within the app itself, there for not interrupting the user journey by closing the app and opening Safari instead. We also included a button to enable users to switch to the more detailed view of the calendar as well.
For the weather we were able to display the Whitby weather forecast straight from the Met Office website within the application.. Obviously this updates on the fly so is always the latest forecast – something thats very handy for a fisherman!
Unfortunately with the tide information there was no API which we could tie in with the app. Because of that we had to resort to linking to the relevant section of the National Oceanography Centre website.
Finally for the videos we were able to link to the mobile version of Youtube and pull in all the Sea Urchin videos enabling users to view them within the app.
Overall I think both Kriss and I produced a great looking app that provides everything that someone who is interested in chartering the Sea Urchin boat would need to know. I’d love to hear what you think of the design and/or the process in general in the comments below.
Many thanks to you both, the app looks awesome. The end product is very professional to match your working practices. I would recommend your services to anyone.