Braiding Nairobi

Mobile App + Web App

The Braiding Nairobi App connects clients with professional hair braiders in Nairobi, offering convenient at-home styling and easy appointment booking. Discover features, screenshots, and download options below.

Joining Braiding Nairobi after launch created a great opportunity for me to audit existing functionality, and also review user data and user behaviour. After redesigning the website, I put a plan together to improve the User's experience of the app.

Project Info

  • Role: Acting CTO + Product Designer
  • Type: Mobile App + Web App
  • Tools Used: Flutter, Cursor, Dart, Figma, Git

Key Users

  • Clients
  • Braiders

Client 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

Development Process

Discovery
Discovery

Conducted user research to uncover pain points and opportunities.

Discovery
App Audit

Evaluated usability, accessibility, and design consistency.

Discovery
Feature Proposal

Planned stepwise improvements, starting with the customer-facing interface.

Discovery
Web App Extension

Added a web app to handle international orders and reduce manual processing.

Discovery
Component Library

Built reusable components with developers for consistent, scalable design.

Discovery Output

I began by reviewing existing user interviews and app-usage data to understand behaviors, pain points, and opportunities in hair-care booking.

Two Pain points discovered:

  1. Limited Availability: The mobile app isn’t accessible in some regions, leaving visitors to Nairobi unable to book.

  2. Low Engagement: Users typically braid their hair only once a month, resulting in infrequent app use.

Opportunities discovered:

  1. Web Booking Extension: Build a lightweight Flutter web app so travelers can book appointments without the native app.

  2. Repair Booking Feature: Add an easy “repairs/undo” option so users can quickly schedule touch-ups at any salon, increasing convenience and repeat usage.

App Audit

The app redesign focused on creating a consistent brand experience while improving usability across all screens.

Key improvements include:

  • Unified color scheme and typography
  • Improved navigation flow
  • Enhanced visual hierarchy
  • Better accessibility features
  • Consistent component library
First layer
Fourth layer
Third layer
Fourth layer
Second layer

Feature Proposal

Proposed Feature & A/B Test

I introduced a “Repair & Touch-Up” booking option to make it easier for users to schedule quick hair fixes between full braiding sessions.

An A/B test would compare the current app (Group A) with the new feature (Group B), measuring repeat bookings and app engagement. The hypothesis: increased convenience will improve retention, with insights guiding future iterations

Web App Screens

I proposed a web app extension of the mobile app to make booking appointments easier for users on the go, particularly international visitors to Nairobi who couldn’t access the app through regional app stores.

The web app provided a lightweight, accessible solution with minimal development overhead, while allowing us to maintain a consistent codebase using Flutter’s cross-platform capabilities.

LOGIN
SCREEN

The mobile and web apps share content but differ in layout. Using the same design system and component library, we enhanced the web version with additional imagery and a layout container that mirrors the mobile app’s rounded components and subtle box shadows, keeping a consistent visual language across platforms.

HOME
SCREEN

The web app version of the home screen leverages additional space on the left panel for promotional content, which when seen on the mobile app is presented as smaller carousel banners. Much of the content on the right hand side is consistent with the mobile app.

STYLIST
SCREEN

The screen on the left provides a visual profile of the stylist, and the right hand side is the content of the stylist's portfolio, with an opportunity to book an appointment. The mobile example reverses this layout, keeping the stylists profile at the top, and the portfolio at the bottom.

SALONS
SCREEN

Following a similar pattern, the Salons screen highlights the styles selected on the Home page. On the right, a scrollable list of salons offering that style allows users to easily browse and book an appointment.

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.

Next Steps

  • A/B testing of new feature
  • User Interviews & usability testing are underway ahead of redesign of Braider facing side.
  • Integration of Little Api for automated booking flow of appointments
  • Usability testing for Customer facing app