Challenge
Rebuild roster feature in PhorestGo app for React Native rebuild, improving intuitiveness and functionality where possible. By making it more intuitive, we aim to significantly enhance the app's usability and eliminate the need to switch to the desktop version for managing the staff roster.
Process
Discovery Phase:
Conduct user interviews to identify the most common roster changes made by clients.
Analyze user pain points and prioritize clear functionality based on their feedback.
Design and Prototyping Phase
Leverage existing desktop functionalities while ensuring a smooth mobile experience.
Define core functionalities and limitations for team alignment before development begins.
Prototype the mobile roster using Figma and Maze to ensure intuitive user interactions and task completion.
Conduct client testing on prototypes to gather feedback and iterate on design.
Development and Handover Phase
Maintain ongoing communication with engineers to confirm expected behavior, functionalities, and outcomes.
Create comprehensive Figma documentation outlining UI elements, interactions, and design decisions.
Work closely with the engineering team until a production-ready mobile roster feature is available.
Solution
The team delivered a user-friendly roster feature that significantly improved usability and user experience compared to the previous version. Showed a considerable decrease in the time needed to complete tasks within the roster.
The interface prioritised clarity with a simple and intuitive layout. Clear information hierarchy allowed users to quickly understand the roster view. Colour-coded entries (based on existing desktop patterns) and clear icons for statuses (Not Working, Holiday, Training, Sick, Custom) allowed for at-a-glance roster comprehension and faster task completion.
To further enhance efficiency, we implemented a calendar view directly accessible from a specific staff column. This allowed users to make quick changes to staff working hours for a particular day, reducing the number of interactions needed within the app.
Takeaway
Overall, the solution the team created was effective in improving understanding and usability of the roster app. Collaboration throughout implementation with the Product Manager (PM) and engineer proved critical for a smooth development process. This project highlighted the importance of communication throughout the process and understanding technical limitations and iterating where needed to meet these constraints.