Handmade Master
An Education and Social Website
Final Thesis Book | Xiaozhu Yu | 03754986 Final Review Presentation 17/05/16 Web Design and New Media | Academy of Art University
Table of Contents 1 Project Overview
4 STRATEGIC PROCESS
7 TECHNICAL PROCESS
Autobiography
03
Competitive Analysis
26
Data Diagram
58
Résumé
08
Competitive Analysis Matrix
31
Technology Used
59
Statement of Interest
09
Elevator of Pitch
09
5 UX PROCESS
Thesis Description
10
Persona
33
Future Plan
61
UX Testing 1
36
Conclusion
62
UX Testing 2
37
2 PROOF OF CONCEPT
8 CONCLUSION
Concept Video
11
UX Testing 3
39
Prototype
11
UX Testing 4
40
Information Architecture
12
UX Testing 5
41
Task 1
14
Visions Competition
43
Task 2
17
Task 3
19
3 MARKET REASERCH
6 UI PROCESS Moodboard
49
Visual Inspiration
50
Market Analysis
22
Logo/Identity
51
Target Users Analysis
23
Logo Text
53
Main Materials Research
24
Header Image
54
Toolbox
55
Icons
56
OVERVIEW
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
ABOUT ME
AUTOBIOGRAPHY Hello! I'm Juju Yu. I born and raised in China. I came to the San Francisco after I got my graphic design bachelor degree in Chengdu University of Technology. Currently, I’m an AAU Web Design & New Media student. I’m interested in UI design, and I want my work to be creative, simple and easy to use. I love all kind of UI design as well as problem solving. And as the technology grows I am trying to use my skills to pursue a career in web design field.
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
Julo Restaurant
UI Design, Photoshop, infographic Julo restaurant is a fictitious restaurant, and I've designed their website in Typography class. I did interface design with Adobe Photoshop, and Illustration.
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
I Notice https://vimeo.com/133743219
Motion Graphic, UI Design, Illustrator I notice was a poem wrote by a student from 826 Valencia, a nonprofit organization dedicated to help children and young adult develop writing skills. As a group we were assigned to create a motion graphic that tells a story of a girl with a connection between made and missed. The story was gloomy and sad and we decided to use a paper cut look throughout the animation.
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
Digital Magazine Cover https://vimeo.com/135227489
Motion Graphic, UI Design, Illustrator I designed a motion graphic for Lonely Plant digital magazine, and It's about San Francisco. I want to show there are some abrupt slope in San Francisco, which is much different with others city. Thus, I drew a street with eight sharp turns, and make it looks like Lombard Street. I designed it with Adobe illustrater and After Effect.
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
Resume
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
Statement of Interest
Similar with design, crafting is another thing I’d like to do. I started to make crafts when I was in a young age, and I did quite a lot of DIY projects. In my 10 years of crafting experience, I have been dealing with a lot of different challenges.
“ Handmade Master is an education and social website. It can help people share their crafts, and learn from others.
”
OVERVIEW
FINAL THESIS PROJECTS | HANDMADE MASTER
Thesis Description
I created a survey “what are the challenges you have when you make crafts” and I got 59 responses. Based on the data, I found out that the majority of the people’s problem is that they do not have any ideas and some of them don’t want to spend extra money on buying the materials. I want to solve these problem, so I created a website, Handmade Master.
With Handmade Master, people can explore projects with what they have, find inspiration from brilliant tutorials and share their projects with friends.
PROOF OF CONCEPT
PROOF OF CONCEPT
Prototype: handmademasters.com
Concept Video https://vimeo.com/166923860
FINAL THESIS PROJECTS | HANDMADE MASTER
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Information Architecture HOMEPAGE
HOME
PROJECTS
MOST POPULAR PROJECTS
MOST POPULAR CRAFTERS
CRAFTERS PROFILE
MATERIALS FILTER
ALL RUBBER
PAPER METAL
CREATE
PROJECTS
LOG IN
PROFILE
PLASTIC MY PROJECTS
TEXTILES
MY LIKES WOOD
GLASS
OTHER MY CATEGORIES MY TAGS PROJECT
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 1 Explore bottle project and learn it Explore bottle project by materials filter of projects page. Take a look of the project step by step, and collet it to like board.
01. Homepage
02. Projects Page
03. Drag Materials
Start from homepage and click on EXPLORE WHAT YOU CAN GET button
Go into projects page, and see there are some default projects. Read the instruction: DRAG THE
Drag the glass to the tool box
MATERIALS YOU HAVE TO THE TOOLBOX, THEN EXPLORE WHAT YOU CAN GET
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 1 Explore bottle project and learn it Explore bottle project by materials filter of projects page. Take a look of the project step by step, and collet it to like board.
04. Pick One Project
05. View Tumbler Project Page
06. Click Like Button
After drag, click on EXPLORE button, glass projects appear! find the one about tumbler, and click to go into the project page.
View project difficulty level, estimated completion time, description, materials and tools, and each steps.
Click LIKE Button to collect the project to your like board
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 1 Explore bottle project and learn it Explore bottle project by materials filter of projects page. Take a look of the project step by step, and collet it to like board.
07. Log In
08. Check Like Board
Then, you will jump to Log in page, log into your account
Now the Tumbler project shows on your like board
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 2 Create your own project and post it Create and post your own project by answering few basic information of crate page.
01. Homepage
02. Create Page
03. Fill Out Info
Start from homepage and click on CREATE button
Go into create page, and see there are some questions about your project.
Filling out these basic information.
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 2 Create your own project and post it Create and post your own project by answering few basic information of crate page.
04. Post It
05. Log In
06.Project has posted
After Filling out information, click on POST button
Then, it will jump to Log in page, log into your account.
Now your project has posted, and you can check it in your profile page
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 3 Find some Inspiration on Handmade Master Find some Inspiration with our recommend projects and crafters.
01. Homepage
02-1. View Most Popular Projects
02-2. View More Projects
Start from homepage and scroll down
View Most Popular Projects to find some inspiration. If you want to see more, click on SEE MORE button.
Then it will jump to project page, and you can view more projects.
PROOF OF CONCEPT
FINAL THESIS PROJECTS | HANDMADE MASTER
Proof of Concept TASK 3 Find some Inspiration on Handmade Master Find some Inspiration with our recommend projects and crafters.
03. View Most Popular Crafters
04. View Her Profile Page
View Most Popular Crafters, pick and click on one crafters profile image.
View the crafter profile page, check her projects to find inspiration. If you like her, you can follow her.
MARKET RESEARCH
MARKET RESEARCH
FINAL THESIS PROJECTS | HANDMADE MASTER
The Number of Crafters is 62.5 Million in U.S, 2013
23.0 mil
Paper Craft
21.0 mil
Painting
18.8 mil
Food
15.8 mil
Jewelry
17.4 mil
Crocheting
18.7 mil
Sewing
The most popular activities are some of the easiest projects crafters can attempt. Especially considering how easy online resources have made photo scrapbooking and card making, it takes little effort for crafters to complete these projects. Painting and drawing are naturally as simple as having paper and drawing tools. Source: Craft & Hobby Association/ Mintel
Base: 770 internet users aged 18+ who made crafts in the 2013
MARKET RESEARCH
FINAL THESIS PROJECTS | HANDMADE MASTER
Internet users aged 18+ who made crafts, 2013
51% 62%
28% 40%
15% 37%
My Target Users Are
18-34 Years Old Woman who have problems with crafting, and they would like to find out the solution by using internet.
18-34 years old
35-55 years old
55+ years old
Young people are twice as likely as the average to have made popular crafts such as photo albums, paintings or draw- ings, and jewelry. Making crafts can attract alterative audiences besides the dominance audience of young women in the market. For example, crafts positioned as gifts can be marketed toward parents while new homeowners and young men may look toward crafts to learn something new. Source: Craft & Hobby Association/ Mintel
Base: 770 internet users aged 18+ who made crafts in the 2013
MARKET RESEARCH
FINAL THESIS PROJECTS | HANDMADE MASTER
Main Crafting Materials, 2016
Paper
Plastic
Metal
Textiles
Wood
Further more, through out the research I found out the main crafting materials. Base: 50 internet users aged 18+ who made crafts in the 2013
Glass
Rubber
STRATEGIC PROCESS
STRATEGIC PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Crafsy
Etsy
Youtube
STRATEGIC PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
STRATEGIC PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
STRATEGIC PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
STRATEGIC PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
STRATEGIC PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
COMPETITIE MATRIX CRAFTSY
EXPLORE BY MATERIAL
MODERN UI DESIGN
CLEAR CATEGORY
EDUCATION
DETAILS PROJECT
RECOMMEND SECTION
UPLOAD PROJECT
ETSY
YOUTUBE
HANDMADE MASTER
UX PROCESS
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Homepage
Most Popular Projects
View More
All Project Page
Persona 1 NAME: Jasmine GENDER: Female AGE: 27 LOCATION: Lives in San Francisco OCCUPATION: Elementary School Teacher
“ It’s not just making stuff. It’s making happy ” Background She loves the nature and she likes to play a lot of sports. Because of Jasmine’s occupation, she needs to look for a lot of different projects and tutorials to get inspirations.
Most Popular Crafters
Needs View Profile
Find Inspiration
Because of Jasmine’s occupation, she needs to look for a lot of different projects and tutorials to get inspirations.
Goals Finding inspiration.
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Persona 2 Homepage
Create
Fill Out Info
NAME: Misty GENDER: Female AGE: 23 LOCATION: Lives in San Jose OCCUPATION: Freelancer Graphic Designer
“ I am happily passes along handmade hacks to makers everywhere. ” Background
Post
Misty is a full-time freelancer graphic designer live alone in San Jose. The big hobby in her life is making crafts, and it allowed her really enjoy her life. She love to do crafting, and she want to share her bottle crafting to others.
Login
Needs A user-friendly website for post her projects. Check Post
Goals Sharing her crafting projects.
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Homepage
Explore
Drag Materials
Pick One Tutorial
View Tutorial Details
Click Like Button
Persona 3 NAME: Irene GENDER: Female AGE: 31 LOCATION: Lives in Los Angeles OCCUPATION: Fashion Designer
“ If there's a project at hand, I'll try to figure out how to make it. ” Background Irene is fashion designer lives in Los Angeles. She has been creating and executing DIY projects since her very first trip to Michael's as a child. If there's a project at hand, she'll figure out how to make it. She also like to learn more crafting skills from other crafters.
Needs Learning more crafting skills from other crafters.
Login
Goals Be a professional crafter and fashion designer. Check Like Board
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
User Testing, 2015 card sorting, paper prototype and coded prototype
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
User Testing, 2016 Test Dates: Dec 2015 - Jan 2016 To get a better understanding of the audiences’s opinions, I created the google survey and three different chats.
GOOGLE SURVEY 60 people
TEXTING CHAT 18 people
VIDEO CHAT 5 people
FACE TO FACE CHAT 25 people
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
User Testing, 2016 Test Dates: Jan 2016 - Feb 2016 | Type of Test: Prototype (Wireframes) | Number of Participants: 25
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
User Testing, 2016 Test Dates: March 2016 - May 2016 Type of Test: Hight - Fidelity Invision - A, Hight - Fidelity Invision - B, Hight - Fidelity Invision - c Number of Participants: 30 For testing out the prototypes, I have been visited a lot of crafting stores in SF. Based on the feedback, I have re-edit all the pages and make it more simple and clear to use. I had combined and removed some of the filter's function and recreate the explore page.
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
User Testing, 2016 Test Dates: May 2016 - June 2016 Type of Test: Final Testing, website: handmademasters.com Number of Participants: 20 For projects and explore page, I give site users two coded prototype, then ask them Which one is more clear to use, and more make sense to you. Based on my findings, I combine projects page and explore page to one page. and I keeping the icons visible after users select the item, drag and drop it into the box. For create page, it allow site visitors to create their projects before logging in now.
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
User Testing, 2016 Test Dates: May 2016 - June 2016 Type of Test: Final Testing, website: handmademasters.com Number of Participants: 20 For project and create page, I give site users a project, then ask them how long they think it will take for them to complete a project. Their answer are so different, some of their estimation is close to reality, but some of them not. Second time, I ask them again, what can I do to help you better estimate the difficulty of the project. Based on my findings, I added the difficulty level and estimate time of each project.
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Homepage
1st Version
2nd Version
Final Version
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Projects Page
1st Version
2nd Version
Final Version
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Profile Page
1st Version
2nd Version
Final Version
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Project Page
1st Version
2nd Version
Final Version
UX PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Upload Page
1st Version
2nd Version
Final Version
UI PROCESS
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Moodboard
Header Font: Raleway ABCDEFGHIJKLMN OPQRSTUVWXYZ 1234567890 abcdefghijklmn opqrstuvwxyz 1234567890
Body Font: ROBOTO ABCDEFGHIJKLMN OPQRSTUVWXYZ 1234567890 abcdefghijklmn opqrstuvwxyz 1234567890
＃e6ae03
＃777777
＃ffffff
＃333333
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Inspiration
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Logo Design Process
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Final Logo Design
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Logo Text Design
Ist
2nd
3rd
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Homepage Design Ist
2nd
3rd
4th
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Toolbox Design
Ist
2nd
3rd
UI PROCESS
FINAL THESIS PROJECTS | HANDMADE MASTER
Materials Icons Design
Ist
2nd
Technical Development
TECHNICAL DEVELOPMENT
FINAL THESIS PROJECTS | HANDMADE MASTER
VISUAL DEVELOPMENT Adobe Photoshop Adobe illustrator
LOCAL STORAGE
HIML5 / CSS3
to store all the users database
create the responsive web pages
JAVASCRIPT BOOTSTRAP add Interactions to the website
make my website responsive
TECHNICAL DEVELOPMENT
FINAL THESIS PROJECTS | HANDMADE MASTER
Drag and Drop
Conclusion
CONCLUSION
FINAL THESIS PROJECTS | HANDMADE MASTER
Future Plan In the future, I will come up with holiday events and create specific tutorials. I will create more videos to teach the audience and make it easier to use. I will sell the materials to users and develop profit system, my website will provides materials along with the tutorials. My goal is to have more people get involved with crafting.
CONCLUSION
FINAL THESIS PROJECTS | HANDMADE MASTER
Conclusion Crafting is a journey. It takes courage to embrace the beautiful imperfection of handmade. The satisfaction people will get from crafting are cannot be measured. Crafting are not just a type of hobbies, it is a type of faith. We pursue happiness and sense of achievement by doing crafting. I hope my website can give people some new inspirations on crafting and make them feel that nothing is impossible. Even a little opus can make a huge different in our life.
Thank You