The PC Broker
From inventory spreadsheet to a storefront built for people.
Unofficial redesign concept created independently for portfolio and demonstration purposes. Not commissioned by, affiliated with, endorsed by, or deployed by The PC Broker.
A responsive modernization concept for a local refurbished computer and IT services business. Spreadsheet-style inventory becomes a structured, filterable storefront, with a proposed production path that retains WordPress and WooCommerce.
Current business website ↗
Reference only — this is not the concept demo.
Role · Solo design, UX, frontend development, technical review and architecture planning
Make an operational inventory useful to customers. The existing spreadsheet-style presentation made computer specifications difficult to scan and compare, especially on mobile. The redesign needed to bring products, local support and services into a coherent browsing experience.
Separate inventory data from presentation. Build reusable product cards, client-side filters, sorting and detail pages around a shared data structure, then connect them through responsive navigation and clearer service and warranty messaging.
Local expertise, presented with clarity.
The PC Broker serves Northridge and the San Fernando Valley with refurbished business computers, laptops, Apple hardware and IT services. Customers range from home users replacing a computer to small businesses looking for hardware and technical support.
The independent review focused on the public WordPress/WooCommerce storefront, its inventory structure and mobile experience. The goal was to retain useful business information and existing workflows while reconsidering how customers find what they need.
Designed & developed
- Homepage, visual system and responsive navigation
- Computer catalog with client-side filtering and sorting
- Reusable product cards and detail pages
- About, Services and Contact content
Customer priorities
- Readable specifications and visible prices
- Availability and warranty messaging
- Local support and service discovery
- Consistent browsing across desktop and mobile
Turn rows of data into useful choices.
A spreadsheet can serve an operational purpose without being the best customer interface. The concept gives each computer a consistent presentation: price, processor, memory, storage, operating system, form factor and availability.
The same structured local inventory powers product cards, filters and individual pages. Customers can narrow the selection, scan the essentials and open a product for more detail.
Useful details on a smaller screen.
The catalog becomes a single-column view with search, filter access and sorting above the products. Product pages give specifications their own readable rows, followed by supporting warranty information and clear enquiry actions.
Prototype the experience. Preserve the business workflow.
The concept uses Next.js, React, TypeScript and Tailwind CSS for standalone design and frontend development. Its inventory is local structured data, not a live connection to the retailer’s stock system.
Implemented concept
- Structured local inventory
- Shared TypeScript product model
- React cards, filters and product pages
- Responsive Next.js storefront
Proposed production direction
- Existing inventory workflow / Google Sheets
- Future inventory synchronization
- Existing WordPress / WooCommerce backend
- Lightweight custom WordPress/WooCommerce theme
The production proposal translates the design into a custom theme rather than requiring a platform migration. Synchronizing inventory with WooCommerce would replace the embedded spreadsheet; this integration remains proposed.
A working storefront concept and a clear next step.
A completed standalone Next.js concept with responsive browsing, structured product pages and a documented production direction. It demonstrates a new customer-facing experience; the retailer’s live backend has not been migrated or connected. No measured conversion, sales or usability gains are claimed.
The central design decision is reusable beyond this case: keep operational data structured, then adapt its presentation to the decisions customers need to make.