Responsive Web Design
mockups of desktop, tablet and mobile for chore app

My Contributions


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

Project type
UX Design
Project Duration
May-June 2021
Design Tools
Adobe XD, Figma, Photoshop, Illustrator


Doing chores made easy.

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.

The Process

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 (, 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.

design thinking process diagram
A Design Thinking process model, based off Stanford's diagram
exclamation icon

The Problem:

During this past year of shutdowns, many households were disrupted from their norm. Without order and structures in place, at many times it felt chaotic. Families lives were disrupted and more help around the home was a necessity, which led to a couple of problems:

1) Normalcy depended on establishing organizational patterns around the house.

2) Children were still growing and learning, so the need to institute active learning strategies and methodologies was as important as ever.

These basic tenets were necessary to help instill confidence and motivation to focus their attention on the benefits of something beneficial, such as their futures.
star icon

The Goal:

The goal of ChoreBox is simple:

1) To create and instill financial literacy in a new generation.

2. To add the organizational factor needed to assist parents teach their children about finances and having a strong work ethic.

3) To motivate children to take responsibility for themselves, while earning rewards for their hard work.

ChoreBox focuses on establishing routines to designed to benefit the entire family.


"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.

Principal of UX Design Psychology:

Focus, Attention and Concentration

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.

attention span graphic by alecia mitchell
cognitive function diagram, redesign by alecia mitchell
A hierarchical model of cognitive functioning


book icon

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.

checkbox icon

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.

User Interviews: Parents

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.


Guerilla Interviews


6 parents interviewed


15 minutes each

Interview Type

Contextual Interviews

Initial Questions

-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?

User Interviews: Children

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.


Guerilla Interviews


6 children interviewed


10 minutes each

Interview Type

Contextual Interviews

Initial Questions

-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?

Understanding the User

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.

User Story: Amanda Johnson (Parent)

User Story

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.

Problem Statement:

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.

Hypothesis Statement:

If Amanda signs up for the ChoreBox website, she would have an easily organized experience scheduling her kids’ chores and allowance.

User Persona: Amanda Johnson

amanda johnson persona

User Research: Amanda's Pain Points

number 1 icon


Amanda needs to see what her kids are spending their money on. Maddie wants to be able to have her own money and feel a little more financially independent.
number 2 icon


Amanda needs the kids to have a debit card so that they don’t lose their allowance.
number 3 icon


Amanda needs an easy way to reward her kids for a job well done.
number 4 icon

Information Architecture

Amanda needs an easy to follow flow to organize her kids’ chores, so we need to make sure to develop an informative site with lots of detail to make it easier regulate their progress.

User Journey Map: Amanda

user journey map amanda johnson

Empathy Map: Amanda

empathy map amanda johnson

User Story: Maddie Stuart (Child)

Problem Statement:

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.

Hypothesis Statement:

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.

User Persona: Maddie Stuart

maddie stuart persona

User Research: Maddie's Pain Points

number 1 icon


Maddie wants to be able to have her own money and feel a little more financially independent.
number 2 icon


Maddie wants to be able to shop online without having to ask her parents for gift cards.
number 3 icon


Maddie marks her chores off on the refrigerator chart as she finishes them, and waits for her parent's approval.
number 4 icon

Information Architecture

Maddie is Gen-Z, so needs something that speaks her digital language, easily regulates her chores, and helps teach her about financial responsibility in a fun but structured format.

Empathy Map: Maddie

empathy map maddie

Understanding the Competition

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.

Competitive Audit Spreadsheet

competitive audit spreadsheet

Competitive Audit Report (Excerpt)

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.

competitive audit

Crazy Eights & HMW's

Identify 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?

Three ideas generated with Crazy Eights:

  • The priority of this app is structure and organization, so the focus will be in the chore search and filter section. Along with this, it could have an in-site chore map, where users can click on areas that appeal to them.
  • Have an area where the parents and kids can see what they have accomplished that week, and the rewards coming to them.
  • Incorporate sections for donating to charity and investing in fractional stock, to learn financial awareness and independence.
crazy eights

Starting the Design

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.

User Flow: Chart

user flowchart

Information Architecture: Sitemap

information architeccture sitemap

Paper Wireframes

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.

paper wireframe

Digital Low-Fidelity Wireframe: Desktop Onboarding

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.

lo-fi desktop wireframe

Digital Low-Fidelity Wireframe: Mobile Onboarding

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.

lo-fi mobile wireframe

Digital Low-Fidelity Wireframe: Desktop Rewards

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.

lo-fi desktop wireframe

Digital Low-Fidelity Wireframe: Mobile Rewards

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.

lo-fi mobile wireframe

Digital Desktop Wireframes

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.

lo-fi desktop wireframe
security desktop
live chat desktop
guides desktop

Low-fidelity Desktop Prototype

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.

lo-fi desktop wireframes
lo-fi desktop prototype

Usability Study

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.

Usability Study: Parameters

clock icon


15-20 minutes
user group icon


5 Participants
location icon


United States, remote
clipboard icon

Study type:

Unmoderated usability study

Research Study Plan (Excerpt)

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.

ux research study plan excerpt

Usability Study: Note Taking Spreadsheet

usability study note taking spreadsheet

Usability Study: Insight Identification

usability study insight identification

Usability Study: Affinity Mapping

usability study affinity mapping

Usability Study: Findings

These were the main findings that the usability study revealed:
number 1 icon


Participants were confused by the lack of options in the dashboard.
number 2 icon


Participants were confused by a lack of chore search options.
number 3 icon


A pressing P0 issue was that users were concerned that they didn't get confirmation when buying a stock or donating to charity.

The usability study was an in-depth and comprehensive undertaking. You can find the full usability study report in the link below.

The Outcome: Refining the Design

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.

Redesigning the Screens: Low-fidelity Onboarding

After the usability study, it was clear that users wanted simplicity and an easy flow through the on-boarding process.

lo-fi desktop wireframe

Redesigning the Screens: Low-Fidelity Rewards

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.

lo-fi desktop wireframe

Redesigning the Desktop Screens: High-Fidelity Mockups

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.

lo-fi desktop wireframe
hi-fi desktop mockup
security desktop
live chat desktop
guides desktop

Landing page

hi-fi desktop prototype

Redesigning the Mobile Screens: Hi-Fidelity Mockups

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.

hi fidelity mobile mockups

High-fidelity Desktop Prototype

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.

high fidelity desktop wireframes
high fidelity desktop prototype

Accessibility Considerations

These were the main accessibility focus points:
number 1 icon
I ran my colors the the color interface tool in Google's Material Resources, and made sure that all my colors were AA to AAA accessible.
number 2 icon
I made sure that my text, buttons and icons were of an appropriate size to be easily legible, no matter upon what screen size a user was viewing and using the site.
number 3 icon
I explored annotating my prototypes for web accessibility, based on WCAG guidelines. These annotations show the engineer the linear focus order, or traversal order that assistive technology (such as a screen-reader), would move through the form. An example of this is below.
WCAG Guidelines: Annotated Prototype for Web Accessibility
annotated parent signup screen, wcag guidelines for web accessibility

Going Forward

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.


checkbox icon


The feedback I received from my usability study and my high-fidelity prototype has been positive. They show that the design of this app and website is usable and meets the user's needs.

book icon

What I Learned:

In designing ChoreBox to be responsive on desktop and mobile, I learned that not only extensive user research, but also strict attention to design guidelines for different sized screens, play a crucial role in the UX design process.

Next Steps:

number 1 icon

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.

number 2 icon
I would likely need to conduct more user research into the complexities of security. for example: gathering the insights I need to make the users feel comfortable giving out personal information.

Thank You!

Thank you for reviewing my work. You can review extra details in the comprehensive case study slide deck linked below.