Development Status of Customizable Profile Fields

We’ve been working on Customizable Profile Fields for some time. We wanted to make them just right for you and for your community. It isn’t easy. We looked at how other companies made them and we weren’t impressed. Some lacked usability, others were just ‘blah’.

Our primary goal was always usability. We wanted to make profile editing as simple as possible for users and for admins.

So we had numerous meetings and brainstorming sessions. We drank far too much coffee, but in the end we worked out a formula that gets the fields exactly the way we want them.

CPF Development Preview

CPF Development Preview

Edit One Field At A Time And Receive Immediate Visual Feedback

No one likes to see a large form when they click “Edit” but too often that’s exactly what they receive. Sometimes users have to pass through a whole wall of options before they can reach the one field they want to change. They just have keep pressing “Next” and waiting for the page to reload. Nobody has time for that!

So we decided to let users edit one field at a time. It happens right in their profiles, and thanks to AJAX, it’s all saved in real time.

It’s beautiful… but we took it a step further. We also added immediate visual feedback so that users always know whether they’ve completed a field correctly.

Immediate feedback to the user.

Immediate feedback to the user.

Profile Completeness

If you already have an established website, some of your members may be missing details from their fields, such as gender or location. So we’ve added a Profile Completeness progress bar. Users can see immediately when something is missing in in their profiles… and it changes in real time. (We seriously love AJAX!) The Profile Completeness bar disappears only when all the fields are complete.

Required Fields Release Members

Users who have not completed fields marked “required” will be taken to their profile editing page. They will not be able to browse community (PeepSo) until they have completed all the required fields.

When they’re done, they’ll see a funky, green flash! Just so they know they did a good job!

Easy Profile Editing For Admins

PeepSo 1.6.0 lets admins control PeepSo’s default fields. It’s very simple!

You can change a field’s name and set it as required (or not) with just a couple of clicks. You can hide/disable fields, and drag and drop them to change the order. You don’t even need to press “Save.” Just refresh the profile on the frontend and you’ll see the changes immediately.

CPF Admin interface

CPF Admin interface

But Wait, There’s More…

We’ve all had moments when we’ve had to drop everything in the middle of editing. However you leave Customizable Profile Fields, you’ll always come back to it in exactly the same state. The order will be the same and fields will remain folded… or unfolded.

Quick Video Presentation

Beta Testers

So now we’re looking for beta testers. If you are waiting for this to come out. Just send me a message via chat on our community and I’ll sign you up. Be one of the first ones to put your hands on the new customizable fields. They are truly fabulous.

(Please remember that Customizable Profile Fields are still in development. Any problems found will be fixed in the stable version of the plugin.)

Comments? Questions?

Please leave them below.

Why Everyone Should Learn to Code

Learning to code is like learning to speak another language; you have to learn a whole lot of new “words” and phrases, and if you get just one word or letter wrong, the person (website) you’re talking to might have no idea what you’re trying to say. Many people prefer to outsource coding work, or use plugins that allow them to do really cool things without needing to write a single line; even if that’s you, it’s worth knowing the basics so you can spot if something’s wrong, or make small tweaks if you need to. If supermodel Karlie Kloss can learn to code between international flights, fashion shows and photoshoots, you can fit some basic coding lessons around your busy life too.

code

It turns you from a consumer into a producer.

If you can’t code, you’re always buying someone else’s project or time; if you can, then you’re either building and selling entirely original content, or taking bits and pieces from other people and incorporating them into your own creation to make it better (like building your own house, and getting furniture from someone else to add colour and variety to your creation). It’s a guarantee that you’re going to stand out.

It allows you to fix – or at least patch – problems right away.

Rather than spending long hours waiting for the person who developed or maintains your website to come to your aid, knowing how to code allows you to fix the problem yourself – or at the very least, patch it so that your customers and visitors aren’t at risk of malware or suffering serious glitches during that time. The amount of money an online shop might lose just by being down for a few hours in a busy period could be staggering. You might not get to a point where you can perform major surgery on your website, but you can learn how to tie a pretty damned great bandage.

You can make sure that your project matches YOUR vision.

Trying to get another person to see the picture in your head is an incredibly different thing; even if you and your developer/designer are totally simpatico, they’re not always going to get things the way you want them. Knowing how to write your own child themes or even make small tweaks to someone else’s design will make it that much easier for you to transform your design dreams into reality.

How We Develop PeepSo

To maintain the highest possible standard, minimize bugs and keep PeepSo improving steadily and quickly, development of the plugin follows a strict process.

Step 1: Planning

The first stage is planning. We discuss what the communities need, what additions would bring the most benefits and which features we should add to PeepSo next.

We then create a roadmap and produce mock-ups. These are interactive wireframes that let us play with the new features to see what works and what still needs work. When the mock-ups are ready, we write the documentation and list the requirements for the development team. Each task is broken down into a series of smaller tasks which can be prioritized and handed to our developers.

Step 2: Development & QA

As soon as we move into the development phase, we start the quality assurance. The QA work follows every step of the construction so that when a developer finishes a task, it passes straight to “peer review” where another developer looks at the code and tests it. If the task doesn’t yet meet our standards or doesn’t work exactly the way it should, it’s sent back to the developer for corrections. Only when the task meets our standards and works as it should will it move to the ‘testing’ phase.

PeepSo Tasks Board

PeepSo Tasks Board

We perform extensive testing both automated and by hand. First, the project manager checks and tests the task manually. Any failures and the task goes back to the original developer. If everything looks good, the task is passed on to the automation team.

The automation team also tests the task manually then creates a WebDriver script. WebDriver is a tool used for automating the testing of web applications. We currently have about 400 automated tests that cover most of PeepSo’s functions.

We run the automation tests during the development process and use the stable package created for a release. If the WebDriver catches any errors we fix them. Only when all the elements of a new version have passed through this process, including its several levels of testing, will that version be released.

PeepSo Webdriver Automated Testing Results

PeepSo Webdriver Automated Testing Results

That’s a very brief description of how we manage development, testing and quality assurance. In practice, it’s detailed and demanding but each stage is essential. PeepSo is here to stay but that’s only going to happen if the plugin works exactly the way it should. Code quality, standards and testing are all vital and they make future development much easier. Developing in a clean and well-maintained environment makes growth faster for us and results in a better PeepSo for you!

Comments? Questions?

Please leave them below.