go back

Explore and Grow Learning

A warm and loving daycare.
Over 20 years of service.

Overview:
Explore and Grow Learning Center is a daycare located in Sammamish, Washington. Tammy, the founder of the company owns and operates two locations. I met with her an initial strategy session to define her requirements and project goals.

The Challenge:
Over the past few years, clients of Explore and Grow Learning have been complaining about their website experience. The feedback they received was that it was hard to find information about the center, download forms, or find directions. In addition, the analytics were showing that most of her visitors were not returning and the bounce rate was quite high.

The Solution:
Design a user experience that provides simple, yet elegant navigation, responsive content, consistent brand voice, and clear calls-to-action.

my approach and process

Research

Interviews and observations

After my conversation with Tammy. My next steps were to conduct research on her top competitors and analyze web and mobile usage data and make recommendations. We determined that her bounce rate was too high at over 90% and that most of her pages were not visited. Her top competitors are Bright Horizons Daycare, La Petite Academy, and Sammamish KinderCare.

Analysis

User personas designed in Adobe Illustrator and XD

Once my initial research was complete, I worked with Tammy to define two user personas. The first persona is Mary, a 43-year-old married woman with one child. She is 43 and works full time. It is important for her to feel safe and confident in her daycare center. Reviews and staff bios are important for her.

The second persona is Jason, a 37-year-old divorced dad with two kids. He likes to spend his time researching companies prior to doing business with them and enjoys visually aesthetic websites with calm colors.

Design

Wireframes designed in Adobe XD

During this phase, I took the information collected from the previous steps to design low-fidelity wireframes as well as a UI style guide. I merged her original seven static webpages into three pages. It was critical to display a significant amount of information on the landing page because the primary reasons that her users are visiting the website are to locate the center, obtain contact information, and look at photos of the center.

The about page became the result of several merged pages, the meals, tuition, curriculum, and director bio pages. We wanted to establish trust with the parents (users), so I placed a professional headshot of Tammy at the top of the page with a personal quote from her. This quote explains the "why questions" (1. why does Tammy run a daycare center? and 2. why should I choose her center for my child or children?) for the parents. People are highly protective of their children, so we took every opportunity we could to humanize their web experience, build rapport, and establish trust.

Finally, the contact page's main element is the form. Initially, I created six fields for the user but then after further research, I determined that we only needed three. Studies show that more forms fields reduce the chances of your users actually completing the form. Again, we acknowledged that one of the user's top priories is trust. While it would be beneficial for Tammy to collect as much information as possible, ultimately we wanted more form completions and didn't feel like it would provide a positive user experience to ask for their child/children's personal information. Also, we want to sustain the trust that we already established on the previous pages, so I embedded a custom Yelp slider which can be seen prior or during the form completion.

The brand guidelines were loose and undefined. I worked with Tammy to select colors and fonts that we felt aligned with her vision and company goals. We selected gender neutral colors that spoke a universal language of calmness and trust to her users. We selected a primary cyan and primary blue as well as a secondary blue and a mix of black and grey colors.

Production

Screens designed in Adobe XD

The production phase took place inside of Adobe Illustrator and Adobe XD. With my wireframes I had created an outline so the next step was to get creative. After I designed the pages, Tammy and I reviewed them together to determine what elements we wanted to keep, change, and discard.

Launch

Deployed responsive website in Webflow

product launch image