Australian Smart Group is a technology company specializing in electrical contracting and smart building technologies based in Canberra (Australia).

User feedback led me to identify a significant user experience issue: While the Employee Portal (ASG’s Intranet Platform) was an essential tool for over 30 employees across various departments, it was not mobile-optimized. This lack of mobile compatibility posed a considerable problem, especially for on-site employees frequently accessing the portal via mobile devices. 

As the Product Manager at ASG, I was responsible for the overall product strategy, planning, and execution throughout the product lifecycle. I served as a bridge between different teams and stakeholders, coordinating and aligning the efforts of everyone involved.

In my role as a UI/UX Designer, I was involved in every step of the design process. My primary focus was to create a seamless, intuitive, and efficient user experience for the Employee Portal’s mobile version.

The Employee Portal (web-based intranet) was a vital tool for over 30 employees across various departments. User feedback highlighted a clear need for better mobile compatibility, especially for on-site workers. We needed to maintain all web version functionalities while optimizing the user interface for a range of screen sizes, network conditions, and real-world use cases.

How might we transform ASG’s Employee Portal into a mobile-friendly application that retains all its key functionalities while improving the user experience for on-site workers?

The primary goal was to make the Employee Portal a mobile-friendly experience, preserving all functionalities offered in the web version while optimizing the interface for mobile users.

The design approach had to consider various factors including the wide range of screen sizes, varying network conditions on sites, and the practicality of usage given the nature of ASG’s on-site work.

In our previous work on the web application, we conducted extensive UX research. With this strong foundation, our focus now shifted towards UI and interaction design. The first phase involved translating the existing web functionalities into mobile-friendly features.

Based on this research, we defined the challenge: 

How might we transform the ASG’s Employee Portal into a mobile-friendly application that retains all its key functionalities while improving the user experience for on-site workers?

With a clear problem defined, we began to ideate, translating the existing web functionalities into mobile-friendly features.

After ideating, we moved on to the prototype stage of the design thinking process. This began with creating low-fidelity wireframes. The advantage of low-fidelity wireframes is that they are quick to produce and modify, allowing us to rapidly iterate and experiment with different layouts and features

Next, we created mid-fidelity wireframes. These wireframes offered a more detailed view of the app, including more precise placement and sizing of elements, and provided a clearer sense of the look and feel of the final product.

The UI design phase also involved careful attention to the aesthetics of the application, ensuring it was not just functional, but also visually pleasing. 

The design had to be consistent with the brand, clean, and intuitive. Moreover, the use of conventions like bottom navigation bars, collapsible menus, and touch-friendly buttons were considered.

Interactions were designed to be user-friendly. Buttons had to be large enough for fingers, swipe gestures were used for navigation between screens, and feedback was provided for user actions (like successful form submissions).

The final phase of the ideate and prototype phase was the creation of high-fidelity wireframes, bringing the app’s visual and interactive design to a near-final state.

The next step was to bring these designs to life with an interactive prototype using Figma. This helped the team to test the app’s functionalities and gather more feedback. Several rounds of usability tests were performed with a diverse group of employees to ensure a wide range of experiences and use cases were considered.

We conducted usability tests to gather feedback on the app’s functionalities and gather more feedback. Several rounds of usability tests were performed with a diverse group of employees to ensure a wide range of experiences and use cases were considered.After all necessary refinements were made based on the feedback from the Test phase, the Employee Portal mobile app was launched. It was made available for iOS and Android platforms, ensuring broad accessibility. Post-launch, the team continued to gather feedback to improve the app’s UI and UX further.

The final product, the transformed Employee Portal mobile app, was launched on both iOS and Android platforms, ensuring broad accessibility. It maintained all web version functionalities while providing an enhanced mobile user experience.The new mobile application has been positively received by employees who now can use the Employee Portal more efficiently. This successful transition into a mobile-friendly platform improved employee productivity and satisfaction, serving as a testament to the importance of mobile optimization in today’s increasingly mobile-first world.

Designing the mobile version of the Employee Portal was a challenge that required careful translation of the existing features from a desktop-centric design to a mobile-friendly design. By focusing on the UI design and user interactions, the team was able to deliver a solution that met the needs of the on-site workers and improved the overall user experience for the entire workforce.

This project serves as a testament to the importance of mobile optimization in today’s increasingly mobile-first world. It emphasizes the need for UI/UX designers to pay careful attention to user feedback and to be willing to adapt and modify designs as technology and user needs evolve.