View source for Professional development/Design thinking/Software prototyping and tools

Many of us (TAs/PMs and students) struggle with the concept of testing software or just how to prototype software. It is less concrete than physical prototyping and is harder to wrap your head around. You might say that you can’t test or can’t prototype something because it is software...think again!

We’ll compare it to a typical mechanical design cycle (not considering client involvement):
{| class="wikitable"
|'''Design step'''
|'''Mechanical'''
|'''Software'''
|-
|Conceptual designs
|Hand/computer drawn sketches
|Hand/computer drawn sketches
|-
|Preliminary design
|Rough CAD assemblies
|Wireframe designs/flowchart
|-
|Detailed design
|Fully defined CAD
|High fidelity mockup/Initial coded software
|-
|Simulation/testing
|CAD force/fluid simulations
|UX simulation
|-
|Prototype 1
|Manufactured part(s)
|Functional coded software
|-
|Refined testing
|Testing under load against metrics
|Sub functions to test behavior of specific features against metrics
|}
In our GNG1103/2101 classes the cycle looks a little differently where you might have:
{| class="wikitable"
|'''Design step'''
|'''Mechanical'''
|'''Software'''
|-
|Conceptual designs
|Hand drawn sketches
|Hand drawn sketches
|-
|Detailed design
|Detailed sketches of sub-assemblies with some analysis
|Wireframe designs/flowchart
|-
|Prototype 1
|Cardboard prototype
|High fidelity mockup/Initial coded software
|-
|Simulation/testing
|Functional testing of prototype against metrics
|UX simulation against metrics
|-
|Prototype 2/3
|Assembled and functional prototype
|Functional software
|}
Here are some metrics that might be useful for you https://www.nngroup.com/articles/usability-metrics/ and some UI tips https://lawsofux.com/.

===Sharing===
When working in a team you will definitely want to share your files to work on things together. In mechanical [https://grabcad.com/workbench GrabCad Workbench] is a popular tool but in software [https://github.com/ GitHub] is definitely an industry standard.

Here is an introduction to GitHub https://guides.github.com/activities/hello-world/

===Tools===
Here is a list of tools for <u>UI and UX prototyping</u> that could be useful and are very easy to use: https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9 (Figma, Balsamiq and Adobe XD are suggested which are free or free for students). [https://app.diagrams.net/ Draw.io] is also useful for <u>flowcharts</u>. 

Ensure that when you design your UI for clients having <u>accessibility needs</u>, you take into considerations the colours you use. 

*[http://colorsafe.co/ This website] and [https://webaim.org/resources/contrastchecker/ this website] based on the Web Content Accessibility Guidelines (WCAG) is a ''great'' resource that was suggested by a client who works in accessibility!
*[https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ This website] also has great infographics for dos and don'ts on designing for different accessibility groups.
*[http://www.sussex.ac.uk/tel/resource/tel_website/accessiblecontrast/?q=FFFFFF~003b49~1d4289~94a596~e56db1~d3273e~00bfb2~d6d2c4~ffc845~dc582a~41b6e6~1b365d~be84a3~5d3754~7da1c4~f2c75c~d0d3d4~007a78~000000 This University of Sussex page] with a few pre-loaded colours can be a very useful tool for this as well. Notice how the [http://www.sussex.ac.uk/tel/resource/tel_website/accessiblecontrast/?q=8f001a~ffffff uOttawa official backdrop colour scores well with white text].
*[https://www.color-blindness.com/coblis-color-blindness-simulator/ This website] allows you to upload a picture and see it though the eyes of someone with color blindness.

Here is a list of platforms that require <u>minimal coding experience</u> to use:

*[https://appinventor.mit.edu/ MIT app inventor] (android apps only)
*[https://thunkable.com/#/ Thunkable] (android and iOS apps)
*[https://www.adalo.com/ Adalo] (android and iOS apps, more limited then thunkable)
*[https://www.wix.com/ Wix] (website)
*[https://powerapps.microsoft.com/en-us/ Microsoft Power Apps] (android, iOS and windows)

Here is a list of useful <u>websites with code syntax and libraries</u> which can help you get started:

*[https://www.w3schools.com/ W3 Schools] (HTML, CSS, JavaScript, SQL, PHP and more!)
*

Here is a list of other platforms for building apps or websites which you would need <u>more coding experience</u> to use:

*[https://developer.android.com/studio Android studio]
*[https://developers.google.com/apis-explorer Google API]

===Apple development===
It is more complicated to develop apps for iPhone or Mac then for Android or Windows. You can get an [https://developer.apple.com/programs/ Apple developer account] which allows you to publish to the Apple store or to Test Flight however it costs 99$ USD/year. Publishing to these platforms also entails rigorous testing and must abide by Apple's high standards which does not usually make it a very feasible choice for a semester-long project.

It is recommended to make [https://en.wikipedia.org/wiki/Progressive_web_application progressive web apps](PWA) when developing for Apple devices. These websites are able to be 'installed' on phones as if they were apps and there is a lot of documentation on it. Here are a few resources to get you started:

*What are PWA's: https://www.youtube.com/watch?v=4XT23X0Fjfk
*Codebase for building PWAs:
**[https://angular.io/ Angular] PWA guide- https://angular.io/guide/service-worker-getting-started
**[https://reactjs.org/ React] PWA guide- https://create-react-app.dev/docs/making-a-progressive-web-app/
**[https://nextjs.org/ Next] PWA guide- https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app
**HTML and javascript PWA tutorials
***https://medium.com/james-johnson/a-simple-progressive-web-app-tutorial-f9708e5f2605
***https://dzone.com/articles/how-to-build-a-progressive-web-app-pwa-with-javasc
***https://web.dev/progressive-web-apps/
*One option is AWS (Amazon web services) as the framework for hosting the PWA
**Create an [https://aws.amazon.com/s3/pricing/ S3 bucket] for each project -> free, almost, might cost a couple of cents a month
**[https://aws.amazon.com/route53/pricing/ Route 53] to create the subdomains -> free
**[https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html#domain-register-procedure Domains] -> to buy the domain for the class, might be $15 a year (not necessary for GNG)
**[https://aws.amazon.com/certificate-manager/ Certificates] -> free to get the ssl certificate
**[https://github.com/pricing GIthub] for hosting code and publishing to S3-> Free
*Tools for building PWA's: 
**Convert web application to PWA: https://www.creativebloq.com/how-to/build-a-progressive-web-app
**Convert wix site to PWA: https://wappaa.com/wappstore/wix-site-to-app/
**https://techbeacon.com/app-dev-testing/5-best-tools-building-progressive-web-apps-fast
**https://developers.google.com/web/updates/2015/12/getting-started-pwa
**https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

*