Project Overview
Product Duration: September 20, 2022- Nov 11, 2022
Job Type, Company: Contract position, Tiny Steps Day Care
My Role: Lead UX Designer, Graphic Designer
-
Created logo for the brand
-
Made low and high fidelity wireframes and prototypes for the website
-
User research: Creating problem & goal statements, user stories, aggregated empathy maps & personas, user journey mapping, and user flow mapping
-
Competitive audit and report
-
Established logo design specifications and design system for the website
My Key Contributions
The Problem
A local day care needs a website made where parents can research and find all information pertaining to their day care and operations. They have not yet open, but want the option for parents to enroll their child and be placed on a waitlist.
The Goal
Create a website for Tiny Steps Day Care that will let users learn about their daycare, policies, structure, and rules. This will affect parents looking for local day care services by allowing customers more information to their business and services. We will measure effectiveness by tracking traffic to the website, tracking sign ups, and viewing the clickthrough rate.
Ideation & Design
Proposed Solution
Based on user research, the company's requests for the project, and foundational research compiled from the competitive audit, I began to map out the user flow for the website that would help customer's navigate the Tiny Steps Day Care website easily while also providing the most direct path to finding the information customers are looking for.
​
The first attempt to solving this UX problem involved creating a number of website headings that could act as the start of the user flow, but not so many that it confused users. The headings needed to be concise yet accurately describe what information would be nestled underneath each category.
From Low to High Fidelity
Project Highlights
Motion Design on Homepage
I opted for a fixed background on the homepage to give movement to the elements in the forefront. The motion enhances communication to the user by having certain elements stand out from the background, signaling items of importance. This design choice helps establish visual hierarchy by grouping or separating items on the page from one another. The patterned background is aligned with the alternative logo the company has, which furthers the branding.
Soft Enrollment Feature
A key feature the company wanted was the ability for parents to use the website to place their child on a waitlist. First was the issue of terminology so that customers didn't feel like they were indefinitely waitlisted. We coined this "soft enrollment" with language explaining the program and how it worked. Furthermore, I simplified the user flow so that once on the enrollment page, one could easily input their information and sign up by clicking the button "place my child on waitlist". Lastly, a confirmation message replaces the soft enrollment fields so that users know that their request was received.
Design Impact & Considerations
Design Impact
Tiny Steps Day Care has yet to launch their website and open their facility, so I will speak to the design impact of the project. I have helped the company establish their brand colors, logo, and compiled style guidelines that indicate detailed instructions on logo usage, spacing requirements, color, etc. They now have a website design that looks and feels consistent with their brand and allows customers to complete core user tasks easily. I created UI components specific to the customer's needs for their website. As well, I developed extensive design documentation in the form of a style guide (pictured right) that outlines typography, iconography, and color which can be built upon as they continue to develop their website.
Business Impact
While I can't directly speak to the business impact of the product, I'd like to offer a number of ways that my contributions have provided value to the company. Through extensive foundational research I completed, the company now has a competitive audit report highlighting their competitors, their unique product offering, and how they fit into the market. In this way, I ensured their website stays competitive with other companies. Moreover, the potential business impact of the “soft enrollment” feature I designed is that it will help the business gauge how much money they will initially generate once operations commence. The selective wording used for soft enrollment and this section of the website will help to give customers a better impression of this service and hopefully result in more parent's signing up their child prior to the facility opening.
Going Forward
Limitations & Constraints
One main limitation in the project was that of time. Tiny Steps Day Care is hoping to open soon and the owner wanted the website to be up and running so that parents can place their child on the waitlist prior to opening their facility. Due to this, I prioritized the overall look and functionality of the website with the ability to build upon specific feature in the future.
Another limitation is that my final design has not been tested. If I had more time to work on the project, I would run a usability test with participants to see whether specific features of the website work as intended and how the overall design fits with customer expectations.
Improvements Going Forward
News and Events Page
One part of the website that could be improved upon is the "news and events” page. When speaking with my client they were unsure about whether they wanted a calendar integration, like a Google calendar for example, or if they intended to update news items directly on their website. As such, this page will need further development to figure out the best layout and content to appear on this page. As a way to streamline the process of updating their news and events, I believe in the future this page could be linked with their Google calendar. This will take the work off the client from constantly updating both their calendar and website.
Mobile Design
Had time not been a constraint, I also would have worked on making a mobile version of the website. I would have used Graceful Degradation to design top-down from desktop to mobile. This technique would work best because most users of this website would be looking to read long-form content and would opt for the desktop version as their main device. Hence, it was vital to design for the desktop version first and then consider designs for smaller devices such as mobile.
Solution
High Fidelity Prototype
Each iteration of the design, from paper wireframes to low and high fidelity designs, helped to solve the UX issues that were laid out in the beginning of the project. Some techniques that made this design successful include:
​
Concise User Flow: Navigation was made simple by including 6 headings that included copy that best described that section of the website and helped to initiate the flow that users would take through the website.
​
Call-to-action: On different pages, I included call-to-action buttons that helped guide users to find the next page they would want/need. Additionally, I ensured there were multiple opportunities across the website to navigate to "soft enrollment."
​
Branding: The aesthetics of the website match the company branding. Everything from color, typography, and iconography has been accounted for. On the homepage, a modified version of their logo has been used as the background.
Contact
I'm always looking for new and exciting opportunities. Let's connect!
650-695-9210
Accessibility Considerations
Hierarchical Content: Using the Gestalt Principles, I ensured content was laid out in a way that guides users for how they should read the page. By creating hierarchical titles and following the rules of proximity, the result was optimal readability of the website. These features help make the design inclusive by allowing screen readers to pick up on elements of importance. As well, these principles make the page less cluttered and more legible.
Gallery Text Descriptions: Each photo in the gallery is accompanied by text descriptions. This will help screen readers easily identify the contents of images. When images are clicked, I also included hover over text descriptions below images. This implementation of inclusive design helps those with visual impairments who rely on screen readers, but also extends to those wanting more information on an image.
​
​
Color Contrast: As per the WebAIM color contrast requirements, all background and foreground colors meet this standard. All fonts also meet these accessibility requirements of being 7:1 for normal text and 4.5:1 for large text and icons.
​
​
​
​
​
