PHEcard

Involvement: Web Design, Layout, Wireframes, Business Analysis

Organization: Small Business (various)

The PHEcard website was a redesign job that was badly needed. The oringinal site was about 8 years old, not responsive, and didn't actually display purchasing options. The white label platform was used by a variety of companies from wide-ranging industries, and needed to be able to be customized by all of them, in both appearance and content.

Step 1: Requirement Gathering & Wireframes

The first step was gathering all the new requirements the new design needed to fulfill. The site had to pull packages and logos from the company's database, and display them as soon as they were earmarked for online sales.

Working with a back-end developer, we were able to find a good model that would allow the customization to appear based on the URL used to visit the page.

After several rounds of wireframes and establishing a roadmap of deliverables and dates and approval to proceed.

case_phecard3
case_phecard4

Step 2: Web Design

After the initial wireframes and mockups were approved, I set to the task of creating static versions of each of the 3 site page templates.

The new designs called for responsive design, but with the added challenge of variable content, colors and backgrounds. Due to the variable nature, I went with predominantly neutral colors and large background photos that could be customized or replaced with client branding.

After the static pages were created, I put together a project spec for the full-stack developer that I had been partnered with, and worked with him to answer any questions or hunt down any business rules that weren't readily available.

Step 3: QA & User Acceptance

Once the full-stack developer was finished adding functionality, the task fell back to me to test the new website for browser capability, responsive break-points, and various content possibilities.

The roll-out involved training staff on how the new website worked, how it integrated with their system in new ways that made their lives easier, and getting feedback on the process and results.

Conclusion

PHEcard was a small but very challenging endeavor because of all the variables. But with proper planning, this one website works for hundreds of companies, allowing each of them to have their own content, branding, and purchasing options.