Shannon Jaya

WORK

ABOUT

CREATIVE

RESUME

CONTACT

Shannon Jaya

STARTERBYTE

Custom apps for growing businesses

Modern ordering apps shouldn’t be limited to big brands. At StarterByte, I designed a mobile app that gives small business clients flexible and easy-to-use technology.

Role

Solo

Timeline

9 months

Tools

Figma

FINAL APP SCREENS

The problem

StarterByte's existing app template wasn’t adaptable for future clients.

StarterByte uses internal templates to build mobile apps quickly for small businesses, and the existing template was part of that process. However, through my UX/UI critique and discussions with the team upon joining, I discovered two critical issues:

1

Scalability

The current design was tied to a single brand, making it hard to adapt for other businesses.

2

Usability

Cluttered navigation, unclear hierarchy, and friction in core flows hurt the user experience.

RESEARCH

Using Jakob's Law to collaborate with developers

I leveraged Jakob’s Law to align with my developer teammates, framing design choices as reusable UX patterns.

By referencing familiar apps like Starbucks and Dunkin’, I demonstrated how recognizable interactions could strengthen StarterByte’s templates and make the rationale clear for developers.

RESEARCH

Using Jakob's Law to collaborate with developers

I leveraged Jakob’s Law to align with my developer teammates, framing design choices as reusable UX patterns.

By referencing familiar apps like Starbucks and Dunkin’, I demonstrated how recognizable interactions could strengthen StarterByte’s templates and make the rationale clear for developers.

VALIDATING UX PATTERNS

CREATING FLOW DIAGRAMS

IDEATION

Mapping the app flow

I started by mapping the full scope of screens and interactions to create a blueprint, because I wanted to make sure I was designing all necessary screens and elements for the template.

IDEATION

Mapping the app flow

I started by mapping the full scope of screens and interactions to create a blueprint, because I wanted to make sure I was designing all necessary screens and elements for the template.

DESIGN

Iterative process

The first iteration built on the existing template, keeping familiar structure while addressing key usability issues. This phase focused on:

Resolving immediate UI friction for users
Mapping core flows, features, and interactions

This work laid the foundation for the finalized UI, which adopted a clean and professional look, making it easy to customize with each client’s branding.

DESIGN

Iterative process

The first iteration built on the existing template, keeping familiar structure while addressing key usability issues. This phase focused on:

Resolving immediate UI friction for users
Mapping core flows, features, and interactions

This work laid the foundation for the finalized UI, which adopted a clean and professional look, making it easy to customize with each client’s branding.

FIRST ITERATION

FINALIZED UI

LOCATION SELECTION

NOTABLE DESIGN DECISIONS

Flexible location selection

Since many small businesses have multiple branches with different menus and promotions, location selection was designed to be clear yet flexible.

Users can skip choosing upfront, set a preferred location, or update it later.

NOTABLE DESIGN DECISIONS

Flexible location selection

Since many small businesses have multiple branches with different menus and promotions, location selection was designed to be clear yet flexible.

Users can skip choosing upfront, set a preferred location, or update it later.

NOTABLE DESIGN DECISIONS

Designing for clients without photos

Based on client needs, I created alternate text-focused menu designs for businesses lacking professional photos. Strategic color customization keeps these layouts visually engaging despite being text-only.

COLOR CUSTOMIZATION

NOTABLE DESIGN DECISIONS

Designing for clients without photos

COLOR CUSTOMIZATION

ORDER STATUS

NOTABLE DESIGN DECISIONS

Clear order tracking

Users may have multiple active orders at once, so I designed a carousel format to display each order clearly on the homepage. This approach lets users track all their orders without disrupting browsing or adding interface clutter.

NOTABLE DESIGN DECISIONS

Clear order tracking

EXECUTION

The final template

I wanted this template to be easily customized for different coffee shop brands, so I used a clean black and white base with standardized typography, allowing businesses to easily apply their own brand colors.

This template also establishes a standardized app flow that future templates can follow.