Staff directory for network of schools Flexible and intuitive

Client

For this project, I was contacted by Wild Apple Design Group, an award-winning branding, and marketing specialist.

The team at Wild Apple put people first in their projects. They only want to work with consultants that share their values and work ethic. Going above and beyond for customer satisfaction has to be second-nature. They also strive to make the user experience central to their work and the websites they deliver.

Mission

At the time Wild Apple was working on developing a set of tools for several networks of schools.

They reached out to me because there was a clear need for a Contact Manager that would allow the schools to:

• Manage a list of their staff’s contact and other information in a straightforward non-geeky way
• Import, export, and edit data in bulk if needed
• Present users with a clear, well organized, and easy-to-browse list of faculty staff
• Provide an exhaustive contact search engine
• Display individual contacts in several different ways

Additionally, Wild Apple needed the system to be easy to adapt to different design requirements.

Challenges

This project presented several interesting challenges.

Bulk add/edit

Adding and editing contacts in bulk had to be fast and efficient. Having to add too much data for each contact wouldn’t have been a great idea. Having to click too many times would have slowed down the project quite a bit.

CSV import

Users often had lists of contacts in Microsoft Excel™ they wanted to import into the app. The challenge was that we had no way of knowing how each list was organized and we didn’t want to force anybody to work in a certain way if we could avoid it. We also knew we needed a reasonably intuitive system to avoid errors.

Individual contact selection

Individual contact selection had to be flexible as well and offer an array of possibilities to work with different website builds.

Block templating

Blocks for this application were going to be fairly complex with many options to take into account. The view was going to be pretty wild meaning templating was going to be complicated. Especially for designers and front-end developers who might not be PHP experts. Still, the team at Wild Apple had to be able to create templates easily on their own. 

Solutions

Bulk add/edit

I built a form that allows an editor to enter essential data for each contact without ever needing to touch the mouse. This makes adding new contacts, one after another, extremely fast using only the keyboard.

CSV import

The CSV import functionality I designed allows the editor to map fields from their CSV files to the application fields. That way, any CSV format can be used and no specific format or design is forced on the editor.

Individual contact selection

I ended up building both a block and a contact selector as a page attribute. The block lets the editor select a contact from the list or select a page attribute to fetch the contact from. The use of the page attribute makes it very easy to add the block to a specific page and never have to touch it again while the specific contact for each page is set from the page itself.

Block templating

I designed the single contact block and the contact list block to be highly customizable by setting a few variables. The blocks’ settings already offered plenty of design options but I also made sure the view made it as easy as possible for designers to work with. I hid most of the logic from the view and added several straightforward helpers to modify and tame the output.