Mahjouba Initiative
Revitalizing the Moroccan craft sector through a digital gig economy.
Sep-Nov 2023 | DALI Lab (Product & UX Designer)
Team
Skills
Deliverables
Timeline
We designed a mobile app that connects Moroccan craftspeople to the Mahjouba Initiative's electric motorcycle project.
BACKGROUND
This was a DALI Lab project for the Mahjouba Initiative, which aims to integrate traditional Moroccan craft knowledge with the EV industry by creating community-driven, artisanal electric motorbikes. Mahjouba assembles the bikes, while contracting craftspeople in Moroccan cities like Marrakesh to manufacture and deliver individual parts.
I collaborated with two other co-designers to interview artisans and stakeholders, iterate wireframes, and conduct usability testing. We worked in an Agile team to design, develop and deploy the craftsperson-facing app in 10 weeks.
PROBLEM
Communication gaps between craftspeople and the Mahjouba Initiative hinder the motorbike production journey.
The Mahjouba Initiative's reliance on word of mouth to share available manufacturing jobs limits motorbike production scale. This practice also prevents artisans from finding roles tailored to their skills and available materials.
OPPORTUNITY
How might we align artisan capabilities and the Mahjouba Initiative’s production needs to ensure mutual success?
PROCESS
RESEARCH
Review of Moroccan UI/UX
Exploring Moroccan Design Priorities
We analyzed Arabic text and Moroccan digital interfaces, noting best practices for a user-friendly experience. Our focus included right-to-left text flow, horizontally flipped icons, and accessibility considerations for users with lower literacy levels.
RESEARCH
User Interviews
Gaining firsthand insights from a craftsperson and interpreter in Marrakesh.
With an interpreter's help, we interviewed several craftspeople based in Marrakesh. We asked about their approach to building parts, their communication with the Mahjouba Initiative, and how their digital technology use impacts this interaction.
Reputation Through Word of Mouth
Faster Builds with Expertise
Illiteracy Among Craftspeople
DEFINE
Needs, Pain Points
We channeled our user research findings into critical pain points that prevent effective digital collaboration between craftspeople and the Mahjouba Initiative.
Inefficient Onboarding
Work is Assigned, Not Chosen
Overreliance on Verbal Updates
DEFINE
HMW Statement
How might we empower craftspeople to intuitively access and complete parts jobs?
IDEATE
Goals
Multilingually Friendly
Accessible for Beginner Literacy
Reliable
IDEATE
Brainstorm
We first created a user flow chart from the rough user flow and basic solution features that our client handed over to us, before diving into ideation sketches. This process helped us visualize and brainstorm key features of finding craft opportunities with Mahjouba, such as filtering by desired material and providing confirmation when a user successfully claims their job.
IDEATE
Flow Sketches
Connecting Craftspeople to Viable Parts Jobs
After clarifying priorities and deciding main flow steps with our client, we visualized our various feature ideas by drawing a first pass at flow sketches to illustrate a craftsperson's job selection process.
Since we were designing within a tight 10-week sprint, we first ensured our flow ideas were feasible by checking with our team's developers.
PROTOTYPE & TEST
Lo-Fi Wireframes
Simplifying Onboarding and Job Matching
We created low-fidelity wireframes in Figma that illustrated our two main user flows: onboarding and job selection, while keeping our key constraints of multilingual-friendly, accessible design in mind. While waiting on Arabic translations of our text, we initially created designs in English.
PROTOTYPE & TEST
Moodboard
Drawing from Moroccan Architecture
Given this project's emphasis on revitalizing Moroccan tradition, we wanted to explore how we could incorporate Moroccan architecture and widely used colors into our solution. With our client's permission, we experimented with various color combinations and arch shapes while beginning hi-fidelity UI iterations.
PROTOTYPE & TEST
Style Guide
We created our style guide with the Mahjouba Initiative's main font and bright marigold theme in mind. Inspired by Figma and Gumroad's striking neubrutalist color schemes, we aimed to enhance readability through a playful yet defined UI design: bold colors, striking text and drop shadows to indicate if a button is clickable.
A swipe call-to-action for accepting and completing a job encourages conscious decision-making from users. The archway UI during onboarding preserves Mahjouba's logo shape while conveying a sense of unity and continuity.
PROTOTYPE & TEST
Hi-Fidelity Prototype
Let's help users feel confident about job selection
Creating our style guide came hand-in-hand with iterating on flows from user feedback and DALI design critiques. As we evolved our wireframes into high-fidelity mockups that followed the right-aligned layout our users were used to, we prioritized clarity and ease of use to help craftspeople find job matches in the Mahjouba supply chain. To ensure an inclusive, comfortable experience, we remained attentive to our users' varying literacy levels and multilingual needs.
Friendly, Focused Onboarding
We refined the onboarding flow to begin with language selection, creating a more welcoming and intuitive opening interaction for non-English speakers. After conferring with our developers, we also introduced real-time visual feedback for ID photo uploads, validating image quality for users before moving forward.
Balancing Visual Style and Function
Users thought our initial job card display was too small and lacked key context. They requested larger, zoomed-in photos with relevant information like due date and drop-off location. We realized even though the arch frame was a culturally resonant element of Mahjouba’s brand, it was too horizontally constraining and restricted an accessible, informative job card design.
We iterated on the app UI with larger cards that highlighted visuals and key details more clearly, leaving the arch motif for the onboarding flow. Reserving the arch frame for onboarding also gave it symbolic presence as an inviting gateway into the Mahjouba world.
Clear Path to Job Submission
In alignment with job search, we designed the job completion flow to emphasize transparency and deliberate action. Key details like due date, required parts, and delivery location are highlighted so craftspeople know exactly what is expected. To reinforce intentional submission, we added a motorcycle wheel swipe to make the final handoff feel engaging and conclusive. A share feature on the "My Job" page also enables users to send blueprints via WhatsApp, the most relied-upon tool among our users and stakeholders.
