Designing the User Experience of Your App

Our feature this week is written by Pierre Abel, one of our Dad developers and founder of L’Escapadou (kids educational apps for the iPhone and iPad). Pierre shares his experience designing user interfaces, which are especially important in the success of apps for children. As the mobile app market matures and becomes more competitive, user interface design will stand out as a critical component for apps that resonate with kids and families. Yet another area for developers to do their homework! Thanks for the tips Pierre.

Before starting L’Escapadou with my family, I worked for several years as a user experience designer, and for this week I’d like to share some basic steps that can help you build more usable and successful apps. Basically, the goal is to gather information about your users to make the right choices when making design-related decisions, and not leave these decisions to chance.

Know Your Users
The first step is to know your users – user experience designers talk about  “personas”. The goal is to define types of users and have a clear picture of each of them. For example, in an app for kids, there are usually two kinds of personas: kid and parent (kid is the primary persona who plays the game, and parent buys the app and may also play the game with their kids). The description of a persona should look real; for example, a kid persona may start like this: Sophia is 6 years old and lives in San Francisco. She loves to play and have fun with friends and her dog. She has a little sister who is 3 years old. She loves pink. She attends a Montessori school, and …

User Goals
Once you have defined your personas, you should define the goals your users want to achieve using your app.  If you can’t articulate answers to this question correctly, the design of your digital product will be loose and users will feel lost.  Clearly defining user goals and their priorities allows you to give a direction to the product design. When designing a kids app, the primary goal of a kid’s persona is usually to have fun and can also be focused on a specific interest (e.g. dinosaurs), whereas the parents’ goal will often be offer their child a game that will help them develop their skills (e.g. spelling) and/or make them happy.

Scenarios
Scenarios are short stories that describe how your app is used.  It is the foundation of design, but it is not visual yet . Of course, scenarios support the user goals you have defined and also take the characteristics of targeted personas  into account. For example, in our crossword game, a quick scenario is “Sophia sees a picture and a movable alphabet, she tries to write the word corresponding to the picture. Once she has completed the word, something visually pleasant and interactive is displayed”.

Prototypes
Based on the scenarios you have defined, you can now build a prototype integrating your scenarios. When you are wondering about a design decision, always check personas description and goals to make an informed decision. At the beginning stay away from the computer and try to do everything on paper to iterate fast !

Test and iterate!
Once the prototype is ready, you can test with your targeted users and see what’s wrong. Look carefully how users use the product and refine your prototype accordingly (you might also need to iterate on personas/goals/goals according to your findings). For example in Montessori Crosswords, we’ve changed the graphics four times , and did many iterations to make the application usable, simple and fun !

I hope that this short introduction to user experience design has shown how it can be a powerful framework to design your app. Please share examples of apps you’ve seen with successful user interfaces in hopes that it adds to this discussion as the platform emerges.

8 thoughts on “Designing the User Experience of Your App”

  1. Thank you for this straightforward and clear post. Teaching interaction design to collège level students in a school of art in France, I think I will print this one out and have them learn it by heart 🙂 it is also a good process for any kind of design oriented project. Poeple tend to think we are just here to put up nice shapes colors images and funky typo on the screen, and that’s it whereas as an interaction // interface designers we are a lot closer to object designers than graphic designers even if there is a good part of graphic design in our job.

  2. Hi Pierre,

    This is really interesting.

    I wonder how these ideas can be applied to Apps that are essentially traditional stories published on iPhone/iPad? For example, there’s the whole question of interactivity. A traditional story engages eyes and ears but not necessarily touch unless to point something out or to turn a page.

    We are exploring the role of touch in our Apps but don’t want them to be games or puzzles. We want to hold close to the traditional story model, adding light multimedia features such as audio narration, sound effects and music. Touch may have more of a role in future Apps if we can find ways to add it without detracting from the primary reading experience. We want the stories to be appropriate for bed time, when it’s time to relax and get sleepy. So that’s the puzzle — how to introduce touch that’s ok even at bed time.

  3. Hi Peirre,

    Thanks for the very useful post. We are a small app development team and this certainly helps. I liked your point about how you had to change the graphics four times. I think this seems to be inevitable in the app development process. As Susan Tiner has pointed out, how can we translate all that you have said for the iPod? It seems to be very different when we have to develop apps for the iPad since it involves so much interactivity. We would love to hear what you can share from your experience.

  4. Hi,
    We are looking for a good online wire-framing tool where 2-4 team members can easily collaborate. We have used balsamic, the one problem we are facing with the tool is that it is difficult for us to exactly measure the pixel size of the objects on the screen. We have worked on Sketch which easily measures the pixels but sharing the files on the tool is impossible. I am sure there must be a solution out. Hope someone here can help out.
    Thanks a ton

Leave a Reply

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