HandyMade
HandyMade is a website offering Do It Yourself tutorials for any enthusiasts who would like to build small, simple tools for their daily use, or wants to repair small appliances by themselves without seeking help from a professionals, or cooking enthusiasts wants to hone their culinary skills or those young couples wants to inculcate craft making skills for their young children, in an essence it is for every one or any one who wants to do by themselves based on their needs.
Project overview
understanding the user
User research
Personas
Problem statements
User journey maps
User research summary:
I conducted interviews and created empathy maps to understand the users I'm designing for and their needs. A primary user group identified through research was working adults who wants to home their skills or repair small appliances by themselves or spend their time with kids and improving creative skills in craft making.
The users confirmed various challenges and obligations which might hamper they doing some of the above mentioned by themselves because of lack of well organised and categorised online materials to refer to or learn or teach.
User research: pain points:
Search
The website needs to have robust search functionality so that users can easily search the tutorials
Order Food
If they can categorize the tutorials, it would become easy to use
WiFi Connectivity
DIY tutorials various exotic dishes are not available
Secure Online Payment
If they have a variety of craft making tutorials, which are engaging for the kids, moms can spend more time in improving their children's’ skills
Personas
Persona: Sameer
Problem statement:
Sameer is a busy banking professional who seeking good tutorials for recipes for exotic dishes.
Persona: Amalia
Problem statement:
Amalia is a sales executive and wants to teach crafts for her daughter and is looking for a good online DIY tutorial site.
User journey map:
Mapping Sameer and Amalia's’ user journey revealed how useful it might be to have a dedicated Website to the users to utilize HandyMade Website.
the design
Paper wireframes
Digital wireframes
Low-fidelity wireframes
Usability studies
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain-points
Digital wireframes
As the initial design phase continued, I made sure to base screen designer on the feedback and findings from the user research
From the usability study, users pointed out that they are confused between the home page and category main pages as the layout seems exactly the same.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of booking a table and ordering snacks and beverages from the CoffeeHouse, so that the prototype can be used in a usability study.
Usability Studies
I conducted two rounds of usability studies. Findings from first study helped guide the designs from wireframes to mock-ups. The second study used a high-fidelity prototype and revealed what aspects of the mock-ups needed refining.
Round- 1
Round- 2
Users want search bar in every page
Users want better Categorization
Users want better navigation flow
Users want better menu for mobile breakpoints
Users want Featured tutorial not required for Category home pages
Users want Most viewed and most recent tutorials down in Category home pages
refining the design
Paper wireframes
Digital wireframes
Low-fidelity wireframes
Usability studies
Mockups
Early designs have the option of Search as a button, which took the users to Search page, where users have to key in the search items. After usability study, based on the inputs, I have added search in every page.
For Category home pages users wanted to remove Featured Article, as it is already represented in the home page. Also the Recent Article as well as most Viewed sections are particular to that category.
Key mockups
High-fidelity prototype
The high-fidelity prototype presented cleaner user flow for searching and navigating to the intended DIY tutorial.
Accessibility considerations
Menu items as big icons, provided alt text for images
Provided navigational elements with icons so that it becomes easier for navigation for differently abled users
Detailed imagery has been used for easy understanding about the menus
going forward
Takeaways
Next Steps
Takeaways
Impact:
Users feel that HandyMade website is good way to check the DIY tutorials
One user feedback
I am able to find some exotic recipes which I definitely will try
What I learned:
While conceptualising the initial ideas are just a beginning in the entire process. The usability study and reviews will provide what is important to users and it greatly influences the iterations of the app design.
Next steps
Take more feedback on the existing designs and see if there are any gaps so that we can have another round of iterations
Continue conducting user research for new areas/options to be included in the app
Continue working on the responsive designs as well as introduce new dark mode