How to Design an App: Wireframing, Mockuping, Prototyping

  • Published on
    23-Jan-2018

  • View
    331

  • Download
    2

Transcript

<ol><li> 1. How to design an app Ten Tang @ Oursky </li><li> 2. Oursky in numbers A local app development studio founded in 2008 From a 3 man team to a 40 people company Half of our clients are overseas (San Francisco, London, Australia) ~70% of our iOS apps are featured by the Apple App Store in 2015 </li><li> 3. We design &amp; build innovative apps </li><li> 4. I have an app idea. Now What? One day, an app idea crosses Tens mind. The next day, she puts together a development team and hacks the app After months of hard work, the app is finally launched on the app stores but no one is downloading the app despite all the marketing effort her team has put into Whats wrong with the story? </li><li> 5. Questions Ten shouldve asked Am I solving the real problem? Am I giving the right solution? </li><li> 6. 42% startup fails because of the lack of a market need for their product by CB Insight </li><li> 7. Start validating your app idea as soon as you have it! Talk to your potential users Create a simple landing page to collect email Constantly blog about your idea Anything else you can think of! </li><li> 8. Present your app idea with a clickable prototype </li><li> 9. From an app idea to a clickable prototype User scenairo User flow Wireframes Mockups Clickable prototype </li><li> 10. User story write down the problem Its 23:00 at night and I have just finished all my work. Leaving my office in Fo Tan in 5 minutes, I want to grab a late dinner. But I have no idea what restaurants around me are still open. As a user, I want to know where I can grab dinner at late night to fill my stomach </li><li> 11. User story write down the respective feature Then, I open the Dine Late app. I give it my location via GPS and pins start popping up on a Fo Tan map, showing restaurants that are still open around me in 2kms. I click on the one closest to me, and the app gives me the information of the restaurant a Chinese noodle shop that is closing in 2 hours. I decided to go there. A map pinned with restaurant that are not closing in 1 hour around the user </li><li> 12. Your show time! </li><li> 13. Userflow </li><li> 14. User flow Then, I open the latedinner app. I give it my location via GPS and pins start popping up on a Fo Tan map, showing restaurants that are still open around me in 2kms. I click on the one closest to me, and the app gives me the information of the restaurant a chinese noodle shop that is closing in 2 hours. I decided to go there. GPS permission </li><li> 15. Then, I open the latedinner app. I give it my location via GPS and pins start poping up on a Fo Tan map, showing restaurants that are still open around me in 2kms. I click on the one closest to me, and the app gives me the information of the restaurant a chinese noodle shop that is closing in 2 hours. I decided to go there. User flow GPS permission The Map Pins Distance controller </li><li> 16. Then, I open the latedinner app. I give it my location via GPS and pins start popping up on a Fo Tan map, showing restaurants that are still open around me in 2kms. I click on the one closest to me, and the app gives me the information of the restarant a chinese noodle shop that is closing in 2 hours. I decided to go there. User flow GPS permission The Map Restaurant Pins Distance controller Name Cuisine Opening hour Address </li><li> 17. Exercise time! </li><li> 18. Wireframes </li><li> 19. Wireframes Lets get our hands dirty with atomic.io My example: https://app.atomic.io/d/ Ef9l8cqwk4yc </li><li> 20. Lets do it now! </li><li> 21. Mockups </li><li> 22. Clickable prototype Lets link up our wireframes on atomic.io! </li><li> 23. Possible feedback you will get Yes thats what I want! I always leave office late. It will be good if I can bookmark the restaurants I like as well. [add new feature?] I am pretty familiar with the closing time of the restaurants around my office. Sometimes I do want to explore new restaurants further away from my office in late night. But that doesnt happen too often. [Consider building a chat bot?] I leave office pretty early. I dont need an app like that. [Its okay. Not everyone is your user. Go figure out how many people need your solution.] </li><li> 24. Ive validated my app idea. Whats next? Lets style it and work on the user experience (UX). </li><li> 25. From a basic concept </li><li> 26. to a polished app loved by millions! </li><li> 27. Styling best tips </li><li> 28. Follow the Design Guidelines iOS Human Interface Guidelines Android Material Design Guidelines </li><li> 29. Avoid using the same UI/UX for multiple platforms </li><li> 30. Where you can get inspirations Behance.net </li><li> 31. Dribbble.com </li><li> 32. UX tips </li><li> 33. Dont make me think The user interface should be self-explanatory </li><li> 34. Conduct UX tests Hallway test usertesting.com </li><li> 35. Key takeaways Start validating your app idea today! Get a clickable prototype to present your app idea Follow the platform specific UI guides Dont make users think </li><li> 36. Skygear roll out your app fast Server set up Back end development Front end development More information on -&gt; https://skygear.io </li><li> 37. Skygear roll out your app fast Server set up Back end development Front end development Skygear More information on -&gt; https://skygear.io </li><li> 38. Readings From MVP to best of year app featured by Apple Why wireframes win over clients A guide to web design process 8 wireframing principles for project managers Starting guide to wireframe design 7 steps &amp; 3 tools Youve got a product. Do you have these 12 essentials? </li><li> 39. Thank you! Ten Tang @ Oursky Email: tentang@oursky.com Linkedin: Ten Tang </li><li> 40. If you need help validating your app idea </li><li> 41. Join our Facebook Group for upcoming events! http://bit.ly/ourskyevents </li></ol>