Custom UI in WordPress

Backend
Frontend

Overview

Opportunity

A community run website where people can search for products and gifts that are made by local creatives. 

Action

Develop a custom User Interface in WordPress so that the content management of the website is easy to learn and easy to maintain.

Impact

When inputting content it is very clear what information is required and where this is input. This means that volunteers can input this information. The effort put in at this stage will also mean that it will be much easier to introduce the next phase of the website, which is to have creatives input and manage their own content on the website.

Tech

  • WordPress PHP
  • ACF plugin
  • HTML
  • CSS

Skills

  • User Research
  • Prototyping
  • Wireframing

The Product

A screenshot of the content management tool. Clearly showing where each piece of information is managed.

Three types of dynamic content:

  • Events
  • Products
  • Creatives Profiles

Events

The fields for inputting this information are very simple.

Screenshot of the input fields for entering the event details
How the input event information looks on the front end of the website.

Any other data required for managing this content is all done automatically with PHP. The post is categorised based on the ACF post-types so the content manager does not have to worry about properly tagging the categories.

When inputting the event date and time the content manager is offered a date picker. I have then used PHP to split this information up and display it on two different lines, one for date and one for day. I have also displayed the day with the date as a User Experience decision because people will want to know what day of the week this is. This is a good example of where you don’t have to compromise on a efficient UI for content managers to deliver the best UX experience for the website users.

Maker Profiles

The content managment for the profiles and the products required a lot more research and testing. For this part of the process I need to think about the customers who are searching for makers on the website and what inforamtion they need. I then need to collect this information from makers efficiently. I then need to properly create an input form so that volunteers know what information they need to enter.

Screenshot of input fields for maker profile information

One thing that is not clear here is what “first paragraph” means and what information needs to go here. This could be resolved by adding a descriptor to the field. This is easily done as I have used the ACF plugin.

If I was building this for people who were more familiar with using wordpress I could instead use the default block editor to fill in this information and this would give them more creative control over how this content is displayed.

Products

Leave a Reply

Your email address will not be published. Required fields are marked *