Prototype Process
The next milestone in the Gantt Chart and project is the prototype, this blog post track the process and progress I have made so far with the prototype.
I have created a more detailed sitemap for the application after reviewing the original sitemap in the pitch document I found it was not detailed or showed the structure of the application clearly. Therefore, the new sitemap showcases the Codability structure and layout of the application. It outlines the key features and pages available to the users and highlights the process users will go through when using the app.
App Wireframes
InVision Prototype
I thought it would be useful to create a prototype on InVision to test the designs and feel of the app before I started with development. I drew out and then digitally made the new wireframes and then progressed to importing them into InVision. I was then able to export this to share and I made a screen recording to show 5 members of my target audience as well as a UX designer. This really helped to evaluate and test the design and so any feedback could be implemented into the development stage. The feedback I gained from the users and UX designer was:
For the prototype, the Cordova app has been set up for both IOS and Android platforms with the app logo created. I aimed to get the login and registers forms to work with validation and displaying relevant error messages. As Cordova does not support PHP I have had to pass the data through an AJAX call.
MySQL Database with registered users in the table has been completed with the comments table has been set up or the discuss page forum using phpMyAdmin.
A 'cordova build' needs to be run whenever a change is made in the application so the app is up to date and ready for testing and viewing on the emulator.
The screenshots show the app on the emulator with the functionality in place. Users are able to complete a coding challenge quiz to test their learning and once completed with will unlock the next stage for the user. This makes it interactive and engaging for the user and positive feedback has come back from the user I tested with on the device.
GitHub
I have set up a GitHub Repository to host my coding files and as a back up for all my final year project code. I make regular commits and it means I can see the history of my code and how it has progressed. Moreover, I can revert back to code if I need too and it also makes the code sharable and easy to access on any device.
Marketing
I have set up the social media to start marketing the app before it is published on the market as teaser marketing. Codability has an Instagram, Facebook, and Twitter in order to reach its intended audience. I post regular updates on these channels both daily and weekly posts to engage with my target audience and notify then of the app before it is launched - so my audience will remember the name 'Codability' increasing the likelihood of downloads of users and recognition of the app.
Testing and Evaluation
Testing and Evaluation have been done during the prototype process I have tested:
Moving forward, further debugging needs to be done to ensure it is working in Android and now more development on each of the sections to ensure each section is working and testing on multiple devices before moving onto another section.
Bibliography:
UX Movement. 2011. Why users click right call to actions more than left ones. [Online]. Available from: https://uxmovement.com/%20buttons/why-users-click-right-call-to-actions-more-than-left-ones/
I have created a more detailed sitemap for the application after reviewing the original sitemap in the pitch document I found it was not detailed or showed the structure of the application clearly. Therefore, the new sitemap showcases the Codability structure and layout of the application. It outlines the key features and pages available to the users and highlights the process users will go through when using the app.
App Wireframes
InVision Prototype
I thought it would be useful to create a prototype on InVision to test the designs and feel of the app before I started with development. I drew out and then digitally made the new wireframes and then progressed to importing them into InVision. I was then able to export this to share and I made a screen recording to show 5 members of my target audience as well as a UX designer. This really helped to evaluate and test the design and so any feedback could be implemented into the development stage. The feedback I gained from the users and UX designer was:
- Good use of colour and clear layout
- Change the navigation so the notifications are in the top right-hand corner and the profile should be placed in the bottom navigation as it is a key feature
- Have the submit button consistently on the right-hand side as research suggest "this is a clear call to action point as users read left to right" (UX Movement, 2011).
App Prototype
For the prototype, the Cordova app has been set up for both IOS and Android platforms with the app logo created. I aimed to get the login and registers forms to work with validation and displaying relevant error messages. As Cordova does not support PHP I have had to pass the data through an AJAX call.
- Set up database
- Login and Register forms with validation
- Logout functionality
- Basic HTML and CSS for all pages
- 2 coding challenges
- Javascript to show the settings and notifications
MySQL Database with registered users in the table has been completed with the comments table has been set up or the discuss page forum using phpMyAdmin.
A 'cordova build' needs to be run whenever a change is made in the application so the app is up to date and ready for testing and viewing on the emulator. The screenshots show the app on the emulator with the functionality in place. Users are able to complete a coding challenge quiz to test their learning and once completed with will unlock the next stage for the user. This makes it interactive and engaging for the user and positive feedback has come back from the user I tested with on the device.
GitHub
I have set up a GitHub Repository to host my coding files and as a back up for all my final year project code. I make regular commits and it means I can see the history of my code and how it has progressed. Moreover, I can revert back to code if I need too and it also makes the code sharable and easy to access on any device.
Marketing
I have set up the social media to start marketing the app before it is published on the market as teaser marketing. Codability has an Instagram, Facebook, and Twitter in order to reach its intended audience. I post regular updates on these channels both daily and weekly posts to engage with my target audience and notify then of the app before it is launched - so my audience will remember the name 'Codability' increasing the likelihood of downloads of users and recognition of the app.
I also plan to make a 10-second animation to highlight the key features of the app and introduce 'Codability' to the world. A blog post on social media and the research I have undertaken will follow in the upcoming weeks.
Testing and Evaluation
Testing and Evaluation have been done during the prototype process I have tested:
- Wireframes, designs, and layout with InVision and focus group/UX designer
- Tested on IOS emulator
- Tested on Android emulator
- Tested on chrome and inspected in the browser for console errors
- Tested on a real device with user
Moving forward, further debugging needs to be done to ensure it is working in Android and now more development on each of the sections to ensure each section is working and testing on multiple devices before moving onto another section.
Bibliography:
UX Movement. 2011. Why users click right call to actions more than left ones. [Online]. Available from: https://uxmovement.com/%20buttons/why-users-click-right-call-to-actions-more-than-left-ones/
Comments
Post a Comment