Peachjar.com case study
Case Study 05

Peachjar

USER EXPERIENCE, FRONT-END DEVELOPMENT,
ART DIRECTION, VISUAL DESIGN. BRANDING

Overview

In 2011 Peachjar disrupted the EduTech industry by reimagining how schools and program providers connected with parents. Pioneering the shift to cloud based distribution, their product is now used by 8,000 schools and 10,000 businesses to send event notifications to over 4 million parents.

Visit the website

The Problem

Originally built on an out-of-the-box solution, the site had become a cacophony of afterthought, confusing, and lacking in any distinguishable hierarchy. It was time to explore new ideas.

Our challenge was to reinvigorate the design, improve the experience, eliminate confusion and better communicate the platforms value.
All within just over 3 weeks!

Research

As time was of the essence, I first gathered data from a variety of sources including: customer support feedback, surveys, and Google analytics. From these I formulated a list of assumptions to verify while performing customer interviews.

A pivotal point in the project came when analyzing navigational behavior. The initial business assumption was that the "parent" segment represented a very small percentage of traffic, and should not be addressed in the design of the new site.

After analyzing behavior flow, we found that the segment accounted for nearly 80% of the traffic!
This was valuable data that gave weight to my proposal to address all user journeys.

Planning

We kicked the project off with a design workshop that gathered Product [myself], Marketing, and key stakeholders around a whiteboard to rough out basic content blocks and pages. Planning with too many people can become messy so we kept attendance to a minimum.

After defining the basics, we then set goals, responsibilities, and a rough schedule. Due to the aggressive timelines, a phased approach was proposed to ensure a successful launch.

Whiteboarding

White-boarding

With the previous site as a model, we listed what content needed to carry over into the new site and what was missing.

Collaboratively, we created simple representations of the pages and defined the content "ideas" that would fill each block.

Personas

Personas

Peachjar has a diverse customer represented by 3 major segments: Schools, Program Providers, and Parents.

While the first two share much of the same journey, the Parent segment differs in both features and goals.

I created personas to represent specific users traits, goals, and desires within each segment.

Inverse sitemap

Sitemap

From the initial plan, I created a sitemap to more accurately depicted the full scope of work required during each phase.

This was adjusted as needs and ideas presented themselves. At the time of publishing phase 1 of 3 was complete.

wireframes

Wireframes

From the whiteboard sketches, I determined the repetitive elements and created wires for each block.

Blocks could then be assembled into differing layouts. As several pages shared a common layout, there was little need to wire every page.

high fidelity mockups

High Fidelity Mockups

Insight gained from user feedback made it clear that to reduce confusion, we needed to define better flow and hierarchy with persistent style and tone.

I created high fidelity mockups of the home page with 2-3 variations for each block.

Once styles were defined, I utilized Bootstrap to design the remaining pages in the browser.

front-end coding in sublime text

Front-end Development

Designing in the browser has the added bonus of speeding the development process.

I converted the in-page CSS to LESS, honed the responsive breakpoints, and replaced icon images with SVG equivalents.

This approach resulted in quicker turn around times, and cleaner code, and less repetition.

Takeaways

The segmentation of the customer base and differing perspectives of stakeholders presented an interesting climate for this project. With multiple approvers, and tight deadlines, communication was critical to getting approvals quickly.

Despite the challenges, we managed to find a happy medium and were able to deliver significantly better design and a smoother overall user experience.

Back to Cases