This document outlines the steps to designing great mobile apps. It discusses defining the app concept by understanding the audience, purpose and key features. It also covers designing the user interface through sketching, transforming designs to high-fidelity prototypes, and getting user testing feedback through multiple iterations. Tools that can help with the design and development process are also mentioned. The overall process focuses on designing with the user in mind through clear and intuitive interfaces to create engaging mobile experiences.

1. Lecture
Tony Wang
iOS Developer, Researcher, Mobile Designer
Copyright © 2014 Tony Wang
Steps to Design Great Mobile Apps

2. Overview
•What makes a great design?
•Design process
•Iterations
•Tools to use

4. Intuitive.
Engaging.
Beautiful.

5. It’s based on
what you enable them to do,
how you makes them feel.

6. Great design is about making decisions.

7. Every great app starts with a concept.

8. Defining the Concept

9. Defining the Concept
•Who is your audience?
•What is the purpose of your app?
•What problem is your app trying to solve?
•What content will your app incorporate?

10. Where’s the library?

11. How to get there?

12. Helps people to navigate within an campus,
not only easier and also faster.

13. Understand your users.

14. Talk to users.

15. Plan your key features.

16. • View campus map
• Search for buildings
• See the photo of the
buildings
• Get walking directions

17. How to avoid getting wet?

19. Defining the Concept

20. Defining the Concept
Designing a User Interface

21. Designing a User Interface
•Design with“user in mind”
•Make it efficient
•Clear & straight forward

22. Sketch it on papers.

23. Sketch it on papers.

24. Transform it to High-Fidelity

26. Defining the Concept
Designing a User Interface

27. Defining the Concept
Designing a User Interface
Get Users to Test it

28. Get Users to Test it
•Test with real users, find someone new.
•Ask them to“Think Aloud”
•Watch how they use the app
•Not everyone will like it, but choose the most
appropriate one.

29. Iteration

30. Iteration Iteration

31. Iteration Iteration Iteration

32. Defining the Concept
Designing a User Interface
Get Users to Test it

33. Defining the Concept
Designing a User Interface
Get Users to Test it

34. Example

35. Main Screen

47. Search Screen

59. Side Bar

63. 7 Iterations
v1.00.1 0.2 0.3 0.4 0.5 0.6

65. Tools for Designers
Photoshop Slicy Skala PreviewOminiGraffle

66. Tools for Developers
Bitbucket Dropbox Parse

68. Official Guide for TEDx QUT