Playground
Winter/Spring 2023 Industry Project
Introduction
Playground is a child care management software that manages billing, attendance, registration, communication, paperwork, reporting, and more for childcare programs. We were tasked with creating multiple web business tools to help users accomplish simple tasks efficiently, answer their questions, and increase user traction.
The Team
Alexander Hoang — Lead Developer
Jaskinder Sarai — Developer
Jason Nguyen — Developer
Sophia Ngo — Designer
Cindy Lee — Designer
Timeframe
Jan — Jun 2023 | 16 weeks
Tools
- Figma — Cloud based design tool
- Framer — Hosts website and employs react.js
- React.js — Open-source JavaScript library for front-end development
- HubSpot — Backend database to store user data
The Project
Introduction Quiz
Time Space Calculator
Profit and Loss Statement Generator
Employee Retention Tax Credit (ERTC) Eligibility Assessment
Design and Development
Design System
Since we worked with Playground’s existing design system, we strived to blend our designs with Playground’s existing online identity throughout our entire process.
Introduction Quiz
Overview
A short quiz to evaluate how Playground can best help their users based on their differing situations.
Literature Review
We began with literature review for design inspiration by researching websites with a similar tool such as the embedded quiz on the homepage of himama.
Low-Fidelity
- Chose column format
From the beginning, we decided to implement a column format to maximize visual appeal and usability in which the quiz questions would appear on the left and be accompanied by an eye-catching graphic on the right. - Added a pop-up at the end
We also implemented a pop-up with the goal of directing the user toward other tools on Playground’s website upon finishing the quiz. - Implemented family friendly graphics
As you can see in the following image, we implemented graphics with simple elements and incorporated happy faces onto our progress bar as well as an ambiguous giraffe character to appear family friendly and on theme with Playground’s focus on childcare management.
Mid-Fidelity
- Changed graphics
In mid-fidelity, we decided to focus on reminding the user about Playground’s unique branding by incorporating the character graphics that are currently featured on their website. Our goal at this stage was to lead users to associate this tool with Playground. - Switched from pop-up to ending page
We also avoided disrupting the user experience by implementing a thank you page at the end of the quiz rather than a pop-up.
High-Fidelity
- Implemented a different graphic when hovering over each option
The final prototype includes several drastic changes in that we decided to show the user a different graphic every time they hover over or choose a certain quiz option in order to build retention and more user interaction with the tool. - Switched to more professional graphics
We implemented most of Playground’s existing graphic assets for each option and built the final prototype with the goal of appearing professional rather than family friendly as we reminded ourselves of Playground’s target audience being childcare businesses.
Development
- Skeleton
The Introduction Quiz was the first tool we developed. It became the base with which all future tools were built off of. It implemented the existing assets and designs found across the rest of the website as well as established a basic flow between content. - Dynamic Output
This tool outputted unique results depending on user input. This required tracking the current state the user was in and directing them accordingly.
Time Space Calculator
Overview
A calculator tool to help users determine what percentage of their home is being used for businesses, so they can base their expenses such as property tax, utilities, home repairs, and homeowner’s insurance on this amount.
Literature Review
We first began by conducting a literature review on an article the Texas Workforce Commission to learn what the Time Space Calculator is and how it functions.
Low-Fidelity
Next, we made low-fidelity wireframes of all the necessary inputs and frames.
Mid-Fidelity
Our client shared a few reference tools of designs he liked, so we referenced the layout of Service Titan’s Service Business Valuation Calculator tool and followed a similar center-aligned text. We wanted the users to know clearly which step they were on, so we labeled each step in the progress bar.
High-Fidelity
Our client wanted to change the layout for all the tools, so we edited the mid-fidelity wireframe to fit the new layout, which has a title and description on the side instead of at the top. After presenting our mid-fidelity prototype to our client, we also implemented the following changes.
- Switched from a center-aligned format to a left-align format
We decided to opt for a left-align format for better readability. - Switched to a non-labeled progress bar
We switched to a non-labeled progress bar because the labeled progress bar was not responsive on tablet and mobile as it requires too much screen real estate. We also changed the color of the progress bar from blue to green, because the color green is often associated with success. - Added more transitions and animations
We added a processing animation that turns into a checkmark for positive reinforcement for the user. The final Time Space Percentage Report was also animated instead of being an image to make the frame more interesting.
Profit and Loss Statement Generator
Overview
A tool to generate a profit and loss statement which is a summary of all business income, expenses, and profit during a certain period of time. In the end, the user is able to download a PDF of the generated profit and loss statement.
Literature Review
We began with literature review in that we researched about the definition of a Profit and Loss Statement and how it functions. We also researched websites with tools that resemble the amount of user input needed for our tool. For instance, we referred to HubSpot’s Invoice Template Generator for inspiration.
Low-Fidelity
- Chose column format for all sections and table format within each section
We decided to follow a column format for all the sections and a table-like format for user input fields within each section. However, we later struggled with demonstrating clear division between each section with this format.
Mid-Fidelity
- Switched to separated sections
To avoid cognitive overload and make it more clear about which user inputs belonged to each section, we separated each section into their own pages. - Made important calculations more noticeable
We also brought attention to the summary calculations (gross income, tax amount, and net expenses) through visual hierarchy by making them bigger and blue.
High-Fidelity
- Switched to table format for user inputs
We switched to a table format with the goal of reducing cognitive load and making user inputs more subtle and less demanding. In other words, we strived to avoid making the user overwhelmed by the amount of information they have to input.
We also gave users the option to add and delete their own items if they have other things to input besides the predetermined user input fields. - Separated each section into different steps
We separated each section into different steps to guide the user through the tool one step at a time instead of asking them for all user inputs at once. - Updated predetermined user input fields
After conducting literature review, we accounted for variety in sources of income and expenses by adding more predetermined user input fields. - Created downloadable PDF to mock the tool’s table format
We designed the downloadable PDF at the end to mock the tool’s table format in order to achieve readability and to remind the user about the PDF being based off their input in the previous steps.
Development
- Dynamic Input
Profit and Loss statement allows for custom user inputted items to be added to our tables. These variable incomes or expenses are then accounted for in the calculations as well as stored and transferred into the final result - PDF Output
After user has provided the necessary information the tool produces a custom Profit and Loss Statement based on their specific incomes, expenses, and tax rate. This document is then converted into a downloadable PDF. - User Images
The user can optionally upload their organizations logo. The image once uloaded by the user is then dynamically resized so they can preview what it might look like in the final document. The resized image is then placed onto the PDF. If no imae was uploaded the final document will adjust to a alternative design without a logo.
Employee Retention Tax Credit (ERTC) Eligibility Assessment
Overview
A quiz tool to help users find whether they’re eligible for Employer Retention Tax Credit, which is a refundable tax credit for businesses that continued to pay employees while either shut down due to the COVID-19 pandemic or had significant declines in gross receipts.
Literature Review
We conducted multiple literature reviews on various articles and informational sessions to learn what ERTC means and how to determine eligibility. ERTC Eligibility is a bit confusing to determine because you can qualify in more ways than one, there are multiple determinants, and eligibility requirements differ depending the year. We found this chart from Jamie Trull’s chart which organized the requirements in a more digestible format, and began creating our low fidelity prototype.
Low-Fidelity
We started off by creating low-fidelity wireframes for each question in the flow chart. The emphasis during this phase was to map out how each frame connected with each other. Here is a snippet of the low-fidelity flow.
Mid-Fidelity
After figuring out how each page was connected, we began to focus on establishing a format to display the information.
Iteration 1:
To keep all the tools fairly consistent, we recycled the Time Space Calculator’s layout. We also added arrows to the buttons to keep it consistent with the other button components on Playground’s website.
However, after presenting this to our client, they felt that there were too many arrows and they associated arrows with moving to a new frame. Thus, we ideated various other button components.
Our client liked the 3rd version, so we used those buttons.
Iteration 2:
Our client wanted us to group some of the related questions into the same frame. The frame would begin with only one questions, but after the user successfully completes the questions, the next part will be revealed at the bottom. This was possible during this iteration because the old layout for all the tools had the title and description on the top and the tool at the bottom, so we had a lot of space to work with.
However, after we incorporated the new layout for the tools with the title and description on the left and tool on the right, the width of the tool was minimized by half, so our tool was super long. We felt this was a poor visual and experience design, so we decided to fix the viewport and have the contents within the square be scrollable to prevent the viewport from constantly changing. We also split different parts of the question into multiple frames instead of grouping them to avoid having users scroll excessively.
High-Fidelity
Our final prototype includes a fixed, scrollable viewport. We picked 600px by 600px as the size of our tool because we liked the square shape and since our tools differs by length depending on the content of each page, we felt that 600px length was the perfect length to not leave too much white space for shorter questions but long enough to display an ample amount of information for longer questions. The “back” and “next” buttons are always fixed in the same place and are only clickable after all of the information has been filled out for negative reinforcement.
Development
- View
This tool features the user view changing dynamically based on their responses. All pages are presented in a scrollable fixed viewport. This view will either expand to continue the current page or transition to the next page with a smooth animation.
The tool also utilizes a processing page to process the information that is inputted, making the process much more smoother and professional. This was done by using a react.js library called react-spinners. - Input Fields
Dates are inputted through a dropdown calendar from the user from the react-datepickers library. Multiple choice options can be toggled in case of a mistake. User input is also validated throughout the process to notify them if anything was incorrectly added. - Unique Outputs
Depending on whether the user input’s answers to the following questions, they will be redirected to a page notifying the user whether they are eligible or not. If they are not, they will still be notified and be asked to put in information to stay up to date.
Takeaways & Challenges
Designers: Understanding the Designing Process
Our designers faced the challenge of understanding how much freedom they had to incorporate their own creativity into the designs. They also persevered through several different phases and testing to make our clients vision become a reality.
As the designers gained more experience, they were able to work more efficiently and their deliverables progressively became more advanced in quality. Due to their involvement with CodeLab and their ambition to live up to our clients expectations, they were able to take a step into the industry as well as understand what is expected of them while improving and refining their skillset.
Developers: Learning to Adapt
One of the challenges our developers faced was learning how to bring our clients vision and our designers hard work to life. In order to do so, we had to adapt and learn how to work cross-functionally with one another by communicating thoughts and ideas clearly and concisely. We also had to learn how to utilize multiple new libraries effectively to ensure efficiency when compiling and launching code.
As the term progressed, our developers gained a valuable amount of knowledge by overcoming the increasing complexity and robust feature set of each tool . Working for a client only motivated them even further to ensure that the project would be finished in time for our client to publish on their website.
Communication
In the middle of the term, our teams communication with the client was temporarily paused. Our clients communication point had multiple other slack channels which caused our messages to fall through the cracks.
To resolve this issue, we scheduled a meeting with our client to understand how to better accommodate to his busy schedule, which we were able to do by sending him Google Calendar invites and emails.
Conclusion
We would like to wrap things up by thanking Playground for the opportunity to work alongside them on their website. They provided us guidance and insight throughout the whole process, allowing up to gain more experience in the industry as well as grow professionally.
Most importantly, we would like to thank our point of communication with Playground for being so flexible and patient with us. We understand the amount of time and commitment it takes to entrust an important part of the company website to us. Hopefully we were able to provide you with something playground will use in the future whether it be designs or the code we were able to develop in the short time we were able to work with you.
