From Idea to final Design - World Interaction Day

339 views

Published on

Every app project starts with an idea ideally coming from a real problem that needs to be solved. Apps with love has designed and developed more than 100 Apps since its founding in 2010 and is happy to share the experiences and learnings about it during the World Interaction Day 2017 in Zürich #WIAD17.

How does the process look like from the first idea to the final screensdesigns of an digital product like an app? What tools, concepts and methods can be used to figure out how the functional and visual design should look like?

Some Real Case Examples are included.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
339
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

From Idea to final Design - World Interaction Day

  1. 1. ZÜRICH, SWITZERLAND Michael Schranz From Idea to Final Screendesign @michaelschranz
  2. 2. Apps with love / 2017 MOBILE DESIGN JOBS FROM IDEA TO FINAL DESIGNS
  3. 3. Apps with love / 2017 MARKETING RELEASE BUGFIXING DEVELOPMENT DESIGN CONCEPT SCOPE ITERATION ITERATION ITERATION appswithlove.com USERRE SEARCH USABLITY TESTINGUSERRE SEARCHUSABLITY TESTING PROTOTYPE PROTOTYPE BETA RELEASE TESTCASES REVIE W USERBASE REQ UIREMENTS RESEA RCH ANAL YZE IDE ATE VALIDA TE APP DEVELOPMENT PROCESS
  4. 4. Apps with love / 2017 1 DESIGN STRATEGY Clarify what to design and why before approaching how to design it. What is the right design strategy? It is your first job to find out. It depends on: • Experience of Client and Enduser • Involvement of Client and Enduser • Culture of the Client and Enduser • Context (Product, Timing, Budget) Be open for new approaches but stick to your basic priciples.
  5. 5. Apps with love / 2017 2 IDEA (WHAT & WHY)
  6. 6. Apps with love / 2017 What‘s the Challenge? Value Proposition Hypotheses Design Strategy Target Audience perceptions, believes and behavior Market Research Competition and Inspiration ∆ ∆ ∆ ∆ ∆ 2 IDEA (WHAT & WHY)
  7. 7. Apps with love / 2017 HUMAN NEEDS BUSINESS NEEDS TECHNOLOGY desirability viability feasibility USER USER CENTERED DESIGN
  8. 8. Apps with love / 2017 3 SCOPE / REQUIREMENTS
  9. 9. Apps with love / 2017 User Journey User Stories Non. Technical Requirements Scope 3 SCOPE / REQUIREMENTS ∆ ∆ ∆
  10. 10. Apps with love / 2017 4 FUNCTIONAL DESIGN (WHAT & WHERE)
  11. 11. Apps with love / 2017 Seite 4 3. Feedback positiv Fahrer erhält Feedback über den Erhalt des Jobs. (OK = weiter zu detailierten Job Informationen) Autom. PUSH an Kunde 2. Incoming Job Der Fahrer nimmt den Job durch Tab auf ANNEHMEN sofort an. 1. Ansicht Job Center (Case „Keine Vorbestellungen“) Hier werden dem Fahrer die Jobs angezeigt. Der Status des Fahrers ist nach der Anmeldung in der App standardmässig auf Free gesetzt. Auftrag annehmen – Fahrer erhält Auftrag 4 FUNCTIONAL DESIGN (WHAT & WHERE)
  12. 12. Apps with love / 2017 TEST LEARN CREATE 4 FUNCTIONAL DESIGN (WHAT & WHERE) Scribbles Wireframes Prototypes User Research Analyse Iterate
  13. 13. Apps with love / 2017 Logoentwicklung Go! Vorschlag 1 Stecknadel Farbpalette Sticker auf Partner-Taxi Rot, Lachsrot Sekundärfarben Basis: Logo schwarz Rot, Lachsrot Anthrazit Blau Sekundärfarben Winkel 15 ° Schutzraum im Kreis – go! Styleguide Logo Besteller App Herleitung: Stecknadel Konstruktion Logo Fahrer App 5 VISUAL DESIGN (HOW)
  14. 14. Apps with love / 2017 Mockups Animations / Transitions Fonts / Icons / Colors Touchable Prototype User Research 5 VISUAL DESIGN (HOW) ∆ ∆ ∆ ∆
  15. 15. Apps with love / 2017 5 VISUAL DESIGN (HOW)
  16. 16. Apps with love / 2017 6 QUALITY ASSURANCE
  17. 17. Apps with love / 2017 6 QUALITY ASSURANCE Functional Testing User Testing Design Review Quality Assurance starts already during the first phases and continues until the product is end of life. ∆ ∆
  18. 18. Apps with love / 2017 7 PUBLISHING & PROMOTION
  19. 19. Apps with love / 2017 7 PUBLISHING & PROMOTION App Promotion Assets Blogs App Icons App Store Screencast Videos Banners Flyer Videos Presentations Social Media App Store Screen Previews
  20. 20. Apps with love / 2017 18.50 FIXPREIS CHF ZIEL Speichergasse 4, 3011 Bern SUISSE CAB 24 Standard START Landoltstrasse 63, 3007 Bern SUISSE CAB 24 Standard 12 MIN 7 MIN 9 MIN ca. 10 MIN Hol Dir die App go-mobility.ch 18.50 FIXPREIS CHF ZIEL Speichergasse 4, 3011 Bern SUISSE CAB 24Standard START Landoltstrasse 63, 3007 Bernca. 10 MIN 18.50 FIXPREIS CHF ZIEL Speichergasse 4, 3011 Bern SUISSE CAB 24Standard START Landoltstrasse 63, 3007 Bernca. 10 MIN Hol Dir die App go-mobility.ch Einfach von A nach B Einfach von A nach B Ziel eingeben, Fahrzeug wählen und zum Fixpreis ankommen. Ziel eingeben, Fahrzeug wählen und zum Fixpreis ankommen. Hol Dir die App! go-mobility.ch Flyer Fahrzeug Sticker 7 PUBLISHING & PROMOTION
  21. 21. Apps with love / 2017 DU BESTIMMST DEN FAHRPLAN Einfach von A nach B: Ziel eingeben, Fahrzeug wählen und zum Fixpreis ankommen. Hol Dir die App go-mobility.ch TAXI ODER LIMOUSINE? Einfach von A nach B: Ziel eingeben, Fahrzeug wählen und zum Fixpreis ankommen. Hol Dir die App go-mobility.ch ÜBERALL UNTERWEGS Einfach von A nach B: Ziel eingeben, Fahrzeug wählen und zum Fixpreis ankommen. Hol Dir die App go-mobility.ch Plakatkampagne 7 PUBLISHING & PROMOTION
  22. 22. Apps with love / 2017 DESIGN = EMPATHY
  23. 23. Apps with love / 2017 THANK YOU!
  24. 24. Apps with love / 2017 appswithlove.com info@appswithlove.com Apps with love

×