0 → 1 ✦ Freelance ✦ Shipped 2025

Building a Bookkeeping E-Commerce Site

Summary

I was contracted via Upwork to design and build an early-stage California bookkeeping business’s first e-commerce website.

The project gave me full ownership, from concept through launch, and allowed me to craft a high-quality, brand-aligned digital presence that supported the business’s growth goals.

Company

Chariots Bookkeeping

Role

Full-Stack Web Designer

Timeline

Feb - Mar 2025

Problem

An early-stage bookkeeping business needed its first marketing website to establish credibility, attract clients, and differentiate in a competitive local market.


However, there was no brand, content structure, or technical foundation in place.

Scope & Constraints

  • Early-stage business
  • Limited documentation
  • Evolving content
  • Tight timeline + budget
01

Requirements

The client had a broad vision but limited documentation, so the initial phase focused on clarifying expectations and translating abstract ideas into actionable design direction.

Process

  1. Collected and analyzed visual references and mood boards
  2. Identified recurring UI patterns from selected examples
  3. Clarified feature requirements, including:
    • Services and pricing grid
    • Partners logo carousel
    • Animated hero section

This phase strengthened my ability to turn loosely defined ideas into actionable requirements.

Selecting a Stack

The client requested WordPress, so I evaluated content needs to select a stack optimized for flexibility, scalability, and budget.

  • Astra theme - flexible base component library that aligned with content and visual goals
  • WooCommerce - enabled simplified checkout and user login functionality
  • Rive - powered a custom animated hero section
  • Lordicon - added lightweight animated icons for extra visual flair
  • Cloudflare - provided cost-effective, reliable hosting
02

Branding

To define the business identity, I developed three distinct branding directions based on the client’s intended values and target audience.

Each Direction Included...

  • Visual tone and brand voice
  • Logo
  • Color palette
  • Typography
  • Sample UI applications

Presenting multiple options helped the client make confident decisions and grounded an otherwise abstract conversation.

Direction 1

The client's personal favorite direction

Direction 2

Direction 3

The direction we ultimately decided to move forward with
03

Wireframes

Without a formal Astra component library in Figma, I recreated key UI elements to maintain consistency with the WordPress theme.

Deliverables

1 low-fidelity wireframe to plan required sections

3 mid-fidelity mockups illustrating possible content structures

2 high-fidelity mockups exploring different visual directions

1 final mockup refining layout, assets, and hierarchy to guide development

Mid-Fidelity

High-Fidelity

Final site design

Challenges

  • Evolving Content - Required iterative layout adjustments as copy was finalized
  • Non-Technical Client - Required clear communication of technical and design constraints to ensure alignment
  • Limited Component Library - Recreated key UI elements in Figma to maintain consistency with the selected WordPress theme
04

Development

I built the site end-to-end in WordPress, integrating and customizing the selected tools.

Process

  • Implemented layouts and customized Astra components to match high-fidelity designs
  • Added WooCommerce login and checkout in response to mid-project scope updates
  • Created a custom hero animation using Rive and interactive icons using Lordicon
  • Deployed and optimized hosting on Cloudflare
Animated icons as requested by the client

Challenges

  • Scope expansion (login/checkout) → delivered requested features while communicating limits for additional dashboard functionality
  • Ensuring acceptable rendering quality of client-provided assets
05

Conclusion

Results

  • Successfully launched the company’s first digital presence
  • Established a cohesive brand identity and visual system
  • Delivered within the agreed timeline despite evolving requirements
  • Created a scalable foundation for future feature expansion contracts

Check out the final site at chariotsbookkeeping.com

Learnings

This project strengthened my ability to:

  • Translate ambiguous ideas into structured UX direction
  • Communicate technical constraints and manage scope effectively
  • Balance design quality with real-world business limitations
  • Lead an end-to-end project from strategy to deployment

It marked my transition from supporting contributor to independent product owner, responsible for aligning business goals, design decisions, and technical execution.

→