Date: Jan. - Mar. 2017
Course: Advanced Design & Prototyping
Team: Nadia Shamsedin (me), Todd Mihlbauer, Stacey Seronick, Katie Jones, and Megan Cody
Roles: UX Researcher & Designer, Lead UI Designer, Interaction Designer
Tools: Sketch, Invision, Mural
Background: Our team was tasked with producing and designing a novel product from conception to final design. We decided we wanted to take on the challenge of creating a mobile application where parents can create and manage chores for their children, as well as creating a separate interface where their children can also manage their chores. This project presented several challenges for us, namely the fact we have two decidedly different types of users who will want to accomplish different tasks.
Goal: Our design goal was to create and design an easy-to-use, intuitive, and thorough chore and screen time management mobile application with two different interfaces - one for the parents and one for the children. Our end goal was to create an application that will aid parents in teaching their children to establish healthy boundaries with their devices and cultivate personal responsibility.
Final Product: View our prototype created in Invision here
Watch our pitch video with our final version one prototype below:
View the full process in-depth report here. The report features all of our sketches, wireframes, and mockup screens for you to follow along as you read.
Goal: Begin to conceptualize potential key features of ChoreTime by researching other chore management apps on the market to see what features they are lacking and diving into what our users actually want and need.
Approach: Market research, competitive analysis, limited scholarly research, user interviews, informal focus group, personas
We spent a lot of time and energy during the research phase of this project because how parents actually parent their children is quite a serious and sensitive topic. We weren't just designing a mobile app. We had to design with the entire parent-child relationship dynamic in mind. The user experience does not begin and end with a digital product; we have to think bigger than that. Our research showed that parents are currently highly concerned with their childrens' screen addiction and the market is ripe for a product that will teach kids and teenagers how to "earn" their time and learn responsibility. I personally conducted one of the interviews with a single mother.
Through our market and scholar research, competitive analysis, and user interviews, some salient points came up for us to consider in our design approach:
1) Parents treat each child differently and consider chores, screen time, punishments/rewards individually.
2) ChoreTime emphasis should be focused on rewards for chore completion and minimize its use as a punishment tool.
3) ChoreTime should build in some degree of child autonomy to promote child’s buy-in and development as a means for teaching self-monitoring use of screen time. Parents should retain some control, but the child deserves some freedom.
Some examples of how we applied our user and background research to our design decisions:
1) We organized the parent homepage by child, allowing easy at-a-glance view of one child and their chore responsibilities at a time.
2) We changed the chore management system from punishment-based to reward-based. Early concepts involved a system that would automatically revoke device access when chores were not complete.
3) We opted for a child’s time bank that allows them to spend or save the time they earn wherever they choose (up to a daily max limit). Some previous concepts involved specific chores rewarding time to specific app groups, but we liked the idea of allowing them to spend their time how they see fit as a way for them to teach themselves about tradeoffs.
Goal: Think through and make design decisions of all the potential structure and functionality of ChoreTime.
Approach: Use cases, storyboards, scenarios, user flows, information architecture
After all of our research, we had to synthesize the data and begin making major decisions about the functionality of ChoreTime. Ease-of-use was a big point for us. We know parents are busy individuals and we wanted to ensure we did not make ChoreTime unnecessarily complicated. We know parents will just want to go into the app when necessary and get out of it as quickly as possible. We developed use cases, storyboards, scenarios and user flows to think through how our users would interact with ChoreTime and what tasks they would need to accomplish. The user flows in particular helped us think through the pathway our users would need to take and constantly helped us remember to simplify, simplify, simplify!
Designing the an information architecture for this app was its own major challenge because there were multiple functionalities to consider: chore management, screen management, and child profile management. We came up with a basic framework (right) early on. This framework stayed largely intact, but we did make some reiterations as we designed:
1) Removing the negotiation function/section: Our interviews showed that parents want real-world (not screen-mediated) connection with their kids; we think negotiation can and will happen outside the app, facilitating real-world conversation between parent and child.
2) Adapting the reward system: We also adjusted the reward system to be based on minutes, not tokens or points; parents assign a minute value for each chore, which represents the amount of extra screen time the child gets for completing it. This decision stemmed from a desire to simplify the experience for both parents and children.
3) Setting a free daily allowance: We also added a way for a parent to set a daily allowance, giving the child a certain amount of screen time per day without having to do chores to earn it. The chores, thus, function as a way to earn "bonus time.” Part of this rationale stems for our parent interviews that emphasized teaching children time management, while still giving parents the ability to set limits. We also shifted this section to be part of the home page instead of its own section.
Goal: Put our concepts for ChoreTime into action by developing and iterating wireframes
Approach: Sketches, wireframes
Our sketching process allowed the team to explore a variety of ways to organize our content and core interactions. We began by sketching out a variety of ways to handle home screens for parent and child and the core actions (manage devices, add a chore, add a child, complete a chore). We sketched out the two different interfaces, with an emphasis on ease-of-use for both parent and especially child.
Decisions made about the child interface during the sketching process include:
1) Main navigation at the bottom with center button and radial menu. Reachable by smaller hands.
2) Collapsible content style.
3) Child’s time bank should be displayed prominently on the home page.
4) We considered whether to display a day-to-day view, week view, or a monthly calendar view, and chose a day-at-a-time approach.
5) This needs to be a simple, intuitive process for children to be able complete.
6) When a chore is completed, the child must submit a photo from within the app (and cannot use a photo from their camera roll). The photo provides proof to the parent that the child completed the chore and the parent can then approve the time to be added to their time bank. We chose to add this feature so that parents do not need to follow-up with their children in person to see that chores were completed.
7) Added a comment box to send message to parent with the photo.
With these design decisions, children can easily see and complete chores on their to-do list, see the time in their time bank, submit photos of their chores for approval, and check available remaining device time at a glance.
Decisions made about the parent interface during the sketching process:
1) There needed to be a separate child profile with chore and screen time information for each child. We decided to use a carousel of children’s photos at the top of the screens to allow for the parent to easily switch between child profiles and view which chores each child is responsible for.
2) Chore and screen time management are on separate screens.
3) Use the App Store categories to automatically group apps. Allow parents to move apps to different categories.
4) Change the organization from apps within each device to app categories by child with devices shown under that.
5) Set daily allowances by category, which can be used on any device.
6) Collapsible content style for consistency with other screens.
7) Set daily allowances by category (social media, games, etc.) rather than by device, so the time can be used on any device.
8) Streamline the device process to automatically add devices when a new device logs in to the app.
9) Streamline the device process by nesting it under each child.
10) Ability to assign a chore to multiple children at once since activities like "brush your teeth," or "do your homework" will be universal.
11) Ability to add recurrence for each chore so parents do not have to manually add the same chore over and over again.
12) A pre-set list of common chores with the ability to add custom chores.
13) Save custom and frequently used chores in a chore list to access later.
The overarching design goal moving from sketches to initial wireframes to final wireframes has been to ensure that the app’s complex processes are kept as simple, logical, and intuitive as possible. We reinforced a cohesive vision between the parent and child uses within the app. The wireframes helped us tweak certain visual design decisions.
Goal: Create an interactive prototype to showcase the first version of ChoreTime
Approach: mockups, prototyping (Invision)
We created a style guide and color scheme to carry throughout the app. We wanted the UI to be clean, but also feel "fun" with pops of color. I personally did all the UI and visual design on the parent interface. We iterated heavily and had to make more design tweaks and decisions throughout the entire mockup process.
Decisions made about the child interface during the mockup and prototyping processes include:
1) Added dynamic text for the day on the top navigation bar for today, previous and next.
2) Time bank changed to hours and minutes.
3) Added a counter to the left of the section headers for remaining chores and time.
4) Added a progress bar for each chore to communicate status. The progress bar includes 3 steps so children can follow along with
5) The wording and colors of the progress bar were refined for clarity and to remove the red color that is used elsewhere to signify “error.”
6) Simplified time usage per app category to the essential: time left.
7) Added positive-behavior call-to-action to encourage/remind the kids to do their chores to get their reward.
8) Simplified some language so as to not potentially confuse children.
Decisions made about the parent interface during the mockup and prototyping processes include:
1) Moved the selected child to the left of the screen to add space for the time bank.
2) Changed bank to hours and minutes for consistency.
3) Added edit time bank function on the home page for easy and quick access.
4) Added progress bar to each chore to reflect the progress bar on the child side.
5) Adjusted the button sizes to accommodate larger parent fingers.
6) Added modular scrolling time changes to the app category time changes.
7) Made the toggle switches match the toggle switches in the iOS (which is what we were basing the idea on) by changing the red “off” to grey.
View our prototype complete with several scenarios to play out created with Invision here