Case Study – WordPress Plugin Design

Case Study - Designing a WordPress Plugin

Project Description

The Challenge:
Provide a simply & easy solution for user’s to create their own vacation rental website on the WordPress Platform which also integrates the World Village reservation tools, including real time availability calendar & online booking.

What I Did: 

  • Customer research, surveys & contextual interviews
  • Industry & Competitors analysis
  • Best practices & patterns creation
  • Brain Storming, Creating Optimal WorkFlows
  • Design, Wireframing & High Fidelity Mockups
  • Technical Specs & Integration with Developers
  • Beta & Usability testing & QA

Project Details:

Client World Village
Date May 2014

Platform: WordPress Plugin integrated with the World Village Cloud Platform

Actions & Deliverables

1. User Research

In the course of working with our small business clients at World Village, we found that their biggest obstacles to using our system was creating an easy to use website which integrated seamlessly with our reservation platform. I ran a series of interviews with select clients & through the information gathered in this research, we begin to craft a Scenarios & Storyboards.

2. UX Best Practices

I researched Best UX practices of other Word Press Plugins & current competitors in the vacation rental space who were offering their own versions of Plugins. I Formulated a set of guidelines to be followed:

a. Use WordPress Standards
b. Test Everything
c. Document Your Code so other WP Developers can use it.
d. Design for your Grandma..Make it Simple, Simple, Simple
e. Play nice with Other Plugins, see if there are any conflicts with other Plugins in our niche

World Village Plugin User Testing
Plugin User Research

3. Design Research & Concepts

I conducted interviews & white boarding sessions with my development team & select clients to generate high fidelity mockups for what the new interaction & workflow would look like in the WordPress Admin framework.

4. WireFrames for Custom Themes

In conjunction with the Plugin, we wanted Users to be able to select a custom vacation rental template to start. So we included some custom themes for them to start with. Below are wireframes for two different theme designs.

Choosing a Custom Theme
High Fidelity Mockups for Custom Themes

5. High Fidelity Mockups

High Fidelity Mockups for some custom themes

6. Design Concepts for Interactive Widgets

Interactive Widgets are the key to our custom WordPress Plugin. Working with my development team, we designed & crafted 5 different widgets including a Customizable Photo Slider with thumbnails, a Custom Custom Search & Calendar Availbility which is the heart of our vacation rental system, this tool provides Real Time 24/7 Property Availability to your website. Also RSS Feed & a Property Map

Design Concepts for Interactive Widgets
Design Concepts for Customizing Colors

7. Interaction Design for Color Widgets

You can also select Page various templates & website colors within each theme. The interactive widgets are simply dragged and dropped into place within your pages, which are visible in the WordPress Admin.

8. Interaction Design for Plugin Pages

Here are the Final WordPress Plugin ver. 2.0 Admin setup screens, which have been fully optimized for the WordPress Platform. The Widgets, Custom Header and Theme are all much better integrated within the WP Framework.

Plugin Page Setup
Available Widgets

9. Widget High Fidelity Mockups

The Widgets section fully integrated into the Final WordPress Plugin 2.0 Admin setup screens.

10. Interactive Prototype

World Village Plugin 2.0: Screens of a Sample Test Site.

Plugin Download Page

11. Plugin Download Page

After the initial development was completed, We sent the Beta version of the Plugin to our select test group for feedback. I conducted iterative usability tests to fine-tune the interactions & bug fix the workflows. We got amazing response to the ease of use & connectivity of the workflow process.

12. Completed Product Design

Once all of the testing, QA & bug fixes were completed we made our Plugin available for download to the public. Its accessible on WordPress.org Plugins page as well. We’ve seen a 28% increase in customer signups since launching the Plugin.

Completed Product Design

Outcome

The new streamlined vacation rental website setup process utilizing the WordPress Plugin 2.0 has increased  new customer signups by 28% in the first month alone.

Tangible Results for our Customers:

• An easy to setup solution for our customers wanting a self hosted WordPress website for their vacation rental business.
• Replaces our Plugin version 1.0 which was not optimized for the WordPress framework
• A fully supported WP Plugin which uses WP Standards, documented code, & it work well with other plugins.
• This Plugin enables you to fully configure our 5 Premium Widgets into a customized vacation rental website.
• No infrastructure needed, zero deployment costs.
• Gives our customers and us a competitive edge against our competitors.

Like What You See?