Part 2 – Prototype Development Series: Hand drawn sketches – Wireframes – UI Mockups

Let’s get into the second part of the PrDS Series (please visit Part 1). We already mentioned in our previous post that we would have gathered requirements up to a certain level, where we can start brainstorming. And that brainstorming process we call as Project Kickstart Process, and here we would explain its first 3 steps which is most important for anybody who is looking for a topnotch development team to outsource their software development projects. (Contact Us if you need any consultant on a development project Hackerpunch-Sri Lanka)

Project Kickstart Process

  1. Come up with a minimal UI with handdrawn sketches.

    Within this step we fine tune already gathered requirements and do an analysis along with the client for further clarifications and thorough understanding and also we would have to do research about the domain and eventually will come up with Rough hand-drawn Sketches of the App UI and its user workflow.
    After the initial discussions, when we initiate this Project Kickstart Process, we would need to gather the requirements having some meetings and discussions with the related parties (clients and also may be doing some surveys with end users), and during that we would come up with handdrawn sketches of the Application and its workflow as shown bellow:
    Above hand drawn sketch is for the sample note taking application which we mentioned in Part 1.

  2. Make wireframes out of the sketches using app, play with the wireframes and fine tune them the user-workflow

    Draw more fine tuned, concrete Application wireframes to get signed-off by the client, so that we can do the project cost and time estimation. For an example, following is the wireframe for the above hand-drawn sketch of the note taking application:
    Client should check this UI Wireframe and confirm that it suffices all the requirements which gathered and agreed on the first step, or otherwise suggest requirement changes or point out missing requirements if there are any. So after the wireframes are signed-off, based on wireframes we would come up with the time and cost estimation for the application design and development. At the end of this Project Kickstart Process Step 2, client has to do the payment for the 1st and 2nd steps. Remember, we don’t cost for the initial requirements gathering. We start costing from the “Project Kickstart Process” only.Why do we cost to carry out this process?

    1. We have to put an enormous amount of efforts to capture the initial requirements as it is needed by the client.
      Obviously we would have to meet up and discuss, so it costs our time also. And requirement gathering and analysis is really crucial in software development projects.
    2. Client might get three artifacts. After the client signs off the project requirements at the step 2, we would send following reports and documents along with the cost and time estimation.
      1. Requirements analysis report for the project
      2. Finalized hand-drawn UI Sketches we came up at Step 1
      3. Finalized UI Wireframes and user-workflow designed using an industry standard tools.
    3. Client still has the freedom of choice if he/she wishes to move forward along with us or can decide to hand over the app development to another company. And in that case client still has above three documents which he/she can handover to their choice of development company and won’t have to bother about requirements gathering for a second time.
    4. We can guarantee that you would be already liking to work with us furthermore 😉 .

    At this point we have to decide what the client exactly want. Is it a prototype or an MVP the client wants to develop? I’m sure you might have caught up in some confusion. Why we talk about a prototype and MVP both? Aren’t them the same? Nope. They aren’t the same, developing prototypes and MVP has two different purposes. And also if you can remember we started to explain you the Project Kickstart Process which is our brainstorming process.

  3. Make UI mockups using Sketch App, based on the finalized wireframes

    After client sign-off the hand-drawn UI Wireframe and the requirements and agrees to our cost and time estimation and also payments are done for the Project Kickstart Process first two steps, we start doing the Mobile Application UI mockup design using industry standard tools (Preferably Sketch, or Photoshop) and send it for a review by the client.At this point client should provide us constructive feedback along with the changes if there are any related to the UI according to his/her liking, and we would consider if it’s possible to do within the agreed budget and do the changes for the UI changes and will be sent once again for a review.Then after all the conversation is done, we start actual mobile application development upon 30% advanced payment of the total cost of the project’s budget agreed budget.Following are the UI Mockup Designs for the above example application (so something similar to this will be given for your application at this point):

    So at this point user should ask for changes in the UI Designs of the mobile (or web) app and it will make the mobile app development much smoother. And please consider this is not the actual mobile app itself but a prototype based on the UI designs where the end users (here the clients) can get realistic user experience, because end result UI and user interactions will be much more similar to this UI Mockup Designs. Actually that’s the whole point of this Step 3 of the Project Kick Start Process.


Leave a Reply

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

Scroll to top