Get to know the prototype

These are the pages available in the prototype:

Note that this is a university assignment and the app has not been developed and is unfortunately not available in the App Store or Play store.

Competitor Research

When I researched horse apps, I found that there were a few apps that did more or less the same thing that I had planned for The Farm Guide. These were all in English and although they were quite similar, they also had some differences. These are the three apps I reviewed:

1. EquiSketch Records

EquiSketch Records in Apple's App Store
Price: $4.99

When reading about the app in the App Store, it seems like a very handy and professional app. Unfortunately, when looking at the design, this doesn't give off the same impression. With white type on a background image of a grass field, the text is hard to read, which makes the app less user friendly. The design feels very random and unprofessional.

The app focuses on keeping track of every aspect of the horse's life, with information about nutrition, dental care, medication, farrier work and so on, but this app also gives the opportunity to manage riders if you're giving lessons, and shows if you compete with your horse.

Although the app mentions options to manage several horses if you own a farm with several horses, it still focuses on each horse's life and not how the farm is run overall.

2. PocketStable

PocketStable in Apple's App Store
Price: $1.99

This app does pretty much the same as the first app I reviewed, but seems less comprehensive. This app lets you register vaccinations, farrier visits, dentist appointments, worming schedules and your horse's birthday. The app will send you a notification to remember all these things.

The PocketStable app's design, although quite simple, is a lot more user friendly than the first app's design. With the black text on the white background it is easy to read all the information. Although this app has better design than the first one, if I was going to choose one of the two, I would still go for the first one (unless price was an issue, as this one is a bit more expensive), because it is more comprehensive and gives you more options to keep track of everything in your horse's life.

3. Horse Keeper

Horse Keeper in Apple's App Store
Price: $4.99

This app is also an app developed to keep track of everything that comes with owning and taking care of a horse. It has a lot of the same features as the two previous apps I reviewed, but this one also brings sharing information with others to the table, which could be handy.

Horse Keeper will let you record a lot of different information about your horse: everything from its weight to its parentage. It lets you make notes and just as the PocketStable app, this one will give you reminders of when it's time for any service.

Just as with the first app I reviewed, this app's design is not very good. The colors bright blue, black and white don't go well together. The blue headings on the horses page are too bright and makes the headings stand out too much compared to the information you are really interested in. On the black background the blue makes the text hard to read, which can be very annoying especially if you're trying to read this on a bright day. Except from the colors, the app's design is easy to use, and as it follows design principles that are well known in Apple apps, most users will find it fairly easy to use.

The Farm Guide's difference

The Farm Guide, although made in English for the sake of this university project, will be made for the Norwegian audience, and this is the main reason why this app is different. On the Norwegian market there are no such apps as The Farm Guide, and horse owners I've talked to all tell me that this is something they would find very useful.

There are several reasons why there's a need for an app for the Norwegian audience. Firstly, it's a lot easier for the horse owners if they can use this app in their first language with the brands of feed and medication that they know and use. Secondly, different countries have different traditions and do things differently when it comes to handling and boarding horses, and this app will be tailored for the Norwegian farm and horse owners.

Another major difference is that this app is developed with the farm owner or the person running a farm as the main target audience, where most of the other apps are targeting the horse owners. This does not mean that the app will not be useful for horse owners as well, because a lot of the information that is useful for the farm owner will be information that the horse owner appreciates having handy as well.

The Farm Guide's design is also more appealing than the design for the other horse apps, and compared to at least some of them it's more user friendly.

Process Work

My process started with deciding what the app was going to be about. After a few ideas, and a few days of realizing that "that's already done", I came up with the idea that an app that helped with the running of a horse farm would be very useful for both those who owns or runs the farm and for the horse owners.

When the idea first came to me I started with writing down my thoughts, and tried to find out what would be useful to have in such an app. I'm on a Norwegian online message board for people who are interested in horses, so I decided to ask there if people thought an app like that would be helpful. I also asked whether they had any ideas as to what would be useful in such an app, which gave me more ideas and helped me turn the idea I started out with into something that would be useful for the target audience.

The feedback from the message board was 100% positive. Everyone thought it was a good idea, and a few people also contributed with some ideas about what would be useful in such an app. That's where the idea about including information about medication and trail rides, amongst other things, came from.

After doing the research and deciding that this was a good idea to start working on, I started making some sketches / wireframes by hand. The main point of this was to find out how the interface would be and how the information would be laid out on the screen, while having the fact that this was an app for the mobile market and not a normal website, in mind. Here are a few of the most important sketches I made:

Sketch / Wireframes for the home screen Sketch / Wireframes for the about a horse page

After making these wireframes I wanted to decide on the colour scheme for the app, because I find it easier to work out a design more in detail after things like colours and typography is more or less set. To make a colour scheme I normally use the website Colourlovers. To see the colour palette I ended up with, click here or at the picture of the palette. I decided on these colours because they are colours that I associate with farms: The green from grass and fields, and the brown from buildings, trees and fences. I stuck with this palette, and have been using all these colours in the design, except from the lightest shade of green.

Image of the Colourlovers palette

I decided that I wanted to use an elegant serif font for most of the text, except for where there would be larger amounts of text. The serif font I used is called Poly from FontSquirrel and for the larger amounts of text I used Helvetica Neue, and Tahoma for the users who don't have Helvetica.

After deciding on this, I started up Photoshop to do some more sketches, this time to work out the app's design. I was struggling a bit in the beginning, and eventually decided to start over, and to begin with a simpler page. Here are two of my first sketches, were I tried making the Home page by following the wireframes I made, but I was struggling to use the colors in a way that worked:

First design attempt Second design attempt

As soon as I started over, starting with the login page this time, the design fell into place fairly quickly, and I made mock ups for a few pages:

Design mockup login page Design mockup horse page Design startup screen Design mockup home page

These are obvoiusly very similar to the finished prototype, but there are some differences. The most notable difference is possibly the beige header that is present on every page of this mockup, that is only present on the home screen in the prototype. The reason for this is simply that I am used to thinking web design, where it is important to have the website logo on every page to let visitors know that they are still browsing the same page. With a native app (as this is intended to be) this isn't as important because you won't move out of that app as easily as on a website. I realized this after starting the development of the app, and decided that in order to have more space for information on the relatively small smartphone screens it was better to remove the top field with the logo.

The page that changed the most after this, throughout the process of working on and developing the prototype was the horse page. These sketches show the development of this page:

Design mockup horse page 1 Design mockup horse page 2 Design mockup horse page 3

After doing this design work, I was ready to start developing the web app, but instead I decided to make a design mockup for the website as well. The mockup is pretty much the same as the finished website, only with minor changes (click for larger image):

Website design mockup

At this point it was time to start developing the app. At first I was planning to use jQuery Mobile, but when looking into it I found that I didn't like the way the css styling worked when using jQuery Mobile. In addition to this, I found that a lot of the apps that use jQuery Mobile look very similar and a lot of them do not look very professional. Because of this I decided to rather use HTML5 and CSS3 to develop the app, and implement jQuery where that would be necessary.

Because I decided to not use jQuery Mobile, I faced some challenges. Apple's older products don't handle elements that are fixed on a web page (using position:fixed) too well, and I wanted to use this for the menu at the bottom of the screen. To make this work and still allow scrolling of the page I used a jQuery script called iScroll, that works perfectly on the older iPod touch I used for testing.

When developing this prototype I've been focusing on the newer phones most people have today. The trend moves towards bigger screens and screen resolutions, and the pressure to always have the newest phone means that most people will have phones with rather large screen resolutions. Seeing as this is only a prototype as well, I've been focusing on making the prototype work on these devices. I have been testing the prototype on both my new, cheaper Huawei Android phone and my 3 years old iPod touch, and it works well on both of these devices.

Along the way, while developing the app, there were a few things that I struggled with. One of these things was that the normal HTML checkboxes that are so commonly used on websites, and that I wanted to use for "Keep me logged in", were very small on the mobile devices. I found out that I could use JavaScript to use an image for the checkbox, which solved the problem because I could then use a larger image for the checkbox. But this gave me a new problem: There is no way to align the label with the checkbox except for the default where the label and checkbox are aligned along the top. This didn't look good, so I ended up writing the text as normal text instead of a label, which solved the problem. Although it might not be best practice, I decided it was the best choice for this web application, which after all is only a prototype. I also used a jQuery tutorial for the tabs on the Horse page.

The calendar was another challenge to develop. I tried to find a calendar I could use that would be more like what I had imagined than the one I ended up with, but couldn't find any that I could make work, so I had to settle for a plain HTML/JavaScript one. In the real product, the calendar would be interactive and have lots of different functions, explained on the main page of this website, as opposed to the one in the prototype.

The one challenge that I didn't resolve is that it seems like the file uploader (using input type file that I've used in the registration form and the form to add/edit information about the horse doesn't work in mobile web browsers. There wasn't much I could do about this, and since these registration forms don't do anything except take you to the other pages of the application prototype it's not a big issue.

There were some pages that I decided not to develop because of time and because I did not feel they were essential to communicate the use and user experience of the app. This mainly goes for two pages: 1. The profile where a person who owns or runs the farm can change information about the farm, and where they can add or remove users from the farm (when a farm owner is logged in there will be a link to this page from under the "sign out" link on the home page) and 2: Although the horses' pages are sorted after their stall number, so it would be easy to walk through the farm and past the stalls and go from one horse to the next on the farm, it would also be helpful to be able to see an alphabetical list of all the horses on the farm, to make it easy to find the information about a horse fast if needed. This list is not developed.

Pozible?

I considered making a Pozible campaign for the app, but decided against it. Although my research shows that there is interest for such an app as The Farm Guide to be developed, I know that I will not go through with it at this point in time. There are several reasons for this. 1: I do not have the necessary skills to make such a complicated app, that would have to use a database to store all the information. 2: Although I did some research, I would want to do a bit more, especially amongst farm owners, before really considering starting the process of deveoping the app and particularly before asking people for money to support the development. Because of this I chose to not make a Pozible campaign for this app.