STARTERBYTE
Custom apps for growing businesses
Custom apps for growing businesses
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
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.
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
VALIDATING UX PATTERNS
VALIDATING UX PATTERNS
VALIDATING UX PATTERNS
CREATING FLOW DIAGRAMS
CREATING FLOW DIAGRAMS
CREATING FLOW DIAGRAMS
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.
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.
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
FIRST ITERATION
FIRST ITERATION
FIRST ITERATION
FINALIZED UI
FINALIZED UI
FINALIZED UI
FINALIZED UI
LOCATION SELECTION
LOCATION SELECTION
LOCATION SELECTION
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
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
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
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
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
ORDER STATUS
ORDER STATUS
ORDER STATUS
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
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
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
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.
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.
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.
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.
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.
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
FINAL DESIGN
THe OUTCOME
A few of my takeaways
1
Understanding the flows early
Documenting user flows upfront provided a blueprint to standardize the template and make it scalable for future clients.
2
Designing for real constraints
Working within the realities of small businesses pushed me to design flexible solutions such as text-only menus and customizable colors.
3
Looking ahead
I’d like to validate these designs with business owners and explore a design system to help StarterByte scale consistently.
Moving forward, I’d like to validate these designs with business owners and explore a design system to help StarterByte scale consistently.
WANT MORE?
INKWELL
INKWELL
INKWELL
INKWELL
BALI SUN TOURS
BALI SUN TOURS
BALI SUN TOURS
BALI SUN TOURS
THANKS FOR STOPPING BY
© 2025 Shannon Jaya
THANKS FOR STOPPING BY
© 2025 Shannon Jaya
THANKS FOR STOPPING BY
© 2025 Shannon Jaya
THANKS FOR STOPPING BY
© 2025 Shannon Jaya