Case Study: Biruwa – UI/UX Design
1. Project Overview
Project Name: Biruwa – Course-based E‑commerce App
Type: Mobile-first UI/UX design
Technologies/Tools: Figma (components, variants, prototyping), FigJam (flows)
Purpose: Design an app that blends learning and shopping—users take courses related to plants and can purchase products in the same journey.
Goals
- Clear course discovery and product browsing
- Simple onboarding, login, and role-based access
- Streamlined cart and payment UI
- Consistent design system and accessible components
2. Problem Statement
Users struggle to switch between learning content and shopping experiences across apps. Biruwa merges these flows to reduce friction and improve task completion.
3. Target Audience
- Plant enthusiasts and learners
- Students seeking practical courses with curated products
- Mobile users expecting fast, intuitive UX
4. Research & Inspiration
- Patterns: Course platforms + e‑commerce flows
- Heuristics: Progressive disclosure, fewer steps to checkout
- Artifacts: User flows, wireframes, component inventory
5. Methodology
Design Process: Discover → Define → Wireframe → Prototype → Test → Iterate
- Information Architecture for courses, products, and roles
- Wireframes leading to high‑fidelity mockups
- Interactive prototype for onboarding, course detail, cart, and payment
6. Key Screens
| Screen | Description |
|---|---|
| Onboarding & Auth | Clear entry, role selection, and secure login |
| Course Catalog | Filter by difficulty and topics; progress indicators |
| Product Pages | Course‑aligned products with ratings and quick add |
| Cart & Payment | Concise summary, address/payment steps, error states |
| Chat | Lightweight help and Q&A for course/product questions |
7. Challenges & Solutions
| Challenge | Solution |
|---|---|
| Blending learning and commerce | Contextual cross‑links between lessons and products |
| Complex navigation | Shallow IA with clear entry points and breadcrumbs |
| Error handling | Inline validation, clear empty/edge states |
8. Screens & Components
9. Outcome & Impact
- Clickable prototype showcasing end‑to‑end flows
- Reusable components and tokens for scalability
- Improved task success in prototype tests
10. Tools
- Figma, FigJam
- Design tokens, variants, auto‑layout
11. Lessons Learned
- Clarity in IA reduces user friction
- Prototype testing drives iteration
- Design systems accelerate delivery
12. References
- Mobile e‑commerce patterns and course UX references