App Development – The Wireframes

This is the third post in my App Development series. Last week I covered the design document, this week I’m moving on to wireframes and workflow.

Why Wireframes?

Wireframes provide you with the opportunity to plan functionality and layout without worrying about how the end product will look. They’re particularly useful because they force you to think about function over form.

How to create Wireframes

There are lots of tools available for creating wireframes. Everything from web-based tools such as Balsamiq, through templates available for your favourite design software, to pencil and paper. You can make the pencil and paper technique even easier by purchasing a template sketchbook or stencil.

I think pencil and paper is a very good solution since it allows you to make decisions without being influenced by the controls you have available. However, I’ve opted for a software solution and purchased the fantastic Blueprint for iPad. The iPad is an excellent fit for wireframing. Dragging around components and having the ability to rapidly change your mind is a great boon when its comes to wireframing. I also like that it can be a more relaxed process – sitting on my couch, drinking coffee, wireframing the screens on my iPad.

The Wireframes for my Coffee App

I’ve broken down my wireframes into eleven separate screens. I’ll give you a bit of an explanation for each one.

Coffee Cupboard

The Coffee cupboard shows a screen with multiple images. Each Image will represent a Coffee. Also from this screen you can “Add a Coffee” or “View a Coffee”.

Add Coffee

Adding a Coffee will involved entering the Coffee name, country, region, and farm. The user will also be presented with a choice of image (displayed in the cupboard).

My Coffees

The “My Coffees” screen will simply be a list of all of the Coffees the user has recorded.

View Coffee

Viewing a Coffee will show the details of that Coffee. It will also give the user the ability to edit the Coffee, create a new tasting note, edit preparation notes, or share the Coffee.

Edit Coffee

Editing the Coffee allows the user to rate the Coffee (although I may pull this back to the “View Coffee” screen), edit and save the details, delete the Coffee, and edit the tasting notes.

Edit Tasting Note

The purpose of editing the tasting note is to allow for the deletion of a word from a tasting note. This is simply a list of all of the words from the tasting note.

Add Tasting Note

Adding a tasting note allows the user to add words that represent the flavours they can taste. This is done by adding individual custom words or by selecting pre-determined words from a wheel. The pre-determined words will be populated with commonly used terms along with words that the user uses often.

Edit Preparation Notes

Editing preparation notes simply allows the user to edit a screen of text to record preparation details. I may expand this further to allow the user to record what they do each time rather than just editing a single set of notes.

Share Coffee

Sharing a Coffee gives the user access to the option to share by Twitter, Facebook, or Email. These are just preliminary ideas.

Search

The search screen lets the user search for a specific Coffee name, a rating, or by selecting words from existing tasting notes. I may also include country, region, and farm.

Search Results

This displays a list of all Coffees matching the search criteria.

Workflow

In addition to creating the wireframes, a workflow is also useful. The workflow helps to visualise how the screens are linked. It is essentially the users journey through the Application. This will be useful when it comes to developing the App.

Next Week

Next week, designing the screens. This is the fun part. I’ll be putting together some basic designs for some of the key Application screens. These won’t be the final art but will give me enough assets to begin developing the App.

This post is part of a series that will follow the design, development, and release of my Coffee App. You can view the previous posts here…

Part 1 – Doing it properly
Part 2 – The Design Document
Part 3 – The Wireframes (You are here)
Part 4 – The Artwork
Part 5a -The Code (Xcode, GIT, and Core Data)
Part 5b – The Code (Coffee sharing and Camera functionality)
Part 5c – The Code (A change in workflow)
Part 6 – The testing
Part 7 – The Final Artwork
Part 8 – The Marketing
Part 9 – The Launch
Part 10 – The Numbers
Part 11 – The Postmortem
(Bonus) Part 12 – A review of the process

(chicken wire image courtesy of nanimo)

11 Comments

  1. chrismwaite says:

    App Development – The Wireframes – http://www.bytesizeadventures.com/blog/a… #iDevBlogADay

  2. RT @chrismwaite: App Development – The Wireframes – http://www.bytesizeadventures.com/blog/a… #iDevBlogADay

  3. andrewnicolle says:

    RT @chrismwaite: App Development – The Wireframes – http://www.bytesizeadventures.com/blog/a… #iDevBlogADay

  4. GeorgeSealy says:

    RT @chrismwaite: App Development – The Wireframes – http://www.bytesizeadventures.com/blog/a… #iDevBlogADay

  5. rizergames says:

    RT @chrismwaite: App Development – The Wireframes – http://www.bytesizeadventures.com/blog/a… #iDevBlogADay

  6. BrianHobbs says:

    I’m excited about the app. I myself am a coffee lover, and I think I could benefit from using this.

    I like the idea of searching by different parameters. Would you be able to add multiple search options? By that I mean, could I search for something bold and nutty from Brazil? That would be cool.

    Also, would there be some way to search some kind of multi-user-generated database for coffees? I don’t know how complicated that would be, but it would be neat to see “most popular coffees” or something.

  7. Chris says:

    @Brian

    Thanks for comments and for the vote of confidence.

    I’ll definitely add the ability to search across multiple criteria. The global user generated coffee database is a really nice idea – I’ll definitely give it some thought, thanks.

  8. Mark Cook says:

    Thanks for the series! I’m looking forward to seeing how your app turns out as well as learning your process. One suggestion on Sharing I’d like to make: add the ability to share with other owners of your app their ratings and comments. You could even summarize rating averages and distributions. This might be something akin to Yelp and adds a unique feature to your product. We coffee (and iphone) lovers would probably really like that feature right within the app.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>