The 5-Step Framework For Designing The Perfect AppFor the past 6 years, I’ve been helping companies turn their app & service ideas into profitable products. Experience Design is sometimes seen as a daunting tasks by teams I work with, but it shouldn’t be. It’s a matter of following a straight forward process with eye-opening results.
At this stage, you should already have a clear idea on what features your app should have and what your MVP should be. If you don’t have a clue, I recommend you read our first post of this series on Product Strategy.
I’ve built a simple framework on designing a great app that works every time, and I’d like to share with you. It’s a 5-step process that you & your team can use to validate an idea, test, iterate and ultimately create a great experience.
The framework above is our preferred approach at Ideaware. It consists of these 5 simple steps that we use to design experiences for our client’s products:
1. Build a mastermind team
Start by putting together a team of masterminds for your project. Bring in designers, developers, stakeholders, even marketing. Everyone will have different points of views and provide valuable ideas and information tied to the success of your app.
Send out invites and schedule two meetings: a 4-hour session for idea sketching and flows, and another 4-hour session for design. Depending on the size of the project, you might need longer periods of time. Sometimes we schedule 2–3 days of work as we see fit.
2. Sketch ideas
Let the fun begin. Everyone gets paper & sharpies (we prefer sharpies as you cant erase or tweak what’s already on paper). Make a list of the features you previously defined for your MVP and choose a feature/screen to start working on.
We usually start with the most important/core feature.
Everyone gets 5 minutes to interpret the feature and sketch it out as a crude wireframe. Once the 5 minutes are up, everyone should present their ideas and post it on a wall of your choice.
It’s now time to vote on your favorite sketches (or favorite elements from a sketch). Once the voting is done, sit down for another 5-minute sketching session.
You can repeat the steps above as you see necessary, ultimately set a max amount of time to choose a single sketch. By the time you repeated the steps a few times, a great sketch starts to form where everyone has pitched in their best ideas.
Try this exercise for the core features. There is no reason to spend time sketching an about or login screen.
3. Create the user flows
This is a group exercise, write down on post-its the name of every screen the app has and post them on a wall. Collaboratively start organizing the post-its by common sense on how the app should be navigated. A moderator should incentivize discussion and question everything.
The most important takeaway of this exercise is now only to define how a user will flow through the app but also the golden path.
The golden path is the ideal path taken by a user when using an interface — for example it may be possible to take a large number of steps to reach a checkout process but the golden path may consist of far fewer steps.
The golden path is there to give the user the A-HA! moment you want the user to remember.
4. Design time!
Kick off the design phase by creating a mood board (we use private pinterest boards). Everyone should pitch in apps, websites, colors, anything that will be relevant to the look and feel of your app.
It’s time to let the design team do their work. They will take everything learned form the sketching and flow exercises and convert them into wireframes or visual designs. Why not both? Depends on the project. Sometimes the sketching session produced such high quality outputs, we can consider them as wireframes.
On the other hand, on more complex projects and interactions, we might want to go the wireframe route first. It just depends on the project and team needs.
For the design phase, we recommend you follow common interface patterns (this way you avoid a steep learning curve from your users). Equally important is to check across your target devices constantly. This way it will quickly become apparent what elements are just off.
5. Show, tell & iterate
So your designs are done, what’s next? Build a prototype of course! We use invision to create prototypes from screens. Invision is great because you can actually install the prototype as an app, which opens the door for some real testing.
Meet with your team once more, test out how the app feels, write down notes, and if necessary, tweak your designs.
Once everyone is happy with the prototype, bring in people who haven’t been part of the process and let them use the prototype. Write down impressions, have them do certain tasks and see what they did. Write everything down. Congratulations — you just nailed your first user testing session!
Now take what you learned, go back, sketch, design and polish that app.
We usually follow the steps above 2–5 times until we’re happy with the end result and we’re sure people are just ‘getting it’. From here, it’s time to let the development team do their thing. We will have more info & tips on how to develop a great app in our next post from this series.
How do you design apps? Let us know in the comments!
More from this series
This this second part of our How to make an app series, in which we cover the foundations on how to build a great app. Here are the other posts in this series:
Part 1 — Product Strategy
Part 2 — The 5-Step Framework For Designing The Perfect App (you’re here)
Part 3 — Development & post-launch (coming soon)
Originally published at ideaware.co on August 6, 2015.