Create customizable and cost-effective apps

An e-commerce platform integrated with Square that empowers small businesses to create customizable and cost-effective apps called Chit

The Client

UX/UI Certificate Course Project

  • UX Researcher

  • Information Architecture

  • Interaction Designer

Roles & Responsibilities

Timeline

3 weeks

  • Figma

  • Google Slides

  • Miro

Tools

  • 3 Stakeholder & 5 User Interviews

  • 2 User Personas

  • 1 Competitive Analysis

  • 1 Storyboard

  • 1 Empathy Map

  • 2 Site Maps

  • 20 Lo-Fi Wireframes

  • Style Guide

  • 32 Hi-Fi Wireframes (app builder & mockup apps built by tool)

  • 2 Hi-Fi Prototypes

  • A/B Testing

  • Presentation to Stakeholders

My Deliverables

Overview

Purpose of the Project

Small business owners struggle to build  a mobile app for their business due to limited design knowledge or financial constraints. 

We streamlined online ordering with customizable templates that allow business owners to easily create mobile apps that reflect their unique brand and integrate with Square.

The Problem

Pre-ordering through mobile apps has become a customer expectation, especially in cafes, but implementing this feature is often expensive and complex for small business owners with limited resources.

The Solution

A mobile app that helps cafés and small businesses easily create their own branded apps using a simple, customizable template. It streamlines mobile ordering and gives small business owners the tools to offer services that rival larger competitors.

Research

User Interviews: Merchants

Conducted user interviews with 3 small business owners to understand their needs and expectations for a mobile app. Insights from these interviews helped define key features for the app builder by prioritizing a balance between simplicity and creative freedom in the customization experience.

User Interviews: Customers

Conducted user interviews with 5 customers who shop at small businesses to understand what they look for in a small business app. Insights from these conversations helped determine what to include in the app builder templates, such as saving payment information and favoriting items for faster, more personalized experiences.

Competitive Analysis

Recognize common design patterns, user flows, and identify unmet user needs or missing features. This helped deepen understanding of platform expectations and how to integrate effectively with existing POS systems.

Definition

User Persona: Merchant & Customer

User personas for both the merchant and the customer were developed to capture their distinct needs around features, content, and workflows. These 2 personas informed the creation of user stories, journey maps, and test scenarios to support a well-rounded design approach.

Empathy Map

Created to capture a detailed view of the user’s motivations, gains, and pain points, helping to inform and guide user-centered design decisions throughout the process.

Competitive Analysis Findings

Findings from the competitive analysis were used to identify market gaps and opportunities, uncovering essential platform functionalities and evaluating how they could integrate with existing POS systems.

Storyboard

Explore the motivations behind a merchant’s decision to use an app builder, enabling the user experience to be tailored to align with their goals, expectations, and pain points.

Design & Ideation

Lo-Fi Wireframes

Created to structure the layout of the app builder and templates, facilitating an interface that is both simple to use and highly customizable.

Style Guide

Developed to establish Chit’s unique branding, supporting a professional reputation while maintaining a clean and cohesive design.

Site Map: Merchants

A site map for merchants was constructed to visualize step-by-step interactions, ensuring a logical, efficient, and intuitive path. This facilitated the design of a straightforward and streamlined process that minimizes friction while maximizing efficiency.

Site Map: Customers

Developed to ensure every screen and action aligned with key customer tasks. This step-by-step layout of the customer journey helped create a smooth and easy-to-follow online ordering process.

Prototyping

Hi-Fi Wireframes of App Builder Tool

Designed to simulate product functionality and provide a realistic experience for A/B testing.

High-fidelity wireframes of mockup apps built using the tool were developed to showcase the potential outcomes of the app builder, helping bring clarity to the overall concept.

Hi-Fi Wireframes of Mockup Apps Built by Tool

Testing

A/B Testing

Conducted to evaluate whether the app builder was both simple and intuitive. Insights revealed that the number of available menu templates and customization options felt overwhelming to users.

Next Steps

  • Expanding integrations beyond Square to offer more flexibility for a wider range of businesses.

  • Additionally, the platform can be tailored to support restaurants, not just coffee shops and bakeries, by introducing a broader variety of templates that meet different business needs.