Contents

• Technologies Used
• Summary of Work
• Initial Research and Analysis
• Upgrading the Codebase
• User Experience Improvements
• Other Updates and Improvements
• Learnings from the Internship Experience

Technologies Used

Summary of Work

• The original application was built using Ionic 1 and AngularJS 1.x. This app was upgraded to Ionic 4.x and Angular 7.x.
• Upgrading the Ionic and Angular versions improved the app load times by at least 50% and made the overall user experience a lot smoother and faster.
• The user interface of the application was improved to make it cleaner and bring it in line with the industry standards.

Initial Research and Analysis

Before starting the work of upgrading the app, the original app was tested thoroughly to find any bugs or issues in the app and to find any potential components which can be updated. Additional research was carried out to study the products offered by competitors to understand the areas where the original app could be improved. After receiving the source code for the app, the structure of the app was studied in further detail to understand the functioning of the app and to find any other potential bugs or issues.

Upgrading the Codebase

The first step after studying and analyzing the app was to upgrade the codebase to Ionic 4.x and Angular 7.x. This upgrade alone massively improved the performance of the app. Even though it is hard to quantify the performance improvement in terms of numbers, initial testing showed that the app-load performance had improved drastically. The load time for the old version was approximately 5.54 seconds whereas the load time for the new app was 1.42 seconds (average of 5 runs). This translates to a 75% improvement in the initial load time for the app. Other improvements from the new version of Ionic were also reflected in the app which meant that the app ran at 60 FPS at all times and provided a smoother experience for the users.

User Experience Improvements

The original app used the in-app browser to display information from the company's website. This saves a lot of time by making it easier to make changes to the information or adding new content. However, when a user is not connected to the internet, the in-app browser is unable to load the content and display it. The default browser-provided error page was unappealing and gave away the fact that a web page was being displayed to the user.

To solve this issue, custom error pages were added to the in-app browser which is displayed to the user when they're not connected to the internet or if a page fails to load.

Other Updates and Improvements

Updates to the app were primarily focused on improving the user interface. Some examples of this include the sidebar which contained links for navigation. In the original version of the app, the sidebar had links arranged in the form of bubbles which made it look cluttered. This was updated to a list of buttons that had a clearly defined tap area and looked neater.

Another example of an improved user experience was the login page. Clearly defined form validation was added to the login page to make the user's login flow smoother and the error messages were updated to provide more accurate information to the user.

Learnings from the Internship Experience

• This was my first internship experience and it provided a glimpse into what it takes to be a developer working for a company. This experience also taught me about effective communication in a professional environment.
• The internship experience helped to get a better understanding of mobile and web technologies and how to build projects while collaborating with teammates.
• Finally, the internship gave me an opportunity to test my skills and to find my weaknesses, and work on them.