top of page

Acre Family Child Care Redesign

A website redesign project for a non-profit organization that provides training for women to start their own childcare businesses.

AFCC Cover (1).jpg

Duration: 12 weeks     Team: Independent project     Design Tool: Figma   

Overview

This is a website redesign project I did in class with the freedom of deciding which website I wanted to work on. I made my final decision on Acre Family Child Care, a non-profit organization providing training and ongoing support for women to achieve economic independence by operating at-home childcare.

 

I chose AFCC because I resonate with their mission and how they approach helping their community. I wanted to see how I could improve the overall user experience of the site.

Design Process

The whole process was divided into 3 steps:

Initial Phase

Discover
&
Research

Creating Phase

Analyze
&
Ideate

Final Phase

Wireframe
&
Prototype

 

 

DISCOVER

Problem

By browsing through their website, I found that Acre Family Child Care has an excellent educator program helping women start their own childcare businesses as well as great resources for early childcare education.

​

However, they make it hard for people to resonate with the organization. I identified the two following problems: the website's poorly organized content and its unprofessional look.

截圖 2023-02-20 下午1.06.08.png

Solution

In order to fix the problem and make the AFCC website look organized and professional, I focused on rebuilding its information architecture, creating appealing headings and emotional statements, and making sure the redesigned website speaks to its audience. 

 

RESEARCH

Target Audience Archetypes

To better understand my audience, I first did research on AFCC by going through all the materials I could find on the internet including their social channels and online presence. I created these three target audience archetypes based on my research to help me get a better idea of how to help AFCC connect with these three types of audiences through its website.   

​

Primary    

55%

Women who have incentives to run their own business

Secondary

35%

Parents and guardians who need childcare services

Tertiary

5%

Funders and donors who care about early childcare education

Unique Value Proposition

AFCC not only provides childcare services like other childcare organizations but also focuses on helping women achieve economic independence.

Design Goals

Based on the target audience I defined, the design goals for this website are to:

  • Encourage more women to join the educator training program to become educators who can run licensed childcare businesses

  • Appeal to parents to enroll in AFCC childcare services

  • Seek community support through funding and donations

 

ANALYZE

Pain Points

For this project, I talked to 3 peers about the website I was redesigning in class. While having them go through the website and listening to their initial thoughts, I wrote down notes and further organized their comments into the 5 following pain points:

 

  • No emotional or inspirational photos that encourage the users to take action

  • No visual hierarchy that separates content apart

  • Difficult to navigate and find the right information on each page

  • Difficult to understand what AFCC's primary services are

  • Challenging to believe AFCC provides professional service​

 

PROBLEM STATEMENT

How might we design a website with clear navigation that appeals to women who want to start their childcare business and parents who need childcare services?

 

IDEATE

Sketches

IMG_5604.PNG

Based on the pain points I identified, I first sketched to see how I could optimize the user experience by putting the content in the right place. Also, I focused on creating highlights for their services and inserting images to make each page more appealing.

 

During the sketching process, I continued referring to their target audience, unique value proposition, and website goals to come up with good design solutions.  

AFCC Sitemap.png

Sitemap

New Information Architecture

  1. Rename the two main services so people can find the content they expect when clicking

    • from “Educator” to “Become an Educator”

    • from “Parents” to “Childcare Service”

  2. Separate News from the About page to avoid mixing content

  3. Rearrange existing content under the category they belong

 

​

DESIGN

Wireframes

Moving forward with the design process, I chose 6 pages that I considered the most important to creating wireframes.

Desktop Version

1.png

Content highlights:

(A) Introduce all the main services the organization provides


(B) Introduce the educator program, a place to apply, and the highlights of the program


(C) Explain why their childcare service is perfect for parents and bring them to the price page

2.png

(D) Give updates and share event photos

(E) Show whom the organization serves, its mission, achievements, and impact. Add sections at the bottom for career and service seeking

(F) Include contact information and a place to leave a message

 

 

Mobile Version

3.png



Key Insights on Wireframes

  1. Make the website easy to scan by using blocks and spacings to create content hierarchies​

  2. More conversions on each page to make the users click sooner

  3. Consistent layout and design elements on each page

  4. Every page starts with an emotional photo and statement to grab users' attention

  5. Focus on readability in mobile designs

​

​

 

DESIGN

Visual Design

Mood:

Trustworthy

Feminine

Cheerful

Reputable

 

Color palette:

Burgundy, light pink, orange, brown, blue

Text: Dark grey not black

​​

Design elements:

Shadow for images

Line/line block/color block to separate content

Line icons(arrows, checks, secure checks)

Ellipse shape button style

Style Guide Final (2).png

 

DESIGN

High Fidelity Prototypes

I incorporated the research I did and wireframes I designed to further produce high-fidelity prototypes. This was the step where I precisely developed the design, including images, text/visual hierarchy, graphics, colors, and layout. Click the > arrow to the right of each photo to see more pages.

 

Design Decisions:

  1. Image shadows throughout the website are in different colors adding visual variety

  2. The orange text highlights to grab attention visually

  3. Circle/round edge icons match the chosen font

  4. Choose burgundy to represent the support for women's independence

  5. Combine orange, blue, and light pink colors to create a cheerful theme for their childcare service

 

SUMMARY

Design Outcomes

Lead users to support their mission

Use orange buttons that are easily visible​

Apply to call-to-actions such as donating or learning about their service​

​

Bring users into conversions

Maximize options on the home page to make users stay and click​​

​

​Use questions for headings​

Use "Why?", "Need?", "Want to?", "Are you?" to make users resonate ​​

​

Establish trust and reputation​

​Include a powerful mission statement on the home page

Give facts about their impact and recognition on the About page

Feedback

After presenting my final prototypes in class, I received the following feedback from both my peers and professor:

 

  • The color and font choices align with the organization's mission

  • Every image tells a story and matches with a CTA button

  • New information architecture improves overall navigation

  • The visual hierarchy is clear and the design is consistent

 

REFLECTION

If I have more time...

  • Explore additional design layouts

  • Conduct a more in-depth competitive analysis

  • Ask for feedback from the actual user group

© 2023 by Mingjung Kuo

bottom of page