Introduction
This blog post will essentially be a recap of the past Milestones and the work completed throughout the weeks of absence. This includes the trials and tribulations as well as the next steps (within my roles) for our Term Project. The main focus on my behalf has been the progression of the responsive mobile pages. As this task comes to an end, I will be shifting my focus to more UX designing with animations for the Master and Student both on mobile and the VR.
Challenges and Successes
Throughout the process of the term project, I have encountered several major setbacks due to health issues. This has had a great impact on my learning and development. However, due to supportive team members, they have made the journey less stressful.
The greatest challenges I have encountered would be implementing the JavaScript to the Sequence mobile page. I feel that it was more challenging and time consuming as I had no anticipated the amount of JavaScript needed to create the buttons and send functionalities for this page. The HTML and CSS was more or less as anticipated with no major roadblocks. In order to execute this process as smoothly as possible, I did a lot of refresher work on web development (as it had been a while since doing any HTML/CSS/JavaScript!). Another roadblock which I encountered was the difficulty of keeping the layout of the pages for a landscape screen. As our mobile pages are always landscape, it was more challenging than expected to make sure that the pages would work on landscape as I had created for the designs, yet would still work if the mobile device was to be on portrait. For a majority of the pages this transition was fairly smooth. However, for the pages with tables (such as sequence page, performance page, etc.) were more challenging.
I found that regardless of these challenges and setbacks, I feel that I have accomplished some work that I am pleased with. Unfortunately, given health roadblocks, I have been unable to perform and complete work to my full potential/to the degree that I would like. As anything in life, everyone encounters these setbacks, I feel I have somewhat succeeded in trying to push through to complete tasks. I feel once I have revamped the mobile pages by adding small details and elements, I will be more satisfied with the end result.
I felt I had achieved a lot with the JavaScript, not necessarily in the content created or the end product, but with the progression of what I learned from before starting the mobile pages, to my knowledge and understanding now. Although it meant spending more time, I felt it was beneficial in the long run and was a great learning curve.
Tasks Completed & Time Spent
To begin, I broke down the elements that needed completing for the responsive mobile pages. The starting point was creating assets as well as incorporating design concepts from the lander page as well as the general aesthetic we are aiming to have.
In order to make sure I would be able to create this cohesive design concept, I created mock responsive templates for the mobile pages. These pages consisted of 6 responsive pages, alongside 3 pages that are presented to the Master on the mobile device, while waiting for responses from the Student in VR. I created these pages in Adobe XD CC. I decided to use this platform to create the mockups as I was able to create the pages responsive and also test them on multiple mobile devices (both Apple and Android) to ensure a clean and cohesive design.
I roughly spent 2.5 - 3.5 hours creating the layout and making sure it worked with our general design concept, working with the designs created for the lander page. Once this was completed, I then tested the XD on both Apple and Android devices. I found that I needed to change a few elements as there was a slight shift in design (Android devices had less white space, creating too much of a crowded feel, specifically for the Sequence page).
To continue, I then began to implement these design elements using HTML, CSS and primarily JavaScript. This process was the bulk of the work I completed. I found that after spending 1-2 hours refreshing myself on HTML/CSS/JavaScript, I was able to work a lot better and more efficiently. I was generally surprised of how much JavaScript needed, in retrospect, it should not have been a surprise considering the buttons, sending functionality. However, it was just something that I had not put enough thought into. I feel the reason for this was JavaScript was not my strong point, and I was more focused on the design concepts I had created that I implemented through the HTML/CSS rather than the interactions through JavaScript. I spent approximately 12-13 hours completing this.
Conclusion/Next Steps
In regards to my tasks, I am overall content with the progression made. Although the weeks have not gone as anticipated, I have been trying my best in the circumstances to produce the content needed for the team. The next steps I will be shifting my attention to animations for the UX for the VR as well as revamping the mobile pages. Once these tasks have been completed, I will work alongside my team members in order to complete any tasks needed (as the UX is not necessarily the main concern with our Beta presentation this week).
Comments