Projects

About Me

Resume

Projects

About Me

Resume

Projects

About Me

Resume

Mahjouba Initiative

Revitalizing the Moroccan craft sector through a digital gig economy.

Sep-Nov 2023 | DALI Lab (Product & UX Designer)

Team

1 Project Manager

3 Product Designers

4 Software Engineers

Skills

Mobile UI/UX Design

Research

Interaction Design

Deliverables

Style Guide

Figma Prototype

Timeline

10 weeks

Skills

Mobile UI/UX Design

Research

Interaction Design

Deliverables

Style Guide

Figma Prototype

Timeline

10 Weeks

Background

Research

Define Problem

Ideate

Iterate

Final Designs

Reflect

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.

PROBLEM

OPPORTUNITY

How might we align artisan capabilities and the Mahjouba Initiative’s production needs to ensure mutual success?

OPPORTUNITY

SOLUTION

A gig economy app that enables craftspeople to seamlessly discover and complete relevant parts jobs.

SOLUTION

Jump to final designs

Wondering how we arrived at this solution?

Explore our design journey below!

Wondering how we arrived at this solution?

Explore our design journey below!

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

RESEARCH

User Interviews

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

Testing Plan

Though we drew heavily from available client and user insights, our ability to conduct direct testing this quarter was limited by craftspeople’s busy schedules and time zone differences.

To prepare for next term's usability testing with more craftspeople, we outlined a testing plan to validate key assumptions about navigation clarity and task efficiency.

Objectives

Clarity of key job details

Do cards display enough information for users to smoothly claim and complete jobs?

Workflow compatibility

Does onboarding and job submission align with craftspeople’s existing tools and documents?

Confidence in submission

Do photo upload and swipe interactions prevent accidental errors and clearly convey job completion?

Methods

Participants

5-7 craftspeople with lower literacy levels from Mahjouba's network

Format and task flow

Moderated mobile tests where craftspeople sign up, claim a job, and submit after finding and sharing key information.

Metrics

Measure task success rate, frequency and type of error, along with user confidence ratings

PROTOTYPE & TEST

Final Designs

Smooth, Intuitive Onboarding

Craftspeople are first guided through an onboarding flow tailored for multilingual and lower-literacy users. Each step ensures they can easily provide the essential information needed to contract with Mahjouba.

Personalized Job Search

Craftspeople can customize their job feed by filtering based on materials and location—ensuring only jobs that match their preferences appear.

Secure Job Selection and Submission

Craftspeople can browse job info pages to find the best fit before swiping to claim one job at a time. The job status page then offers essential instructions, details, and tools to help them submit their work seamlessly and confidently.

REFLECT

Takeaways & Next Steps

Consider the stakeholder ecosystem

If end users were out of reach, we turned to our client’s daily interactions with craftspeople so our decisions still closely reflected current craft practices and needs.

When in doubt, go back to basics

After exploring elaborate arch variations and color palettes, critiques pushed us to limit visual clutter and focus on core usability for a striking, yet straightforward style guide.

Prioritize cross-functional input

Tight feedback loops with our project manager and engineers helped us try multiple design approaches to align with stakeholder expectations, while grounding our ideas in technical feasibility.

Designing for Mahjouba pushed me to adapt quickly to a new cultural and technical context. In 10 weeks, our team shaped a mobile marketplace that gives Moroccan craftspeople more intuitive access to job opportunities.

Here are 3 key takeaways I learned from this sprint.

The Mahjouba Initiative's next phase will build on our product for craftspeople by expanding into a consumer-facing app. Early concepts we discussed like craftsperson profiles can help riders feel connected with the makers behind their bikes.

Language Considerations

Language in Morocco is far more layered than we assumed. Everyday conversation is often in various Arabic or Berber dialects, with French for business terms. Limiting our platform to Modern Standard Arabic and French did not fully reflect the languages craftspeople use on the job.

To shore up this usability gap, future iterations need deeper localization: supporting dialects and blended language use to more closely match real-world communication patterns.

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.

Image of people working at their computers in an office

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.

Starting with language selection

Choosing a language as the first call to action helped users feel immediately understood and in control of their experience.

Instant Input Feedback

Giving users immediate visual confirmation of image quality enabled them proceed with confidence, reducing avoidable errors before submission.

Choosing your language first

Language selection as the first call to action helps users feel immediately understood and in control of their experience.

Instant input feedback

Giving users immediate visual confirmation of image quality enables them to proceed with confidence, reducing avoidable errors before submission.

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.

Tight arch layout

Smaller photos, sparse info

Expanded layout

Larger visuals, essential details

Tight arch layout

Smaller photos, sparse info

Expanded layout

Larger visuals, essential details

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.

Clear path to job completion

Seeing key details and sharing options presented in one place helps users confidently finish each job.

Deliberate Submission

An overlay with a photo upload and playful motorcycle swipe makes final handoff feel intentional and dependable.

Clear path to job completion

Seeing key details and sharing options presented in one place helps users confidently finish each job.

Deliberate submission

An overlay with a photo upload and playful motorcycle swipe makes final handoff feel intentional and dependable.

PROTOTYPE & TEST

Final Designs

Smooth, Intuitive Onboarding

Personalized Job Search

Craftspeople can customize their job feed by filtering based on materials and location—ensuring only jobs that match their preferences appear.

Secure Job Selection and Submission

PROTOTYPE & TEST

Testing Plan

Though we drew heavily from available client and user insights, our ability to conduct direct testing this quarter was limited by craftspeople’s busy schedules and time zone differences.

We outlined a testing plan to validate key assumptions about navigation clarity and task efficiency, to be implemented next term for usability sessions with additional craftspeople.

Objectives

Clarity of key job details

Do cards display enough information for users to smoothly claim and complete jobs?

Workflow compatibility

Does onboarding and job submission align with craftspeople’s existing tools and documents?

Confidence in submission

Do photo upload and swipe interactions prevent accidental errors and clearly convey job completion?

Methods

Participants

5-7 craftspeople with lower literacy levels from Mahjouba's network

Format and Task Flow

Moderated mobile tests where craftspeople sign up, claim a job, and submit after finding and sharing key information.

Metrics

Measure task success rate, frequency and type of error, along with user confidence ratings

REFLECT

Takeaways & Next Steps

Here are 3 key takeaways I learned from this sprint.

Consider the stakeholder ecosystem

If end users were out of reach, we turned to our client’s daily interactions with craftspeople so our decisions still closely reflected current craft practices and needs.

When in doubt, go back to basics

After exploring elaborate arch variations and color palettes, critiques pushed us to limit visual clutter and focus on core usability for a striking, yet straightforward style guide.

Prioritize cross-functional input

Tight feedback loops with our project manager and engineers helped us try multiple design approaches to align with stakeholder expectations, while grounding our ideas in technical feasibility.

The Mahjouba Initiative's next phase will build on our product for craftspeople by expanding into a consumer-facing app. Early concepts we discussed like craftsperson profiles can help riders feel connected with the makers behind their bikes.

Language Considerations

To shore up this usability gap, future app iterations need deeper localization: supporting dialects and blended language use to more closely match real-world communication patterns.

Emily Chang

Thanks for visiting. Let's keep in touch!