Staff Shop
The "Staff Shop" feature was designed to address a key gap in the MIS: enabling school staff to purchase products directly through the system. Customer feedback highlighted the need for staff members to access the same convenience as parents when purchasing school-related items, such as T-shirts for events, tickets, uniforms, and even topping up pre-pay balances for meals. This feature sought to deliver a seamless, user-friendly shopping experience tailored specifically for staff.
Challenges
Balancing Functionality with Simplicity
The feature needed to cater to diverse staff needs while maintaining a straightforward interface. Achieving this balance required careful prioritization of features and progressive disclosure to avoid overwhelming users.
Handling Complex Flows
Integrating related functionalities, such as managing outstanding payments and requesting refunds, without disrupting the primary shopping flow posed a design challenge. This was resolved by creating dedicated pages accessible from the main interface.
Performance Considerations
Ensuring the system could handle large product inventories and simultaneous staff interactions required close collaboration with developers to optimize backend performance.
Results
Streamlined Purchasing for Staff
The Staff Shop provided a centralized platform for staff to purchase items conveniently, saving time and effort compared to traditional processes.
Positive User Feedback
Post-launch surveys indicated a 35% increase in user satisfaction with the new feature. Staff highlighted the simplicity of the shopping experience and the ease of managing payments.
Increased Adoption of MIS Features
By integrating staff purchasing within MIS, the feature encouraged greater use of the platform, reinforcing its role as a comprehensive school management solution.
Design Process
Discovery Phase
The project began with a requirement-gathering phase, involving multiple user groups and stakeholders to define the scope of the Staff Shop. Key findings included:
Staff wanted a clear product listing page with quick access to essential product details.
The purchasing process had to be simple and efficient, minimizing steps while offering flexibility (e.g., selecting sizes, colors, or quantities).
Users required additional functionalities, such as checking order history, managing outstanding payments, and requesting refunds.
These insights informed the creation of user personas and journey maps to guide the design process.
Design and Development
The design process spanned 3 sprints, during which agile methodologies were employed to iterate on the product.
Key Features:
Product List Page: Displays items available for purchase with "Add to Basket" buttons. A pop-up modalprovides more details (e.g., size, color, quantity options) and allows for item customization before adding to the basket.
Slide-In Basket: A persistent, accessible cart that enables users to review their selections and navigate to the checkout flow effortlessly.
User-Friendly Checkout: Simplified checkout process, optimized for speed and ease of use.
Additional Pages:
Outstanding Payments: Allows staff to view and manage unpaid balances.
Dinner Balance Management: Enables staff to pre-pay for meals.
Order History: Displays past purchases with an option to request refunds.
Prototypes were created in low-fidelity wireframes for early feedback, followed by high- fidelity interactive mockupsfor usability testing. Tools like Figma and InVision facilitated rapid design iterations.
Testing and Validation
User testing was conducted at the end of each sprint to validate the design and functionality.
Key feedback included:
Making the slide-in basket always accessible for better navigation.
Adding a confirmation step in the checkout flow to prevent accidental purchases.
Improving visibility of product details in the pop-up modal to reduce confusion.
This feedback informed iterative refinements, ensuring the final design was both intuitive and efficient.
Key Takeaways
Iterative Design Matters
Regular user feedback throughout the design process ensured the final product met real-world needs.
Simplify, Then Add Depth
Starting with a minimal, intuitive flow and layering additional functionalities (e.g., refunds, pre-pay balances) helped avoid complexity.
Collaboration is Critical
Cross-disciplinary workshops involving stakeholders from UX, development, and QA teams ensured technical and design alignment.
The "Staff Shop" feature successfully bridged the gap in the MIS, offering staff a user-friendly and efficient way to manage purchases, ultimately enhancing their overall experience with the system.
