UI/UX Designer and researcher, designing a responsive web app for ChoreBox, from conception to final prototype
Discovery and requirements gathering
Competitor analysis
Wire-framing: Paper and Digital
Low-fidelity wireframes and prototypes
High-fidelity layouts
User Interface Design
Accounting for accessibility
Usability testing and validation/project info
ChoreBox is a responsive website that helps parents and kids. It is an organized way to help families keep up with their household chores, get rewards, learn to invest, and donate to charity. ChoreBox helps kids learn about financial literacy at an early age.
Recently, my twelve year-old niece asked her parents for a particular Xbox controller she'd had her eye on. Her parents didn't necessarily want to say no, but instead wanted a way to instill a sense of responsibility in their daughter.
Until this point, she wasn't receiving an allowance per se, although she did have certain dedicated chores to help out around the house. Her parents wanted a simple way to reward her for her hard work. Something which would not only teach her financial independence, but would also help her grow financially.
I had an idea to make a sort of online chore chart that would allow the family to establish a rewards system for my niece and nephew, then upon further research, realized I might be able to help them learn a great deal more about their finances, including saving and donating money, and encouraging them to learn about financial independence.
The product is ChoreBox, and I developed it from conception to final prototype.
In order to utilize a solution-based approach to my problem, I looked to the Design Thinking methodology. This approach, formulated by the Hasso Plattner Institute of Design at Stanford (d.school), helps in addressing complex problems with unknown variables, by intrinsically understanding the human based needs.
The five stages of the Design Thinking Methodology are Empathize, Define, Ideate, Prototype, and Test.
By systematically applying each of these stages of Design Thinking, I was able to re-frame my problem in a humanistic based space.
"The best way for kids to understand money, is for them to earn it."
--Dina Isola, Ritholtz Wealth Management/RealSmartica
For this project, I took a comprehensive look at life during the pandemic, and saw a need for a product such as ChoreBox. Life careened between an eerie calm while the world shut down, to a hectic re-opening amid much uncertainty. If you took a look around in the past year, you might have noticed that pretty much every adult was having a hard time concentrating and focusing.
Children have had a difficult time of it as well. Many of this new generation are just starting to come into their own and forming opinions on, well, everything.
One thing I noticed with my niece and nephew, is that they started losing interest in things they normally enjoyed. Boredom was setting in, and they increasingly turned to social media for entertainment and socialization. With their parents lives in flux, they also found themselves in demand to help more around the house. A cause of stress for them was a lack of organization and structure, which affected their confidence and the motivation to focus their attention on worthwhile endeavors.
ChoreBox was inspired by my niece. One day she remarked that she wished she had her own money, so that she didn't have to ask her mom for a $10 gadget. This got me thinking about how I could help them, and the idea for ChoreBox was born.
Upon starting my research, I discovered that there were already several chore-type apps on the market, but I was determined to make something not only pretty, but also incorporated a delightful usability for children and parents alike.
ChoreBox explores the psychological principal of focus, attention and concentration. A recent study found that since the year 2000, people's attention span has dropped about four seconds overall. And this doesn't stop with adults. Between the confusion of the pandemic and myriad of new, cursory social apps on the market, children are showing a need to be stimulated in a more productive manner.
Additional research into the hierarchal model of cognitive function, shows that foundational information processing skills, such as attention, drive and information processing, could have a direct effect on the functioning of the higher cognitive processes. These include learning and memory, problem-solving, goal-setting, and self monitoring.
ChoreBox covers this principle by showcasing a lovely yet functional interface. This combination helps the whole family stay focused on what needs to be done, plus embodies a steadfast and accountable system of rewards.
For this project, I went a bit out of the norm, and conducted interviews with not only parents, but older children (twelve to thirteen year-olds) as well. I wanted to get not only the parents perspective of trying to keep their kid's schedules organized, but I also wanted to understand a child's chore app from the kid's own perspective.
While the adults wanted much the same thing: to teach their kids about finances and instilling a work ethic and responsibility, further research with the kids revealed that they wanted the chance to: do the work, get rewards for it, and have a little financial independence of their own.
From the user interviews, I was able to build empathy maps, user personas, and pain points based on my two focus groups (parents and children). After synthesizing this data I moved onto devising problem and hypothesis statements.
I delved into secondary research with a competitive audit, and used this information for the brainstorming activities of “Crazy Eights” and “How Might We’s”. I topped my research with a usability study after my low -fidelity prototype phase, to get a true sense of what the user’s pain points with the site.
In the empathize stage, I conducted initial individual user interviews with the parents, to understand what they really wanted, and why. I chose a series of 5 questions, both qualitative and quantitative in nature.
-Do you have set chores for your children?
-How do you break down the chores for each child?
-Do you have a rewards system in place, if so, how do you execute it?
-How do you keep track of what chores each child has done?
-How do you feel about children getting rewards for doing household chores?
I chose to interview a pre-determined list of young/borderline teenagers that I knew helped around the house, to get a true perspcetive on what kids would actuall like to see in a chore app meant for them.
-Do you have/do chores at home?
-Is there a checklist for your chores?
-Do you get an allowance? If so, is there a set payday, or is it random?
-If you don't get an allowance, would you like to do chores to get a set reward?
-Would you rather ask your parents for money or earn your own? Why?
In the define stage, I conducted thorough user research, including developing personas, user stories, a user journey map, and empathy maps.
Synthesizing the data from the interviews, I was able to form two distinct user personas and their pain points. This subsequently allowed me to write definitive problem and hypothesis statements, and formulate empathy maps, as well as a parent user journey map. The empathy maps and journey map helped me understand the problems Amanda and Maddie faced on their paths. It also helped reduce the impact of my own designer biases, by understanding how Amanda and Maddie think and feel though every step.
This new comprehension allowed me to recognize road blocks and pain points to correct, by identifying improvement opportunities. For example, allowing her to edit her kid's chores on a daily, weekly, or monthly basis.
As a busy mom and professional, I want to be able to set up an online chore chart and automatic payment schedule for my children' s allowance, so that I can help teach them about financial independence.
Amanda is a busy mom and professional who needs an easy website experience to schedule her kids chores and allowance, because she wants to teach them the value of financial independence.
If Amanda signs up for the ChoreBox website, she would have an easily organized experience scheduling her kids’ chores and allowance.
Maddie is a busy young teenager who needs a comprehensive website experience for organizing her chores and allowance schedule, because she wants to start having her own financial independence.
If Maddie signs up for the ChoreBox website, she would have an easily organized experience in doing her chores and getting rewarded for her hard work.
As we move further further away from the define stage, into the ideate stage, we can focus on the design ideation, and begin to brainstorm solutions to our problem statements. For this section I have compiled my competitive audit spreadsheets, an excerpt from my competitive audit report, and Crazy Eights.
The link to the full Competitive Audit Report is below.
My goal in this competitive audit is to identify my key competitors, and review the products my competitors offer.
I am looking at their visual layout and navigation, what custom features they offer, what standard features they offer, and how they handle chore limits, as well as spening limits and the financial flow.
I am also examining what the competition does well and what they could do better; searching for their strengths and weaknesses, gaps, and opportunities.
-How might we design a system that keeps track of the user's chores and their rewards?
-How might we allow kid's to choose their own rewards?
In the design stage I started with a user flow, and an information architecture sitemap, followed by paper wireframes, then digital wire frames for both mobile and desktop, and finally a low-fidelity prototype.
Paper wireframes are a fast and easy way to help UX designers quickly iterate and explore design ideas. I used paper wire-framing as a way to rapidly address different ideas concerning user pain points that I had found during my user research.
For example, I had originally thought it might be visually tempting to put a series of enticing food images on the homepage. But when I thought of the user needs for simplicity and fast navigation, I changed that in another iteration. In this case I decided it might be more prudent to have only a one large hero image, then a few hero cards from which users to choose their categories, in order to get them started quickly and efficiently.
After the usability study, it was clear that users wanted simplicity and an easy flow through the on-boarding process.
Initially I thought of using a carousel to showcase features. I included a broad footer to help users always find their way home.
After the usability study, it was clear that users wanted simplicity and an easy flow through the on-boarding process.
A mobile website needs the clarity and simplicity of a column layout, so all the features have their own card for easy grid order.
Initially I thought of using separate cards to highlight the balance and rewards options.
I thought it might be useful to incorporate graphs to show spending and savings processes.
Initially I thought of using separate cards to highlight the balance and rewards options.
I thought it might be useful to incorporate graphs to show spending and savings processes.
Since this is a responsive website, I deviated from the mobile-first approach and concentrated on the desktop breakpoint. The rationale is that the smaller cascading breakpoints will inherit the styles from the desktop base.
.png)
This low-fidelity prototype, built in Adobe XD, connects the 11 wireframes in the user flow for on-boarding/signing in, then choosing a recipe through the app. It also includes the flow to the hidden-in-plain-sight helpline.
This wireframe contains the interactive links that allow the user to proceed forwards and backwards within the sequence, and the embedded cues for user navigation are clearly indicated.
The link to the low-fidelity prototype is below.
In the testing stage I focused on the Usability Study parameters, and followed with an in-depth research study plan. This comprehensive stage also included synthesizing the found data with a note taking spreadsheet, an insight identification template, an affinity map, and finally my usability study findings.
In this section I am including an excerpt of my research study plan, as well as an excerpt of my usability study. Links to the full reports can be found below.
My goal for this research study was to examine my group of users and their needs, in order to add realistic context to my design process.
For the study, I started by outlining the background for my project. Then I set goals for my research and made a note of the questions I wanted to answer. Finally I established the steps I would take to conduct the study, and selected the participants.
This study includes 7 key sections including: the introduction, my research questions, the KPI's, the participants, the script, and finally the System Usability Scale questionnaire.
The link to the full report can be found below.
The usability study was an in-depth and comprehensive undertaking. You can find the full usability study report in the link below.
After the testing stage, I went back to the drawing board to refine my designs. I made specific changes to several screens based on the user feedback from the usability study.
At this point I was able to focus on the delightful part: choosing colors and images, and prototyping my final interactions while focusing on accessibility considerations. I have included an example screen showing what the labels on an annotated prototype might look like.
This section shows examples of changes in screen designs based on user findings, and a few mobile and desktop mockups and their prototypes. For a more comprehensive view, feel free to refer to the full case study slide deck.
After the usability study, it was clear that users wanted simplicity and an easy flow through the on-boarding process.
I was surprised to find that users didn't care as much about charts and graphs, as they did about plain explanations on how much money they had, their earning potential, and where it was going.
Each final mockup screen was designed with two-fold motivations.
First, they fulfill the parental need of an organized space in which to oversee their children's progress. Each parent (or guardian) has access to their own dashboard and profile page to allow them to easily scan the whole families information and interactions.
Secondly, the children each have their own dedicated dashboard as well. Not only does this give them a sense of independence and autonomy, it helps them learn discipline and gives them a chance to regulate their own actions.
ChoreBox is the full package of a model chore and rewards site, boasting the ability to organize the chores on a daily, weekly, and monthly basis. It also will allow children to spread their financial wings, by giving them a bit of control of their own money that they earn. Pending parental permission, they can choose how to spend their money, including learning the foundations of donating to charities and even investing in fractional stocks.
ChoreBox was designed to be responsive to all device sizes.
Digital devices have become an innate part of our lives. These days you might see a family with either a desktop, a tablet or a mobile phone within reach; often a combination of all three. Children are getting mobile phones at an increasingly younger age, and as they get older and advance in school, , it isn't uncommon for them to have access to tablets or even laptops.
Thus it was important for ChoreBox to be accessible from anywhere. The mobile version is simply a responsive version of the desktop, with all the same bells and whistles that make it a delight to use.
This high-fidelity prototype, built in Adobe XD, connects the 16 screens in the user flow for on-boarding/signing in, then allows for choosing a dashboard through the website. Users have a choice between a parent or child dashboard, each with their own profile settings.
This prototype contains the interactive links that allow the user to proceed forward and backward within the sequence, and the embedded cues for user navigation are clearly indicated.
In the final stage of my case study, I explored the takeaways and next steps of my project, determining what I have learned and what I could do better going forward.
This design could be a huge undertaking to develop all the screens I would like to include for mobile, so my next step would be to include an updated and heavily detailed user flow for another list item, such as incorporating a cart option so users could order their groceries online.
Thank you for reviewing my work. You can review extra details in the comprehensive case study slide deck linked below.
