Sitatbyoot:UX&UIDesign
UXandUIdesignforanonlinelearningandteachingmarketplace.
SitatByoot is an online learning and teaching marketplace designed specifically for Arab women.
Overview
The platform empowers women across the MENA region to Learn, Make, and Earn, all from the comfort of home. Users can take skill-based courses in areas like crochet, drawing, interior design, cooking, and fashion, while also accessing opportunities to monetize their own knowledge and creations.
The name SitatByoot (ستات بيوت) translates roughly to "Housewives" in Arabic, reclaiming that identity as one of creative agency and economic independence.
The Problem
Women in the Arab world often face barriers to professional development and income generation: limited mobility, social constraints, and a scarcity of platforms that speak to their cultural context. Generic e-learning platforms do not address their specific needs, languages, or aspirations.
The Goal
Design a bilingual-ready, culturally resonant platform where Arab women can:
- Access curated video courses taught by peers and experts
- Browse and apply for creative opportunities (freelance, contests, commissions)
- Build skills that translate into real income streams
- Feel represented and at home in the digital experience
Role
As the sole Product Designer, I led the end-to-end design process from initial concept and user research through information architecture, visual design, and final handoff. Responsibilities included:
- Defining the product structure and core user flows
- Designing all key screens: Homepage, Courses, Opportunities, and Category pages
- Building the visual identity system (color, typography, grid, illustration style)
- Ensuring the design felt inclusive, warm, and culturally appropriate for the target audience
Design System
Colors
The palette needed to feel warm and creative without being loud. Amber leads as the primary action color, with pink and blue as supporting accents, and darker tones handling text and structure.
| Swatch | Hex | Usage |
|---|---|---|
| Amber | #FFBC43 | Primary CTA, highlights |
| Pink | #ED3E76 | Accents, links |
| Blue | #4CA5DC | Supporting, illustrations |
| Pale Blue | #B9D2DB | Backgrounds, soft elements |
| Slate | #505763 | Body text |
| Charcoal | #303030 | Headings |
Typography
Source Sans Pro throughout. It's clean, readable at small sizes, and works well across both English and Arabic-adjacent contexts.
Grid
Bootstrap 12-column grid. Kept things consistent and made it easier to handle the variety of content types across the platform.
Key Screens
Homepage
Leads with the core message: learn something new, create, sell, all from home. Flat illustrations of women working and selling keep the tone grounded and relatable. A "How Does It Work?" section below breaks the journey into three steps learn, practice, earn, so new visitors immediately understand what they're signing up for.
Courses
A browsable catalog organized by category and popularity. Each card shows the instructor, episode count, and rating. Nothing complicated, just enough information to make a decision.
Opportunities
Mirrors the courses layout but shifts the tone completely. This is where users become the ones doing the work, not just learning it. Companies and individuals post creative briefs, contests, and freelance gigs, and women on the platform can apply directly.
Onboarding
The onboarding was one of the trickier parts to get right. The platform has two very different user types learners and employers, and each needed their own path from the start.
Login
Minimal. Email, password, social login options, and a forgot password link. The amber button is the only real visual weight on the page.
Registration
Right at the top of the register screen, users pick their role: learner or employer. From there, the flows diverge. Learners go through a short form and then verify their email. Employers go through three steps credentials, company details, contact info, before landing on a confirmation screen that sends them straight to their profile.
I kept progress implicit rather than showing a stepper. Each screen felt focused on its own, without making the process feel long.
Success States
Both flows end with a screen that closes the loop clearly. Learners get "Check your email." Employers get "You're Done Here!" with a link to their profile. Small thing, but it matters.
Authenticated Experience
User Profile
The profile is where the platform really lives. For learners, it doubles as a portfolio, work samples, experience, featured skills backed by completed courses, and accomplishments like languages and awards. The idea was that the profile grows as the user does. An edit mode sits on top of the profile view rather than taking you to a separate page, so you always know what you're changing.
Instructor Profile
Simpler than the learner profile. Bio, social links, and a grid of courses. The focus is on credibility and making it easy for students to find the right course.
Company Profile
Closer to a LinkedIn company page. Header with logo, name, location, and follower count. Tabs for company information and active opportunities. A sidebar with contact details and related companies people also viewed.
Search
Results are split across four types articles, courses, opportunities, and companies, each in its own section. Filters on the left let you narrow by category, location, and date without leaving the page.
Settings
Two-panel layout throughout. Profile card and nav on the left, active form on the right. Five sections: account, information, password, notifications, and payment. Employers get the payment tab; learners don't. No point showing someone a credit card form they'll never use.
A Few Design Decisions Worth Noting
The learn and earn sides of the platform share the same card patterns and layout logic. That was intentional, switching between the two should feel natural, not like jumping into a different product.
For the hero sections, I went with flat illustrations instead of photography. Stock photos of Arab women are either non-existent or feel off, and illustrations gave us full control over representation.
Amber as the CTA color came down to feel. It's warm, it's confident, and it doesn't carry the urgency that red or the coldness that blue often does. It shows up consistently across every action on the platform, which builds familiarity fast.
The microcopy was something I put real thought into. "Fear not. We'll email you instructions." on the forgot password screen, "You're Done Here!" on the employer success screen, these small moments of voice make the platform feel less like software and more like something a person made.
Outcome
SitatByoot ended up being a product I'm genuinely proud of. It's a complete platform from landing page to settings, designed around a specific group of people who aren't often centered in tech products. The learn, make, earn loop gives users a clear reason to keep coming back, and the profile system gives them something real to build over time.