YARN CALCULATION APP
KNIT PICKY
<a href="https://www.freepik.com/free-psd/phone-14-pro-mockup_31761199.htm#query=iphone%20mockup&position=5&from_view=search&track=sph">Image by qalebstudio</a> on Freepik
XD link: https://xd.adobe.com/view/64c2d1b5-1fd7-45ca-af24-8c29857bd457-3191/
ABOUT THIS PROJECT
This is a project that I worked on at BYUI in my Interaction Design class. Don’t get confused! I have another post resembling the same assignment because, I liked the class so much that I decided to take it again as an elective. So although I already created this project, I am going in a different direction this time therefore creating something entirely new.
The assignment was to come up with an app that makes some sort of calculation with numbers for any purpose. We were to be creative in this process in coming up with an idea for the app. It could range from calculating how many steps you took today, this week, this month and so forth, to calculating the average temperatures each week in July. The sky is the limit with this app. I was excited to see what I could come up with!
The assignment was to come up with an app that makes some sort of calculation with numbers for any purpose. We were to be creative in this process in coming up with an idea for the app. It could range from calculating how many steps you took today, this week, this month and so forth, to calculating the average temperatures each week in July. The sky is the limit with this app. I was excited to see what I could come up with!
BRAINSTORM
Image 1: This is my mind map. I came up with as many ideas as I could that had to do with the related topics. From these my favorite ones include: How much seed to purchase for the sq. footage of a lawn, How many pages left to read in a book to hit your goal, when your planet returns are, how much dessert to cater for a wedding, or balloons for a party, how much money to save each month in order to reach your savings goal by xx,xx,xxxx date.
Image 2: This is my word list. I wrote whatever came to my mind as fast as I could for 1 minute. As you can see it wasn't a good day for me. I must have been braindead! I can usually come up with a lot more ideas pretty quickly, but I do believe I got the correct idea for what I want to do for my app in this word list!
Drum Roll...... And the winner is.... How many feet of yarn to purchase for a crafting project. I chose this because I just took up the hobby of the art of crochet. My hopes is to be able to knit my own sweater! But I have heard crochet is easier to learn so I thought I would start there.
RESEARCH
After my research I really liked... that there was use of color in many of the apps, but the main visuals were images. In many of them. I like that. I think I will use images as the main visuals in my app with some pops of color.
PERSONAS
Jimmy:
Age: 21
Education: High school
Income: $17/hour
Location: San Fransisco
Motivation: Creativity, free-time, socializing.
Theresa:
Age: 68
Education: Masters
Income: Retired
Location: Cleveland, OH
Motivation: Family, Friends, Relief Society, Hobbies
Emily:
Age: 30
Education: Bachelors
Income: $70K
Location: Little Rock, AR
Motivation: Growing in many ways, career achievement, words of affirmation, creative expression, reducing waste.
SCENARIOS
Scenario 1- you are about to go on a shopping trip to buy the materials needed in order to make the Sandy sweater, use the app to find out what materials you need and how much yarn to buy.
Scenario 2- your friends birthday is 3 days after Christmas. You overheard her complaining about driving in the winter and holding a cold steering wheel. Use the app the find the shy mitten pattern, so you have make her a pair.
Scenario 3- you just found out your daughter is pregnant. Use the app to find the baby blanket pattern and make it.
SKETCHING
USABILITY TESTING
How it Went: User testing went well. They all have different outlooks on the app which is nice and all different from my own. I had 3 user testers test my app on paper.
User One: My brother worked in user testing for about 5 years so he had a lot of feedback! He suggesting adding a metric indicator on the measurements input so they know what the numbers will mean when entering them in. Will it be in. or cm.? I need to make sure there are indicators resembling that. He suggested using the second screen option for the pattern screen. It will have images showing what the patterns will look like. He mentioned it might be nice if there was some sort of indicator for each pattern stating whether that particular pattern used a lot of yarn, a medium amount of yarn, or the least amount of yarn. He also stated it would be nice to have a banner spanning the screen at the top stating how much yarn you are at so far. Make the home screen be the screen that has all the different crafts to choose from. The get crafting screen would be useful if the user is logged out and needs to log in. See how adding a body for your measurements page goes.
User Two: My second user tester doesn't have any experience with design but is more functionality minded. I gave him the app and had him test it out. He said it worked great for him and was able to do everything he needed quite easily. He didn't have much feedback for me.
User Three: My third user tester also went throughout the app and didn't have any difficulties navigating it. The app is very simple right now. But he did say it would be useful to have a screen where you enter the kind of yarn you are using because that can change the amount of yarn you would need to complete the project. I thought that was excellent feedback and will implement one of those screens into my final design.
NEW PLANS AFTER USER TESTING AND FEEDBACK
After receiving feedback from user-testers and my instructor and designing further, I decided to change the sole purpose of my app. Instead of having the sole purpose be for it to be a yarn calculator, I want it to be a place where someone can find a pattern to make the craft they would like. The calculator is a perk of the app.
I also thought it would be nice to instead of entering what type of yarn you are using, to have the app tell you what yarn is recommended for the project, then give a link to where you can purchase that yarn if needed.
I also thought it would be nice to instead of entering what type of yarn you are using, to have the app tell you what yarn is recommended for the project, then give a link to where you can purchase that yarn if needed.
WIREFRAMES
Process Walkthrough: Upon the first sign in the user sees the explanation of the app with an option to sign in or create an account. After they choose they sign in they will then be directed to the home page which is the screen with the craft projects to choose from. Then they will choose a pattern, and go to measurements. The app can scan the required body part for measurements or they can be entered manually if the craft is for someone else. After measurements are complete, the user will see the results for the supplies needed to create the project and the difficulty. - now I am thinking I need to have measurements be part of set up and just be saved to their profile so they don't have to re-take scans each project! And the difficulty should be seen before getting this far in the app! (On the pattern page.) Then the user can go on to the pattern and follow the instructions to create the project. After completion, they are prompted to take a picture and upload to social media tagging the app! The photo will also be saved to gallery.
WIREFRAME USER-TESTS
User One: I completed scenario #1. I thought the navigation was great. Following the guidance of the outlined task, it was very easy and straightforward in going where I needed to. Not having any pictures made it a little difficult in deciding what type of design I wanted to create, but I'm sure that will be available in the final draft.
On page 8, in order to move to the next stage, the button is labeled "Results". I think having it say "Next" or "Continue" would be a more appropriate label, but that's just nitpicking 😉.
User Two: The measurements are all froze. I can't get them to change to a different size. Then when I'm on that page it also doesn't give me an option to move to the next page.
User Three: I decided to make a blanket. (scenario 3) Everything about the app was straight forward. After clicking on “blanket” I chose “pea in a pod”. The next screen was to choose the size of the blanket but it wouldn’t allow you to change the settings, so, I just went with the settings it gave. I liked the convenience of the app telling me the amounts of the different colors of yarn needed for the project as well as the type of yarn to be used. It also included a list of tools needed for the project which was useful.
COLOR SCHEME
TYPOGRAPHY
WIREFRAMES WITH COLOR
How I Feel About Where I Am at Now: I am WAY behind at this point. These are the only screens designed with color. I am hoping that I can get all apps to have color in the next few days but that is probably wishful thinking. But in the meantime, here is a taste!
REFINEMENTS
FINAL REFINEMENTS AFTER USER TESTING
Why The Change: I wanted to make the pages as user friendly as possible, so I decided to take out extra information that didn't need to be there to eliminate confusion. I also tried to make the screens have all the information needed on one frame instead of having to scroll down to hit the next button.
BADA BING BADA BOOM!
It Feels Good: I am proud of the way my app turned out. I guess in the end I made my app a lot more complicated than required of me. And that was even after trying to eliminate as many screens as possible so this was quite the task to complete! But I am happy with it and had so much fun designing this app!
XD link: https://xd.adobe.com/view/64c2d1b5-1fd7-45ca-af24-8c29857bd457-3191/
Attributions:
<a href=“https://www.flaticon.com/free-icons/pattern” title=“pattern icons”>Pattern icons created by Daniel ceha - Flaticon</a><a href=“https://www.flaticon.com/free-icons/art” title=“art icons”>Art icons created by Kiranshastry - Flaticon</a><a href=“https://www.flaticon.com/free-icons/scan” title=“scan icons”>Scan icons created by Those Icons - Flaticon</a><a href=“https://www.flaticon.com/free-icons/measure” title=“measure icons”>Measure icons created by Smashicons - Flaticon</a><a href=“https://www.flaticon.com/free-icons/sweater” title=“sweater icons”>Sweater icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/camera” title=“camera icons”>Camera icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/facebook” title=“Facebook icons”>Facebook icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/instagram-logo” title=“instagram logo icons”>Instagram logo icons created by Laisa Islam Ani - Flaticon</a><a href=“https://www.flaticon.com/free-icons/snapchat-logo” title=“snapchat logo icons”>Snapchat logo icons created by Hight Quality Icons - Flaticon</a><a href=“https://www.flaticon.com/free-icons/twitter” title=“twitter icons”>Twitter icons created by Ruslan Babkin - Flaticon</a><a href=“https://www.flaticon.com/free-icons/picture” title=“picture icons”>Picture icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/upload” title=“upload icons”>Upload icons created by Ilham Fitrotul Hayat - Flaticon</a><a href=“https://www.flaticon.com/free-icons/hand” title=“hand icons”>Hand icons created by Vitaly Gorbachev - Flaticon</a><a href=“https://www.flaticon.com/free-icons/mittens” title=“mittens icons”>Mittens icons created by SBTS2018 - Flaticon</a><a href=“https://www.flaticon.com/free-icons/hat” title=“hat icons”>Hat icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/scarf” title=“scarf icons”>Scarf icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/socks” title=“socks icons”>Socks icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/edit” title=“edit icons”>Edit icons created by alkhalifi design - Flaticon</a><a href=“https://www.flaticon.com/free-icons/crochet” title=“crochet icons”>Crochet icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/scissors” title=“scissors icons”>Scissors icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/sewing” title=“sewing icons”>Sewing icons created by Freepik - Flaticon</a><a href=“https://www.flaticon.com/free-icons/sheep” title=“sheep icons”>Sheep icons created by Freepik - Flaticon</a>
