Client
Deliverables
Branding
Website
UI/UX
Game
Overview
This project involved designing an engaging and educational website for "Julie Before You Dig," a non-profit organization based in Illinois with the objective of raising awareness about the necessity of calling 811 before digging to prevent damage to underground utilities. The target audience was children, and the aim was to simplify Julie's role in a manner that would resonate with children.
Problem
The client faced a challenge in communicating Julie's crucial job to children. While many kids understand the importance of calling 911 during emergencies, the concept of dialing 811 before digging was unfamiliar. The client sought a solution to bridge this gap in understanding and wanted a kid-friendly website to effectively convey Julie's responsibilities.
Goals
As the designer on the project, the solution involved creating an interactive and visually appealing website that made Julie's job accessible to children. Drawing inspiration from childhood memories of playing website games, the strategy was to employ cute animal characters, fun animations, and interactive games to convey the information in an engaging manner. The goal was to simplify complex concepts through short words, vibrant visuals, and interactive elements.
Research & Analysis
Before starting on this project, a thorough concept research was conducted to ensure a well-informed and strategic approach. The goal was to gather inspiration, understand current trends in children's websites, and explore diverse interactive concepts.
To present a variety of options to the client, three distinct concepts were formulated—Touchpoints, Vertical Scroll, and POV. Each concept was carefully crafted with specific goals in mind, tailored to cater to the unique learning preferences and attention spans of the target audience.
Develop a full-height website where all interactions occur within a single view, eliminating the need for scrolling.
Create a microsite with familiar vertical scrolling, enhanced by subtle background animations as users navigated through the content.
Implement a first-person perspective site offering 2-3 clickable paths to different sections, encouraging curiosity and engagement.
Vertical Scroll
In response to the client's selection of the Vertical Scroll concept, I presented two distinctive design variations.
Concept A featured a continuous landscape illustration resembling the state of Illinois as the background, creating a cohesive visual theme throughout the website. Alternatively, Concept B introduced dynamic visual engagement by incorporating different backgrounds for each section, all maintaining the essence of Illinois.
Client chose Concept B, appreciating its visually stimulating approach with varied illustrations as users scrolled through different sections, enhancing the overall aesthetic appeal and interest of the educational platform.
Concept A
Concept B
Wireframe to Design
Click to view the completed design
Game Ideas & Sketches
Spot the Difference
Clean and straightforward layout, and minimalistic buttons for easy navigation, ensuring that the focus remained on the engaging visual task of spotting differences.
Coloring Book
An uncomplicated interface, reducing the number of buttons to streamline the coloring experience for young users.
Spot the Difference
Coloring Book
Spot the Difference
Spot the Difference is designed with three difficulty levels—easy, medium, and hard—to suit different ages and abilities. Each level adjusts the number of lives, and a help button is available for kids who need assistance in spotting differences. The emphasis on a simple and clean UI ensures easy navigation, allowing children to focus on the engaging illustrations and the fun challenge of finding the differences without unnecessary distractions from complex UI/UX elements.
Coloring Book
Coloring Book is designed to nurture creativity in children. To simplify the experience, a limited color palette is used, each color thoughtfully labeled to aid in color recognition learning. To enhance the user engagement, the mouse cursor transforms to the selected color, providing a visual cue for young users. The overall design maintains simplicity, allowing kids to immerse themselves in the coloring activity.
Color Palette
For the color palette, client wanted earthy warm tones to reflect the landscape of Illinois. These chosen colors were then applied as primary colors for fonts, buttons, navigation, and other UI elements, harmonizing the design with the natural warmth of the state's scenery.
Ivory
#FAF8DA
Blue
#007CD3
Light Brown
#8E6C51
Brown
#4A2B29
Orange
#FF6500
Dark Brown
#312924
Typography
I chose Sora as the primary typography for this project, for its child-friendly characteristics, providing easy readability with its sans-serif design. It seems like a simple rounded typography, but the varying thickness in letters adds a fun element, creating a visually appealing and accessible reading experience for the target audience.
UI Kit
To enhance user understanding, UI elements like buttons and navigation are designed with pill shapes, providing a clear indication of clickability. This straightforward approach aims to simplify the user experience, making it easy for young users to recognize and engage with calls-to-action.
Hi, I'm Kelly, a Digital and Motion Graphics Designer based in Rochester, NY.
© 2024 Kelly Choi. All Rights Reserved.