Build a Mobile App: Pt.2 Wireframing

Emerging tech on its own is mind-blowing enough  – IoT, Voice, AR, and AI have really only just begun their first tentative steps into business, but the impact they’re making for mobile enterprise is revolutionary.

In our last deep dive into the mobile app development process, we looked at the importance of the Discovery phase – the point where you’re establishing if a mobile app is right (or not) for your enterprise; when you’re identifying your objectives, and ensuring your budget is in place. As we head into the next stage –  wireframing your app – we start to get a real feel of what the big idea is all about, and how it could look and function in real life. This is the project stage that puts flesh on the bones, when everyone starts to get a feel for the possibilities and new ideas emerge (and others fall by the wayside).

“Why should I wirefame?”

We hear this all the time – it happens, people want to save money and time. A good set of wireframes in advance of high fidelity screen designs and development is going to save you time, money and a whole load of headache. Wireframing is about getting ideas down on paper (or screen!), brainstorming, spotting potential gaps and opportunities, and laying the ground for moving forward confidently.

“How do I get started with wireframing?”

Approaching wireframing presents a few options – lots of teams will use good old fashioned pen and paper, but others use online tools (such as; Balsamiq, Wireframe.cc, and Mockflow).

Sometimes one individual will work on certain wireframes, and other times it will make sense to get everyone involved. Whichever route you take, prepare for several review and feedback stages. It always important to follow the cardinal rules of wireframing;

1. Know thy user

Wireframing is really about getting clarity around how your audience will use your app – it includes UX (user experience), UI (user interface) and lots in between, so knowing who you are designing for is only the starting point. Given that you’ve already done your research you’ll be very familiar with your target user so you can start padding out your ideas and establish what their app journey might look like – what key actions do you want your audience to take? What do you want them to see? How do you envisage them going from one screen to the next? What is the end goal (or goals)? Answering these questions means you can start getting a visual idea of what the user journey looks like and means you can quickly start the actual wireframing process armed with these key elements.

2. Start sketching

Once you’ve got an idea of how your audience is going to use your app, get the pen and paper out – graph paper preferably – and start sketching. Even if you’re using an online tool to wireframe, sketching is a great starting point – you can be messy, make mistakes and change things rapidly. Even online, at this stage the hand is faster than the mouse! Work like this until you nail the user flow and can confidently take your wireframes into your digital space.

3. Be inspired!

With your preliminary sketches drawn, you can start getting a little bit more creative. How? Research! With literally millions of apps out there, and what seems like an infinite number of websites, it’s time to start looking at what others are doing; how their apps look, what’s trending at the moment, what a good user experience looks like, where some apps struggle, how other are a dream to use, and how well the ones you like are actually doing. Dive in, create iterations, and start getting a feel for what your app could be.

4. Start wireframing

Now that you’ve got some inspiration, nailed the user needs, thought about how you’ll deliver app info, and played around with a few ideas, it’s time to develop your wireframes.

Wireframing will help you refine your ideas, get clarity around features and functionality, and consider how the final app is going to be delivered. Don’t forget to include a storyboard which will help your team demonstrate how each app screen relates to the other, and how your audience is going to navigate through the app. You’ll also need to be very clear that this is a mobile experience –  markedly different from how a user engages with a website. You’ll want to to be thinking about navigation; menus; pop-ups; notifications; search; calls to action etc – the goal is to be focused on giving your users what they need, when they need it – the key tenets being:

  • The ability to quickly and easily find what they need
  • The ability to interact with your app in a way that is intuitive – in other words, minimal brain-power required
  • Deliver the information needed in easy, small, bitesize pieces.

Be as detailed as you need to be – creating detailed sketches of your finished app will highlight usability issues, spark new ideas and most importantly, provide the elements that further on in the project your design and development team will need to build out the optimum app. To give you some ideas, here’s a couple of wireframe examples from past projects here at WHQ:

Wireframe Example

There are a ton of options online that can help you with wireframing and that  come complete with templates choc full of what you’ll need to get as detailed as you can with your wireframes so finding the right one for your team is going to be down to personal preferences. From popular tools like Balsamiq to WireframeCC to Adobe apps like Adobe XD or the popular Sketch, you’ll end up with a great set of wireframes that should translate your idea into a workable concept.

Wireframing = workable concepts

Being your app’s backbone, the wireframing exercise should have nailed all the key elements of your app – from the navigation to the user journey, accessibility and functionality, placement and features. Wireframing is critical – it highlights both the shortcomings of your app and potential opportunities you might have missed during the research stage, and it’s indispensable in providing your UI and UX designers with the information they need to start prototyping during the next stage of the project. Mobile App wireframing is not the final word – but it’s the one and only starting point, turning your ideas into workable concepts that your UX and UI designers and team of developers will bring to life in the next stage of your mobile app development project.

Click here to continue this conversation with our experts.

Subscribe to Our Thoughts