Embed Size (px)
Citation preview
How to design an appTen Tang @ Oursky
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
We design & build innovative apps
I have an app idea. Now What?
• One day, an app idea crosses Ten’s 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
What’s wrong with the story?
Questions Ten should’ve asked
• Am I solving the real problem?• Am I giving the right solution?
42% startup fails because of the lack of a market need for their product
by CB Insight
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!
Present your app idea with a clickable prototype
From an app idea to a clickable prototype
User scenairo
User flow
Wireframes
Mockups
Clickable prototype
User story – write down the problem
It’s 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
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
Your show time!
🎉
Use
r flo
w
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
…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
…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
Exercise time!
💪
Wir
efra
mes
Wireframes
• Let’s get our hands dirty with atomic.io• My example: https://app.atomic.io/d/
Ef9l8cqwk4yc
Let’s do it now!
🏋
Moc
kups
Clickable prototype
• Let’s link up our wireframes on atomic.io!
Possible feedback you will get
• Yes that’s 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 doesn’t happen too often. [Consider building a chat bot?]
• I leave office pretty early. I don’t need an app like that. [It’s okay. Not everyone is your user. Go figure out how many people need your solution.]
I’ve validated my app idea. What’s next?Let’s style it and work on the user experience (UX).
From a basic concept…
to a polished app loved by millions!
Styling best tips
Follow the Design Guidelines
iOS Human Interface GuidelinesAndroid Material Design Guidelines
Avoid using the same UI/UX for multiple platforms
Where you can get inspirations
Behance.net
Dribbble.com
UX tips
Don’t make me thinkThe user interface should be self-explanatory
Conduct UX tests
• Hallway test• usertesting.com
Key takeaways
• Start validating your app idea today!• Get a clickable prototype to present your app idea• Follow the platform specific UI guides• Don’t make users think
Skygear – roll out your app fast
Server set up
Back end development
Front end development
More information on -> https://skygear.io
Skygear – roll out your app fast
Server set up
Back end development
Front end development
Skygear
More information on -> https://skygear.io
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 & 3 tools• You’ve got a product. Do you have these 12 essentials?
If you need help validating your app idea 🤓
