📱 App Features

Browse and book top-rated braiders in Nairobi
View stylist profiles, reviews, and portfolios
Easy in-app appointment scheduling
Secure payment options
Track your booking and get reminders
Available for iOS and Android

📝 Project Info

Role: Acting CTO + Product Designer
Type: Mobile App + Web App
Tools Used: Flutter, Cursor, Dart, Figma, Git
Task:
- Redesign of mobile app to be more user friendly and intuitive
- Spearheaded the implementation of Little Cab API for streamlined booking in collaboration with founding engineer, CEO and external teams.
- Web app extension with flutter for easy access to the app
- Created a modular design system and component library based on atomic design principles.
- Addition of new feature that allows users to book a braids removal

🖌️ UI Improvements

SPLASH SCREEN

SIGNUP SCREEN

HOME SCREEN

BRAIDERS SCREEN

ORDERS SCREEN

🖥️ Web App Screens

I introduced the idea of a web app as an extension of the mobile app to make it easier for users to book appointments on the go, without needing to download anything. This was especially important for international users visiting Nairobi, many of whom couldn’t access the app through their regional app stores.

A web app offered a lightweight, accessible solution with minimal development overhead. It also allowed us to maintain a consistent codebase by leveraging Flutter’s cross-platform capabilities for both mobile and web.

📁 Widgetbook Components

I used widgetbook to create a component library for the app. This allowed me to create a consistent design system and component library based on atomic design principles, for mobile and web, consistent with brand identity. I was not familiar with flutter or dart at the time, so I relied heavily on AI tools such as Cursor to help me build this library, accessing the source code for the widget in particular from Figma plugins.

Code Example from Figma's Flutter Plugin


                  Container(
                      height: 48,
                      decoration: BoxDecoration(
                        color: Color(0xFF332749),
                        borderRadius: BorderRadius.circular(24),
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 16),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          CircleAvatar(
                            radius: 19,
                            backgroundColor: Colors.white,
                            child: Image.network(
                              "https://placehold.co/25x25",
                              width: 25,
                              height: 25,
                            ),
                          ),
                          SizedBox(width: 12),
                          Text(
                            'Book a New Look',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 20,
                              fontFamily: 'League Spartan',
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                        ],
                      ),
                    )

📐Responsiveness

The app is responsive and works on all devices, including mobile, tablet and desktop. Though we started with the design of the mobile, we made sure that on smaller screens on web, the mobile app layout would be the same.