LAC04: Wireframing an App for MVP01

0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×

Having ascertained that I cannot use an app template for a Xamarin project, I decided to wireframe my app to get an idea of flow and rough look & feel. I generally find that wireframing apps (or any project) before starting to develop helps focus me on developing the right things first, and stops me wasting time worrying about design when I need to be developing.

It’s also really good for ironing out any early stage problems, and identifying additional requirements. The key in the first phase though, is not getting too caught up in asthetics – you need to focus on design, flow and user experience rather than colours and graphics.

Paper Wireframing

Personally I prefer to use paper wireframing for projects like this, at least in the early stages. Don’t get me wrong, I love tools like Balsamiq but I do find them a little distracting when I just want to get some concepts down on paper. Maybe I’ll start with a paper wireframe and move it into a digital wireframe later, but not right now.

For this reason I got my uistencils.com ruler, pad and obviously stencils out to do the job. I actually have pads for a few devices, but right now I just need a concept for one device and as my MVP will be for Android I used the android handset sketchpad and stencil.

Android Pad and Stencils

I love all of this stuff from UI Stencils – they’re great quality and look fantastic. I’ve tried lots of different wireframing tools and approaches, but I always find myself starting out like this, and I’m not some great artist (but sketching does make me feel more creative)!

My Wireframing Process

My process for this type of small scale wireframing is to start by sketching out the home screen. I quite often find that throughout the process I discover the best way to represent something, and often come up with new ideas. If this happens don’t sweat it – you can make more than one pass at the wireframes…thats what they’re there for.

Making at least 2 passes at the wireframing also helps combat getting caught up on details. If you know you’re going to be drawing the same screen over and over again, you tend to be less concerned with making them look pretty!

User Stories

In order to sketch the home screen you’ll need to have a rough idea about what you want on it. To get an idea of this I like to build a rough list of user stories for my app, for me this looks something like this:

  1. As a user I want to see a list of all comic series I’m interested in.
  2. As a user I want to be able to see details of the series I’m interested in and a list of issues in that series.
  3. As a user I want to be able to edit details of the series I’m interested in and a list of issues in that series.
  4. As a user I want to be able to add new comic series to the list of comic series I’m interested in.
  5. As a user I want to be able to removed comic series from the list of comic series I’m interested in.
  6. As a user I want to be able to add which comics in a series I own.
  7. As a user I want to be able to add which comics in a series I own in bulk.
  8. As a user I want to be able to quickly see which comics in a series I’m missing.

This list honestly took me 5 minutes to put together – I’m not worrying about it being complete or perfect, I just need enough to start my MVP. Don’t think that they’re only useful for you in the wireframing stage – they will form the foundation of your development process too.

With this in hand I can work out 2 important things:

  1. Intrinsic Structure: There is an intrinsic structure to the data (I have series, series have issues etc).
  2. Most Used: I can also start to work out which functions are used most.

I really want to address both of these things on my home screen by allowing easy access to the most frequently used features, and fairly representing any intrinsic structure. In my case I think it makes sense to have the list of series I’m interested right on the home screen, with options to add/remove etc.

Landing Screen Wireframe

User Journeys

Once I have the home screen and user stories it becomes much easier to map out the other screens. I do this by thinking about simple user journeys through the app. These journeys will always be tied back to a user story and will guide you through what screens to create, and what functions need to be available where.

One thing to note is that at this stage I’m not getting deep into user experience design with personas, full user journeys and context. I’m really just putting together a basic structure with some idea about the rough journey a user will take.

For example, as the first user story is pretty much taken care of by the home screen wireframe, I’ll be addressing the second user story:

As a user I want to be able to see details of the series I’m interested in and a list of issues in that series.

As my app is really simple I’m just going to note a couple of bullet points:

  • From the landing screen, the user will tap on the series they are interested in.
  • This will open a new screen which shows the comic series info (name, descriptions, years etc), and a list of all issues in that series.

This indicates I need a screen to show ‘Series Info’:

Series Info Wireframe

Working It Through

Its then just working through all the user stories and building up your sketches from there. I went on and completed this first set of 6 wireframes:

V1.0 Wireframes

There were a couple of things I thought about as I went through the first version of the wireframes:

  • They had different screens for viewing and editing/adding series and issues. I actually think it’d work better if they we combined into just one viewing/adding/editing screen.
  • The button placement is a little all over the place, and I’d rather keep them together.
  • It’d be really useful if the home screen was tabbed, and the different tabs showed different views of the series list (like maybe all series, favourite series etc)
  • I added placeholders for features I wasn’t planning to add for the first MVP (such as series look-up to external provider)

For this reason I went through and put together a second set of wireframes that incorporated these thoughts:

V1.1 Wireframes

I only did the wireframes for the pages that needed to change, so in my case the landing page and the series info page.

Wrapping Up

The process of wireframing is a really useful and productive part of app design, even when looking at early stage MVPs. Completing these wireframes really hasn’t taken very long (maybe an hour or so at the most), and I know from experience that having user stories and wireframes makes actually building the app that much quicker and easier.

I’m now left with a decent set of wireframes, and a set of user stories to start the development process. I still have a few decisions to make around exactly what features I want to include in the first MVP, but I definitely have enough to get started.

The Essential App Marketing Kit
Subscribe To My Newsletter To Get an Entire Chapter From The Book for FREE
Never display this again
0 Flares Twitter 0 Facebook 0 StumbleUpon 0 Google+ 0 LinkedIn 0 0 Flares ×