1. Deconstructing Reminders Gabriel Spitz

2. How do we think about the User-Interface in a Systematic way

3. User-Interface & User Experience  Scope  Conceptual Model  Activity Flow  Representation  Presentation  Usefulness  Ease of Learning  Efficiency  Effectiveness  Aesthetics UI Design ComponentsUI Design Criteria

4. Scope  Manage Lists  Reorder reminder  Manage Reminder Categories  Search  Sort  Navigate between lists  … The set of Functions included in the UI

5. Conceptual Model What is this UI looks like

6. Conceptual Model What is this ?

7. Activity– Create Reminder 1.Select a Folder 2.Click on “Add” Icon 3.Enter Reminder name 4.Click on ”Info” icon 5.Enter Reminder date 6.Click on the “done” button What are the steps to create a reminder?

8. Activity Flow How are the steps organized spatially on the UI?

9. Representation To Do List - Table Widget Add Item – Button Date Picker – Calendar Show/Hide Pane – Button Show/Hide Calendar – Button Add List - Button How do we represent the various functions in the UI

10. Presentation To Do List – Like a Note Pad Add Item – Black button with icon Date Picker – Calendar Show/Hide Pane – Black button with icon Show/Hide Calendar – Black button with icon Add List - Black button with icon How do visualize the different elements in the UI

12. Homepage Deconstructed Demonstrate the User Perspective within the Business Goals

15. What is a Homepage  Sign post  Indicates the “direction” the website will take me in  First impression  Is it a serious site, is it a fun site…  Gateway to a site  Provides links to different sections of the site

16. Homepage is like the rest area along the Internet Highway; You can zip through it or Stop and enjoy the facility

17. Effective Homepages are designed from a user perspective

18. Visitors Types & Questions/Needs New user Returning user Accidenta l user Where am IWhat do you do/ have Let me contact you Do I trust you I just want to do it Show me the latest Help me decide Should I stick around Is this the correct site How Do I… - Help

19. Role of the Homepage Effective Homepages In order to get the user to: -Stay on the site -Explore its content -Buy or use its services

20. Great Homepage Design  Is Informative – tells the visitor  What is the site/tool about  What can the visitor do on the site with the tool  What can the site/tool do for the visitor  Resonate with target audience  Narrowly focused  Speaks the language of visitors of interest  Has Compelling value-proposition  Convince the user to stick around Jessica Meher, (2013) HubSpot

21. Great Homepage Design  Is Usable  Easy to navigate  No interruptions  Mobile optimized  Has Clear Primary and secondary Call-to-action (CTA)  Free Trial, Schedule a demo, Buy now, learn more  We want the user to dig deeper into the website and move them further down the Purchas-funnel  Reflect current needs, problems, and questions of visitors

22. Great Homepage Design  Is Good design  Use of layout  Call-To-Action placement  Use of whitespace  Colors  Fonts  Etc.

23. Home Page Example Simple design with strong headline Feels secure, but easy to use Good CTA-Free! Get Started Clear supporting image

24. Home Page Example Simple and effective headline - Remember Everything Arranged into 3 clear benefits that jump out because of the rich green background Eye path leads us to the CTA – “Get Evernote, its free”

25. Home Page Example Great headline Placement of customers at the center Sign-up form directly on the homepage