iOS development news and information for the community, by the community

Three Simple Steps For a Better Mobile App using User Story, Flowchart & Wireframes

You just came up with a great idea for a mobile app or you are working on a new feature to add in your existing app. You have laid out all the screens, primary & secondary actions, and interaction flow in your head and you get down to write the code.

Great! However, this scenario is the same as starting to build a house without a blueprint. Wireframes are like blueprints and visual design is like interior decoration for an app.

So before you start writing code, work on a blueprint — this includes writing down the features/user stories, designing the flow charts, defining the primary & secondary action and designing the wireframes. These sounds like a lot but I’ll walk you through each step to show you how simple it can be.

A weather app is a great example for me to demonstrate these ideas. It is simple, people use it everyday, it has primary & secondary actions, and it has a couple of screens. In the next few steps we will design a weather app, and I will show you how to think your app through before you start writing code.

Step 1. Define the features or user story

  1. User should be able to see 1 day of weather for their current location
  2. User should be able to see 7 days of weather for their current location
  3. User should be able to see 1 day of weather for additional locations
  4. User should be able to see 7 days of weather for additional locations
  5. User should be able to add new locations
  6. User should be able to edit/delete locations

Step 2. Design the flowchart
This can be simple (or extensive). The idea is to lay down all possible screens and user flows. Here is a simple flowchart for our Weather app.

Step 3. Design the wireframes
This is an extremely important step, and it is a tempting one to skip. A wireframe is an outline, blueprint or low-fidelity visual representation of your mobile app. It represents a basic layout structure (without colors) of each screen and navigation scheme. The benefits of designing wireframes are:

  1. Determining how much development/programming is needed.
  2. Testing the navigation.
  3. Making sure no functionality is missed out.
  4. Testing and refining the design & usability.

Primary & Secondary Actions
When designing a mobile screen it is good practice to limit the number of actions a user can take. This helps to keep the app simple and easy to learn. I personally try to limit each screen to 3 actions.

In our Weather App, the primary action would be “seeing weather for 7 days” or “seeing weather for another location”. A secondary action would be, i.e. “adding a new location”, because a user typically only does this every once in a while.

Here are wireframes for our Weather App.

The design/layout of information presented on the wireframes could vary. It depends on your creativity. Interactions like a button press vs. swipe can vary for actions. For example, in this app there are button press and swipe actions. To switch locations, the user swipes left to right, and to view the 7-day weather the user swipes up. I could use a ‘swipe down’ gesture to change locations, but that could cause issues on the iPhone since a ‘swipe down’ gesture near the top will pull down the iOS Notifications screen. These are things one should think when they are thinking of interaction design.

Next Steps:
The next steps from here are to test these wireframes with at least 5 users before starting development. You can learn a lot from 5 users – either confirm you have designed a good app or fix the issues before spending too much time in development.

Hope this articles helps. Please reach out to me or share your comments below.

Prince Arora
Prince Arora is a mobile UX expert who has designed product interfaces for Eye-Fi, Verizon and Lycos. He is also the co-founder of Neemware, a fully featured marketing platform that helps app developers get more downloads, increase sales, elicit feedback and communicate with users in real time.
Connect with Prince Arora // email // www // twitter // facebook

  • Cezar Cocu

    This is exactly what I have been pondering about for the last week! What wireframe-ing tool did you use?

  • Prince Arora

    For these wireframes I used Omnigraffle on Mac. You can also use Keynote, and find mobile stencils that makes it easy to create mobile wireframes and prototypes.

  • karan

    Yes, I have used and got it. Thank prince for great source.