Watch Me Grow

UX strategy, UX design, UI design


In today’s ever connected world, millennial parents expect a higher level of access and transparency from their childcare centers then in years past.

WatchMeGrow helps childcare centers be safer and more marketable with the highest-performing and most secure video streaming system in the industry, allowing on-the-go families — more than 200,000 active users — watch their children flourish anywhere.


Overview

Started more than 20 years ago, WatchMeGrow’s web-based software was standing on the legs of an aging tech stack and legacy user-interface. It would take more than a year to migrate to the new servers.

Customers and staff were demanding improvements sooner than that.

The Before

They came to me knowing they wanted a redesign. The elephant in the room: could we deliver meaningful improvements to the user-experience with the current tech stack that wouldn’t end up being throwaway work once the newer systems were in place?

The answer was yes.

Approach

I recommended an iterative, phased approach for improvements.

One of the bigger issues with the UX/UI — besides looking like it was created in the late 1990s — was the lack of usability on mobile devices. WatchMeGrow’s web-based software was originally designed for desktop and included many complex tables that didn’t scale to smaller viewports. This caused severe limitations for today’s on-the-go users.

So, our plan of attack:

Phase 1 – Working with the existing tech stack, we’d update the UI by touching only the CSS. These visual design updates would piggyback on other scheduled server updates, bringing a much needed facelift to the product’s look and feel without adding a huge lift to engineering’s already full plate.

Phase 2 – A soup-to-nuts redesign of the product, sitemap, and navigation, implemented after the server migration and code base updates were completed (ie. in 6-12 months). Phase 2 would be a mobile-first approach, ensuring the complicated data shown in the app would scale responsively and work for all major viewports.

Process

First things first, I needed to get up to speed on current pain points and new feature requests.

I began my discovery process by interviewing WatchMeGrow support staff — the people closest to the users — as well as a few deep dive technical sessions with WatchMeGrow’s lead engineer. I also got familiar with the current lay of the land, by using the product myself on a few test accounts.

Lots of ideas from both customers and staff were floating around. Over time, customer support had compiled a long list of feature requests from customers, which proved invaluable. With so many things we could work on, we needed a way to prioritize.

To do this, I guided the team in the creation of a red route.

By creating a red route, we were able to surface the most critical parts of the software — features used by most of the users, most of the time.

Red routes are great at highlighting areas where you can have the greatest impact. And by working on them collaboratively, the entire team left the working session in agreement as to where efforts should be focused.

Red Route

With the preliminary research done, it was now time to bring our ideas to life with newly imagined UX and UI. The fun part.

As I mentioned before, this was a two-phased design. For Phase 1, I was mostly skinning existing UX structure. This is when we started to explore a new visual design system, bringing the web application’s look and feel into the 21st century.

It’s amazing what a facelift can do for user-experience. This was a quick, easy win and a huge morale booster to both staff and customers.

And while we intended to only touch the look and feel with Phase 1, we were actually able to sneak in some high-impact/low-effort UX changes not previously thought possible — all thanks to close collaboration between design and engineering.

With Phase 1 out of the way, I dug deep into Phase 2, starting with a new sitemap.

This was followed by high-fidelity wireframes and clickable prototypes using Sketch, Adobe Xd, and InVision. Because I was both the UX and UI designer for this project, I was able to streamline the process and work out kinks in the visual design system as I fleshed out the UX.

Sitemap

High Fidelity Prototype

I began by focusing my design efforts on the most complex section of the software — allowing admins to merge user accounts, edit room assignments, and customize camera schedules for individual family accounts.

Iteration is my friend when it comes to designing and this project proved no different.

I sketched different approaches, starting with mobile first. After narrowing down the choices to the strongest contenders, I presented concepts to the team and got their feedback.

Throughout the process, I stayed in constant contact with engineering to figure out how far we could push the envelope and still stay on target with timeline and budget.

Feedback led to more iteration, adding detail and polish and addressing the more simple areas of the application, until we had a solid system to work with.

The After


Before locking in the designs, we got early feedback on the prototypes from a handful of long-time customers. This allowed us to validate the new approach quickly, mitigating risk before heading into development.

Results

After years of working with an outdated system, the new design updates had the entire company enthused.

Words cannot express how amazing this UI looks.

— Staff on Slack

Months later, the software is still in beta testing, but feedback is strong from early adopters that we hit the mark when it came to making a user-friendly and intuitive interface.

Love the new request notifier, this makes the approval process go by faster!

I didn’t know it was possible to have this much control over the accounts, it’s great.

— Jennifer


The Group Room Changes feature will really help us during the busy back to school season, I will be using this feature a lot.

— Heather

Lessons Learned

Question everything! Working with outdated tech stacks means things won’t always make sense or work the way you think it does. Don’t judge the crazy; accept it and bring engineering into the design process early and often. By working together, you can make the best out of the situation.

  Return to all case studies Next case study >