Ayoub J. - UX Designer - Professional Projects

About my role in this project and my global feeling

As the Principal UX Designer, I worked on this project from October to January 2025. This application, developed for a nonprofit organization, aims to streamline the process of order management and tracking. It comprises both a mobile and a web application, each tailored to specific user roles and needs.

The mobile application is designed for Order Photographer, while the web application targets Managers. The project presented unique challenges, including limited development time and the need to accommodate multiple user roles with distinct functionalities.

Development is currently underway, with the applications set to launch in June 2025. Once deployed, the system will enhance efficiency and transparency in order management for the organization and its beneficiaries.

Problem Statement

Order management and tracking often rely on manual processes, leading to inefficiencies and errors. The goal of this project was to digitize and centralize these processes, providing a seamless experience for Photographer and Managers. By doing so, we aim to improve order accuracy, save time, and provide better visibility to all stakeholders. Edit (Jan. 2025) : A modification has been made due to change in the field. We have now only 2 roles : The Photographer and the manager + a new process to manage the orders We also decided, to keep a coherence between our sponsorship to cancel the end user part. They will receive a email for the follow-up until the order is completely processed

Challenges and Context

This project involved unique constraints, as it was developed on a volunteer basis with limited resources and time. Key challenges included:

Multiple User Roles: Designing interfaces for three distinct roles with different functionalities and workflows.
Scalability: Ensuring the system could handle simultaneous order tracking for end-users.
Resource Optimization: Balancing the need for robust features with the constraints of a volunteer-driven project.

User Research and Needs Gathering

To ensure the design aligned with user expectations, we conducted interviews with potential users from each role (Managers, Photographer) and analyzed the workflows of existing manual processes.

Our User Research Approach

We followed a structured approach to gather insights:

✅ Interviews: Spoke with 2 Managers and 3 Photographer to understand their day-to-day challenges and requirements.
✅ Workflow Analysis: Observed the current manual processes to identify pain points and opportunities for improvement.
✅ Feedback Loops: Created iterative prototypes and gathered feedback to refine the user interfaces.

What We Learned

Key insights included:

✅ Photographer: Needed a quick and reliable way to scan orders, upload photos, and confirm tasks.
✅ Managers: Needed a centralized dashboard to manage users, generate QR codes, and monitor overall performance.
✅ End-users: Expected a clear and accessible order tracking feature with real-time updates.

User Personas

To better understand the different types of users, we created personas. These profiles allowed us to define the specific needs and goals of each user group and tailor the tool to their objectives.

Manager

Photographer

User Journey Mapping

Hassan - Manager

Phase: Check number of other

Emotions: 😊 Confident, 😌 Reassured
Pain points: N/A, the dashboard is easy to use, only for consultation and display the good information.
Opportunities: ✅ Offer the possibility to filter on data, and interact with the dashboard.

Phase: Download a QR Code

Emotions: 😎 Focused, 😊 Satisfied
Pain points: Due to multiple orders, it can occur electricity cuts during the process (Mauritania).
Opportunities: ✅ In addition to the status by order (downloaded or not) add a queue and save after each download.

Phase: Validating the order

Emotions: 😊 Accomplished, 😌 Relieved
Pain points: Concerns about accidentally validating incorrect orders.
Opportunities: ✅ Include a confirmation dialog before final validation to reduce errors.

Khalid - Photographer

Phase: Scanning the QR code

Emotions: 😊 Focused, 😌 Motivated
Pain points: Difficulty in scanning damaged or poorly printed QR codes.
Opportunities: ✅ Implement error handling and allow manual entry as a backup option.

Phase: Preparing the order

Emotions: 😎 Efficient, 😊 Productive
Pain points: Keeping track of multiple items in a single order.
Opportunities: ✅ Provide a checklist within the app to help track preparation progress.

Phase: Updating the order status

Emotions: 😊 Accomplished, 😌 Relieved
Pain points: Ensuring the status update is correctly reflected in the system.
Opportunities: ✅ Add a success notification and real-time synchronization with the central database.

Design Process

Photographer Path

This diagram illustrates the journey of the Photographer using the features for his path.

Admin/Manager Path

This diagram illustrates the journey of the admin & manager using the features for his path.

Solution & Features

The solution includes a mobile application for Photographer and a web application for Managers. The features are tailored to each user role:

✅ Order Assignment: Photographer can scan QR codes, upload order photos, and validate assignments.
✅ Order Preparation: Photographer can also update order statuses by scanning QR codes.
✅ Centralized Dashboard: Managers can view all orders, generate QR codes, and manage user accounts.

This system ensures efficiency, transparency, and scalability for all stakeholders involved.

Prototypes & Mockups

Interactive Prototype

Explore the interactive prototype created with Figma, which simulates the full user journey for all type of users.

Photographer path's Figma prototype

Manager path's Figma prototype

UI Mockups

Below are the mockups of the key screens in the application, demonstrating how the user interface supports the workflows for each type of users.

Photographer

Admin/Manager

Test, Impact and Results

Although still under development, the project has already demonstrated significant potential during initial prototype testing:

Test Methodology

Early tests involved real-world scenarios with each user group:

✅ Photographer: Tested the mobile application for order scanning and status updates.
✅ Managers: Evaluated the web dashboard for ease of use and comprehensiveness.

User Feedback

Photographer found the mobile app easy to use, while Managers praised the centralized features for user and order management.

Challenges

Some challenges encountered include:

✅ Onboarding: Simplifying the onboarding process for non-technical users.
✅ Scalability: Ensuring the system could handle high volumes of concurrent users.

Impact

✅ Improved efficiency in order assignment and preparation.
✅ Enhanced transparency for end-users tracking their orders with the Photographer work.
✅ Simplified management processes for Managers.

Tools Used

✅ MakeMyPersona (Hubspot) for personas design.
✅ Photoshop for screen design and branding adherence.
✅ Figma for interactive prototyping and design.
✅ Trello for agile management.
✅ Microsoft tools for tests/reflection (Forms, Teams & Whiteboard).