In this settings view project, I will add a few advantages that will help single parents out. There will be new settings such as: nutrition needed for the parent and their children, affordable recipes, supermarkets near the user and compare prices, schedule a meal plan, setting reminders, food allergies, and portion setting (the number of family members determines the quantity of each ingredient users need).
Design : A settings view
For : A recipe app
To help : Single parents
Softwares Used : Adobe XD, Adobe InDesign, Adobe Illustrator, Adobe Photoshop
Competitor research
The design starts with researching some of the other recipe apps. These apps include Mealime, Yummly, Tasty, and Recipe Keeper. After analyzing each app and listing its pros and cons. What they have in common is that they have a delivery service from sponsored markets, as well as a grocery checklist. However, none of them have a budget setting.
Empathy Maps
This process started with several interviews with my target audience. From those interviews, I explored some of their behaviors, thoughts, emotions, and pain points. Some parents cook every day, and there are some that order out four times a week. Some parents have an irregular work schedule, multiple shifts, or attending graduate school. After creating an empathy map for each interviewee, parents who are successful at time management and cooking healthy meals are planning days ahead. From here on, what could make a useful recipe app is by providing a meal prep schedule.
The phone or tablet can send the user notifications so that it's easy to set a schedule for them to follow.
User persona
Based on those interviews and each parent's pain points. I created several user personas and their user journey map. From here on, I can identify the daily nuisance single parents have to go through. Not being at home to make dinner for children, unpredictable schedule in graduate school, or eating out too much. Not providing a healthy meal for children could affect a child's lifestyle. Therefore, it will also affect his/her academic performance.
User sitemap
From here, the sitemap of a settings view should have a lot of options for parents. To make it easy for busy parents, There are only three main options. General, preferences, and notifications. Each will have interactive tools such as a toggle switch, slider, and checkboxes.
Notes
• Important pages to least important pages are from left to right.
• The last four options (Support, Contact us, Review us, About) will be divided from the rest, as it is not crucial for the users.
• The last four options (Support, Contact us, Review us, About) will be divided from the rest, as it is not crucial for the users.
Pain
Settings have to be clear and concise, but that also means minimizing options. It could potentially keep the users guessing.
Gain
Simple and straightforward means that the user won't feel alienated whenever they're on the settings page. Several toggle switches, so the user doesn't have to navigate another page to activate one thing.
Wireframes
In the first round of design, I want the settings to be familiar for users. With a toggle switch, slider bar, and checkboxes, everything should be easier to manage. Settings view is when users tend to avoid or want to get it over with as soon as possible.
Low fidelity
Some of the kitchen designs inspire the primary color for this app. According to my interviews, I asked my interviewees what color makes them feel calm. Most answers are the color green.
Changes
• Account page should come before settings. Thus, it is removed from the settings page.
• Language is added in 'General'.
• 'Sign out' and 'Delete account' are moved to the main settings page.
• The content under 'Quantity' had some minor changes.
• The button to complete setting up a new time has moved to the upper right corner.
• Account page should come before settings. Thus, it is removed from the settings page.
• Language is added in 'General'.
• 'Sign out' and 'Delete account' are moved to the main settings page.
• The content under 'Quantity' had some minor changes.
• The button to complete setting up a new time has moved to the upper right corner.
Notes
• Settings theme is generally straightforward. The color theme should be monochromatic.
• There are two buttons in the slider, giving users the freedom to choose the minimum and maximum.
• Display on top of the slide bar will show the exact numbers users choose.
• The orange boxes are the size of the mobile. It shows what the user initially sees.
• Settings theme is generally straightforward. The color theme should be monochromatic.
• There are two buttons in the slider, giving users the freedom to choose the minimum and maximum.
• Display on top of the slide bar will show the exact numbers users choose.
• The orange boxes are the size of the mobile. It shows what the user initially sees.
Design
The logo signifies a mother and a child depending on one another, using spoons to present meal prepping. It's named Seven Meals because this app can help you feed your children healthy meals and provide a better lifestyle for the parent and the children seven days a week.
High fidelity
After having an official design logo and palette, the app is more refined. From here, I expand the view into tablet and computer format. For the tablet version, adding an image behind would make it feel less dry. As for the computer format, every option would be on one page without scrolling.
Notes
• The accent color is only mostly for confirmation buttons.
• The website was originally going to be an all-green banner, but it seems dry. Therefore, I replaced the solid color with an image, making the website more immersive.
• In the tablet and the website, most of the options will stay on the same page. Bigger screens don't need as much transition as the mobile version.
• On the website's time setter, I decided to have a focused page. That way, the user won't get it confused with the rest of the page.
• My goal of those three sizes is to have the user feel familiar yet having a refreshing experience for each size.
• The website was originally going to be an all-green banner, but it seems dry. Therefore, I replaced the solid color with an image, making the website more immersive.
• In the tablet and the website, most of the options will stay on the same page. Bigger screens don't need as much transition as the mobile version.
• On the website's time setter, I decided to have a focused page. That way, the user won't get it confused with the rest of the page.
• My goal of those three sizes is to have the user feel familiar yet having a refreshing experience for each size.
Final composition design
Final changes
• The background on the tablet is now an image; that way, it doesn't seem as dry and dull in a settings view.
• The checkmark boxes in mobile and tablet are gone, indicating that the user can tap anywhere within the white box, instead of a small specific area within the box.
• The logos within settings are now the complementary color from the primary green on the reoccurring banner on top.
• On the computer's notification page, instead of a blurred background to bring out the time setting, it is a darker background that is more simplistic and helps the page pop out better.
• The checkmark boxes in mobile and tablet are gone, indicating that the user can tap anywhere within the white box, instead of a small specific area within the box.
• The logos within settings are now the complementary color from the primary green on the reoccurring banner on top.
• On the computer's notification page, instead of a blurred background to bring out the time setting, it is a darker background that is more simplistic and helps the page pop out better.
Prototype
The interaction design and the transition animation blend in seamlessly, giving users a clear indication.
You can interact with the prototype by clicking the buttons on the screen.
To view the prototype online, click here