fbpx

Retro Money Beef

article image

Retro Money Beef is a side project aimed at building a whole CRM inside of WordPress.

Design

The design of the site came together from a few resources. My go-to for inspiration is always dribbble.com and I quickly found some great pieces that directed me to this pastel soft design.

This piece on Dribbble called Pastel paradise informed me on the typeface and along with another piece I decided to go with “blobs” that moved as it would add some interest with the animations on the frontend.

@uxgoodies on Instagram brought me closer to the colours I wanted to use, although a bit too much saturation, they formed the basis of my multi-accent design.

I was told about a platform for selling called Skeleton and really liked what they had done with images on their site. Wrapping them in a polaroid frame would add a sense of ‘Retro’ to my theme so decided to borrow their aesthetic ques.

As you can see from the initial design, I pretty much went with this look with a few changes as I went along.

Implementation

A user can signup on the front of the website and can then manage all their orders and user info from /accounts.

Once Signed up a user is created in WordPress with a role of ‘Customer’ and extra fields can be added including phone number and address. This is all done from a custom Plugin I created which can be found here.

The plugin registers a ‘Customer’ role and creates a custom post type of the same name so admin can log in, create, edit and delete customers from the admin panel.

An admin can then call or email directly with link clicks and can see the status of the order directly in the customer table.

The table itself was created with WP_LIST_TABLE to keep the look of WordPress Stock.

Clicking a customer leads you to their individual page where you can update their details. This will soon be available on the frontend for a customer to update themselves.

Another plugin I created for this project was the orders plugin. This plugin lets you create orders using ACF and the repeater field to log items sent in.

Every package will have its unique ID starting with the customer’s ID and hyphenated with the order number, for example, 84-1 will be user 84’s first package.

At the moment I am tying orders to customers with a field on the right-hand side, this way when I look at Customer 84, their orders will show up below to click on.

There is lots of scope to expand on this project, creating user profiles on the frontend is just one thing to come. Various tweaks will happen shortly including adding labels to the form (to get that 100% Accessibility score in Lighthouse), maybe using a modal to display the form in the first place and separating JS files for AJAX forms on the backend/frontend.

The project was interesting and really got me to dig deeper into WordPress and create some custom plugins.