Reading time: ~ 25 minutes
The detailed version offers a deeper dive into the design process, also covering additional information along the way.
Summary
There was a high demand for a mobile version of the ATOSS Staff Center to stay competitive and attract both existing and new customers. Other reasons included market expansion and the need to improve the user experience by using mobile-specific features like the camera, push notifications, GPS, and biometrics.
Although ATOSS had an app called "ATOSS Workforce Management", it received consistently poor feedback. The app was outdated, not developed natively for iOS and Android, and only covered a small part of the Staff Center’s use cases. It didn’t fit well with the ATOSS product range.
ATOSS developed a new app, built natively for iOS and Android. Goal was to offer the full functionality of the desktop solution. When I joined, the project was already underway, and I became involved during a critical phase of development.
I was responsible for translating several desktop use cases into mobile, both visually and interactively. This included adapting the design of components to work natively on Android and iOS. I selected the best design components to fully represent each use case (server-driven design). Additionally, I managed technical projects like IAM integration, with a strong focus on user experience, and co-led the First Customer Shipment of the app. I also reviewed each component during the QA phase to ensure quality.
Understanding the Use Cases
At the start of each mobile "translation," I immersed myself in understanding the specific use case. I reviewed existing Desktop User Journey Maps and adapted them for mobile, ensuring they aligned with the mobile navigation structure and information architecture. The existing Staff Center Personas were used as a model throughout the development process. Additionally, I carried out field research on mobile best practices and conducted competitor analysis to understand how others in the market handled similar scenarios. I also interviewed product managers to gather specific user requirements and identify desktop issues that could be resolved in the mobile version.
Brainstorming and Ideation
I facilitated brainstorming sessions with colleagues from product management to capture precise user requirements for each use case and component design.
We identified: Reusable mobile components and where new components were needed to ensure consistent interaction and functionality with the desktop version.
All ideas were checked for technical feasibility with the iOS and Android development teams. For new components, I created low-fidelity designs and reviewed them with design colleagues and stakeholders. I also developed low-fidelity prototypes and tested them with selected customers to uncover potential issues. Based on feedback, some mobile use case were simplified, or certain components were omitted to improve ease of use.
For example, the vacation request feature on desktop had a complex date picker with a drag function, but we simplified this for mobile to better suit user needs.
Always these Last-Minute Requirements!
New requirements often emerged last-minute due to very specific and individual customer scenarios.
ATOSS solutions are highly flexible and must accommodate customer-specific needs, especially in areas like workforce management and time tracking. These requirements were non-negotiable and had to be addressed immediately. We frequently had to adapt or even redesign entire components/flows on short notice. Over time, we learned to anticipate these scenarios early in the process.
Once all components were finalised, I created high-fidelity designs based on the low-fidelity versions. After approval from all project participants, I converted these into pixel-perfect designs and added them to Sketch and Figma libraries for use in creating mockups or interactive prototypes.
Final Design and Handoff
For development handoff, I provided detailed design specifications for each Android and iOS component, along with interaction and usage guidelines. This ensured an efficient development process, with all design requirements clearly documented.
The Impact
Over the course of 1.5 years, I translated approximately 35 desktop designs into iOS and Android, creating around 70 mobile design components per operating system (about 60% of all components). I led the UX/UI design and testing for about 15 use cases.
The app’s rating improved to 4.0 on both iOS (179 reviews) and Google Play (359 reviews), compared to 2.4 for the previous version.
This represented an approximate 66% increase in customer satisfaction. (It’s important to note that many negative reviews were due to configuration issues on the customer side, not the app itself, which further highlights the success of the redesign)
Next Steps
I would evaluate the most frequently licensed use cases and conduct tests and customer interviews to identify issues caused by mobile technology limitations. Based on this, I would aim to refine or potentially even remove certain features to make the app more mobile-friendly and -targeted.
Additionally, I would explore extending the app’s functionality to other devices, such as smartwatches, to enhance the user experience even further.