DIY
DIY is a “do it yourself” style furniture building shop that offers tutorials on how to go about building custom furniture. DIY’s goal is to make building enjoyable and allows for the user to feel pride in something they have completed themselves.
The Problem
Current DIY websites have limited filtering options, inconsistent design style, overwhelming amounts of information.
User Research Summary
Research revealed that the audience for DIY furniture websites can be broad, as people of various backgrounds and interests can find value in crafting their own furniture. DIY allows users to express creativity, practice sustainability, and can provide the user with the sense of accomplishment. However, many visitors of DIY websites experience confusion with navigation, and with the overwhelming amount of information provided. This causes an experience that is supposed to be fun and relaxing to become frustrating. Resulting in the user just giving up on the idea all together.
Skill Level
Some users, especially beginners, may find many DIY furniture projects too complex or challenging.
Pain Points
Time
Users with limited time may be deterred by projects that are too time-consuming.
Insufficient Instructions
Incomplete or unclear project instructions can lead to frustration and unsuccessful projects.
Navigation
Information architecture is overly complex or poorly organized, resulting in users struggling to find what they're looking for.
Survey
I conducted a survey to get a better understanding of the users who would be accessing a DIY Furniture app.
Do you enjoy customizing and repurposing furniture pieces?
Biggest challenge faced when finding a DIY project?
If you’ve used a DIY furniture website what is your biggest frustration?
of survey takers answered yes to this question
said lack of experience or skills
had difficulty finding specific projects or ideas
60%
40%
60%
Persona
Problem statement:
Sarah is a busy creative professional who needs an easily accessible website with straight forward tutorials because she is a beginner in the DIY furniture world.
User Journey Map
Mapping Sarah’s user journey helped identify issues with navigation and other areas available for improvement
Starting the Design
Next, I created paper wireframes to help visualize how the user would navigate through the website. This helped me discover sticking points and gather a better understanding of how to resolve issues.
Yellow circles were used to mark features that would be used on future iterations
Digital Wireframes for Web
While I created my initial wireframes I kept feedback from user research in mind.
Low-Fi Prototype
The low fidelity prototype connects the primary user flow of selecting, filtering and adding a DIY project to the cart, so the prototype could be used in a usability study.
Usability Study Findings
Add Community Feature
Better Uploading System
Add a Filter Option
Majority of users wanted to be able to see what plants people nearby were finding, and they wanted to get updates on events.
Need to correct the flow of the upload a plant feature.
Allowing users to filter through plants that need more care than others
A few of the main issues discovered after conducting the usability study were related to the filter process, checkout, and account issues.
Web Mockups
High-Fi Prototype Web
The high fidelity prototype shows the main user flow of selecting or filtering through projects, adding project to cart, and proceeding through the checkout process.
Takeaways
The DIY furniture website can have a positive and transformative impact on people by fostering creativity, skills development, sustainability, and a sense of accomplishment.
One quote from peer feedback:
“I like how simple the project page is, it's easy to look through and choose the one I’d like to buy.”
What I learned:
What I learned while creating this website, is the importance of user testing in the design process, a lot of the feedback given has been applied to the design of the website. I also learned how important it is to repeatedly test a prototype yourself. To make sure what you have attempted to do is working properly.
Sitemap
My goal when creating the sitemap was to improve the overall flow of the website. The structure I chose separated everything into categories based upon the order of what the user would most likely follow.
Mock-Ups Screen Size Variations
I created various screen mockups to test the functionality of the website since users would most likely use smaller screen sizes when following tutorials.
Ipad digital wireframe
Mobile digital wireframe
Digital Wireframe Screen Size Variations
Having the ability to view tutorials from a smaller device is important for users.
Mobile digital wireframe
Ipad digital wireframe
Affinity Diagram
Refining the Design
After conducting the usability study I made the appropriate changes to the confirmation notification.
Before Usability Study
Notification assumed users already had an account and the process felt confusing.
Allowing the user to go directly to their purchased project plan was easily understood in the usability study.
After Usability Study
Before completing the usability study the user cart had limited selectable options, the cart needed to supply the user with options based on users preferences.
Before Usability Study
The cart had limited options for users and did not accommodate for returning users.
Providing the user the option to “log-in” or to “continue as guest” created fluidity within the checkout process.
After Usability Study
DIY is a “do it yourself” style furniture building shop that offers tutorials on how to go about building custom furniture. DIY’s goal is to make building enjoyable and allows for the user to feel pride in something they have completed themselves.
The Problem
Current DIY websites have limited filtering options, inconsistent design style, overwhelming amounts of information.
User Research Summary
Research revealed that the audience for DIY furniture websites can be broad, as people of various backgrounds and interests can find value in crafting their own furniture. DIY allows users to express creativity, practice sustainability, and can provide the user with the sense of accomplishment. However, many visitors of DIY websites experience confusion with navigation, and with the overwhelming amount of information provided. This causes an experience that is supposed to be fun and relaxing to become frustrating. Resulting in the user just giving up on the idea all together.
DIY
Pain Points
Skill Level
Time
Insufficient
Instructions
Navigation
Some users, especially beginners, may find many DIY furniture projects too complex or challenging.
Users with limited time may be deterred by projects that are too time-consuming.
Incomplete or unclear project instructions can lead to frustration and unsuccessful projects.
Information architecture is overly complex or poorly organized, resulting in users struggling to find what they're looking for.
Survey
I conducted a survey to get a better understanding of the users who would be accessing a DIY Furniture app.
Do you enjoy customizing and repurposing furniture pieces?
of survey takers answered yes to this question
60%
Biggest challenge faced when finding a DIY project?
said lack of experience or skills
40%
If you’ve used a DIY furniture website what is your biggest frustration?
had difficulty finding specific projects or ideas
60%
Survey revealed a few areas for improvement
Persona
Problem statement:
Sarah is a busy creative professional who needs an easily accessible website with straight forward tutorials because she is a beginner in the DIY furniture world.
User Journey Map
Mapping Sarah’s user journey helped identify issues with navigation and other areas available for improvement
Sitemap
My goal when creating the sitemap was to improve the overall flow of the website. The structure I chose separated everything into categories based upon the order of what the user would most likely follow.
Starting the Design
Next, I created paper wireframes to help visualize how the user would navigate through the website. This helped me discover sticking points and gather a better understanding of how to resolve issues.
Yellow circles were used to mark features that would be used on future iterations
Digital Wireframes
While I created my initial wireframes I kept feedback from user research in mind.
Digital Wireframe Screen Size Variations
Having the ability to view tutorials from a smaller device is important for users.
Mobile digital wireframe
Ipad digital wireframe
Low-Fi Prototype
The low fidelity prototype connects the primary user flow of selecting, filtering and adding a DIY project to the cart, so the prototype could be used in a usability study.
Usability Study Findings
A few of the main issues discovered after conducting the usability study were related to the filter process, checkout, and account issues.
Filter
Checkout
Account
Once users accessed the projects page they were not supplied with multiple filtered options to choose from.
Users were confused that they were already logged in as a user while completing the final checkout process.
Users didn't have the option to create an account or to continue as a guest.
Affinity Diagram
Refining the Design
After conducting the usability study I made the appropriate changes to the confirmation notification.
Before Usability Study
After Usability Study
Notification assumed users already had an account and the process felt confusing.
Allowing the user to go directly to their purchased project
plan was easily understood in the usability study.
Before completing the usability study the user cart had limited selectable options, the cart needed to supply the user with options based on users preferences.
Before Usability Study
After Usability Study
The cart had limited options for users and did not accommodate for returning users.
Providing the user the option to “log-in” or to “continue as
guest” created fluidity within the checkout process.
Mockups
Mock-Ups Screen Size Variations
I created various screen mockups to test the functionality of the website since users would most likely use smaller screen sizes when following tutorials.
Mobile digital wireframe
Ipad digital wireframe
High-Fi Prototype
The high fidelity prototype shows the main user flow of selecting or filtering through projects, adding project to cart, and proceeding through the checkout process.
Takeaways
The DIY furniture website can have a positive and transformative impact on people by fostering creativity, skills development, sustainability, and a sense of accomplishment.
One quote from peer feedback:
“I like how simple the project page is, it's easy to look through and choose the one I’d like to buy.”
What I learned:
What I learned while creating this website, is the importance of user testing in the design process, a lot of the feedback given has been applied to the design of the website. I also learned how important it is to repeatedly test a prototype yourself. To make sure what you have attempted to do is working properly.