From surveys, interviews and first hand experience with many parents, room parents and teachers of elementary school children, it was apparent that there was a need for a single place for communications about what's happening in the class (messages, events volunteer requests, photos, videos etc.). That was the motive force behind the creation of The ChalkBird. The user base for The ChalkBird is extremely non-technical, and therefore, the product design needed to accomplish several things:

• It needed to be intuitive. Room parents should be able to set it up with no instruction. Parents need to be able to get information from it also with no instruction.

• It needed to feel simple and "small" to the user. There would be over sixty functions and operations supported by the system, but it should never feel like a sprawling array of technology.

• It needed to support a sense of context and place. The user should always have the sense that they know "where" they are in the app. Doing this would enable the app to feel "small" despite its size and power.

• It should be mobile responsive. Most parents would likely want and need to use this on their phone. Any functionality delivered via desktop must be equally accessible via mobile device.

The result of extensive direct user research, The ChalkBird delivers 60 functions in just six screens. It does this via a carefully considered hub and spoke pattern in which each hub (the six main pages) never actually disappears. All functionality is either right on the page, executing and updating via ajax calls, or provided via popovers or modals (also created via ajax call) which always leave the user's main hub in the background. This system enables The ChalkBird to leave the user with a continuity of place and a sense of task not possible on other competing applications of similar power.

Everything was built with responsive designs. Much of the responsive behavior was accommodated using the Twitter Bootstrap 3.0 framework. There were many instances, though, where there was no appropriate responsive behavior or component in the Bootstrap framework and in those instances, I designed and built custom components powered by media queries in the CSS.

See the screenshots below for examples from various sections of the application. Click any image to see it in a full-screen lightbox.

The ChalkBird had its pilot beta launch in August, 2015. Launched via social media post, it generated an overwhelming groundswell of enthusiasm, and within three months, had hundreds of users.

The first round of user feedback, gathered by a survey sent to all users of The ChalkBird, generated an extremely high response rate by industry standards, indicating a very high level of engagement. And the feedback was overwhelmingly positive, with criticism limited almost entirely to requests for new features.

Time and resources couldn't be tighter than they are with The ChalkBird. For this reason I spend as little time as possible producing artifacts, and as much time as possible producing live, working code. Any intermediate deliverables are of three kinds: notes (written and typed), pencil sketches, and OmniGraffle layouts and flows.

Notes

I keep an ongoing Evernote notebook that contains all user feedback, interview notes and product concepts and ideas.

Pencil Sketches

I also keep a physical lab notebook where I sketch out product concepts when I need to hash things out visually. I sketch everything from conceptual models to actual UI layouts. The most valuable thing sketching accomplishes for me is allowing me to visually develop conceptual models that underpin the UX. It’s these conceptual models that actually carry the most weight in being able to design user experiences that feel both intuitive and consistent.

Omnigraffle

I'm proficient enough with live UI code, and I’ve developed (at this point) enough conventions for the app that now, when I have a new UI layout to create for a new feature or function, I usually code it live and experiment and iterate with working code. For certain flows and concepts that it's important to work with and modify, I'll create OmniGraffle diagrams.

Visual Design

While I've done heavily-branded visual designs, for a highly functional software product, it was important to rely as much as possible on convention. Thus, the basis for both the page layout and visual design of the various pages is the Bootstrap responsive design framework. It has a clean, simple visual style. I extended it where necessary with new components and visual themes including a logo and business cards for the product and company.

Feature Demonstrations

These feature demonstrations show the design and functionality of The ChalkBird in action.

Parent Demo

The Parent Demo highlights key features and important design paradigms from the perspective of a parent user.

Teacher and Room Parent Demo

The Teacher and Room Parent Demo highlights key features and important design paradigms from the perspective of a teacher or room parent.