3 Instructables mockups

Project Information

Team project to whose goal was to redesign an existing product used during the pandemic. According to Think Google keyword trend data there were 80% more searches for “diy” in 2020 vs 2019. This trend shows a shift of people acquiring new skills and being creative in their homes while being quarantined during the onset of the Covid-19 pandemic. Instructables is a well known brand and was used during this time, but the app has many faults in the user experience as noted by users. We redesigned the app with a more up to date interface and overall better user experience on mobile.

Problem Statement

People wanted to share their projects online as physical socializing had been halted. However, there are many platforms to choose from for sharing content and this created a problem with people having to switch between multiple apps and webpages to follow their favorite creators. Many DIYers use Instructables to post their content but the need to use the desktop version of the site instead of a dedicated app frustrates users. In addition, Instructables do not allow cross platform embedding of content, so users would have to open multiple apps to stay up to date with their favorite DIY creator’s posts and in doing so the DIY creator’s social branding suffers in building and maintaining an audience in the DIY community through one dedicated app.


  • UX Research
  • UI Designer
  • Project Manager

Tools Used

  • Figma icon
  • Adobe XD icon
    Adobe XD

Design Process

Outline of a head next to lightbulb growing leaves
  • Content Audit
  • User Research
Notebook with pencil
  • Project Guidelines
  • Information Architecture
  • Low Fidelity Wireframes
Desk with pencil, pen, and ruler
  • Mid Fidelity Mockup
  • User Task Flows
  • Usability Testing
Palette with paintbrush
  • Style Guide
  • UI Design
  • Hi Fidelity Mockup
  • Interactive Prototype


Outline of a head next to lightbulb growing leaves

Product Research

Current app content analysis

I conducted a content analysis to identify potential gaps and opportunities in the redesign. The analysis helped us make decisions about what to prioritize with the given content.

Understanding Existing Users

I started my user research by reading through the app store reviews to find out what issues users were facing. Most notable comments were users expressing their frustration on the app’s UI and it feeling like the desktop site instead of a more mobile app experience.

4-star review of Instructables from Google Play Store2-star review of Instructables from Google Play Store
2-star review of Instructables from Google Play Store1-star review of Instructables from Google Play Store
User Feedback:
  • Users face difficulty with the overall use of the app
  • Users want a better sign-in experience
  • UI is in need of an update
  • Frustrating to navigate
  • Some text and menu content is unreadable
Focus Areas:
  • Improving the UI by consistent styling across pages.
  • Incorporating more of the Instructables branding in the design through color choices, fonts, and icons.
  • Simplify navigation and rid of unnecessary menu options for efficient browsing of the app.
  • Adding social buttons to link external social media accounts and offer more profile personalization.
  • Provide a better onboarding experience for the user.


I then recruited some potential users and led a discussion on their thoughts on the app’s functionality, how they would use it in their lives, and what improvements they would like to see. To ensure the focus of the redesign met user’s needs, I compiled the feedback received in the discussion and the app reviews to create these personas.

Portrait and info of Jenna
I find so much joy in creating that sharing my work with others motivates me!

Jenna is a wife and mother of one, who spends time crafting with her kid as a hobby. She is very organized and tidy at work, but that does not translate to her home life. Because her child is at a young age, she finds herself getting disorganized and losing track of her progress in their crafts since they get distracted easily. She is very family oriented and love to keep her family and friends updated with what she and her child have crafted together.

Raising hands icon
  • Share her projects with friends and family
  • Maintaining an organized lifestyle when possible
  • To provide a way for her child to look back on what they have created together
Thumbs down icon
  • Doesn’t like clutter and finds a busy interface a reason to delete apps
  • Wants to keep track of her craft as she is making it
Portrait and info of Caroline
I love my hobbies as they give me something to focus on outside of classes.

Caroline is a student and outside of class she partakes in many hobbies. She would like a way to combine all her hobbies in a single app instead of an app that focuses on just one. She finds a lot of crafting apps cater to an older audience and would like one that also is for people her age. As a student she finds it important to save money and will not use products that require a subscription to use.

Raising hands icon
  • De-stress through crafting
  • A place to showcase her many hobbies
  • Maintain an online presence
Thumbs down icon
  • Subscription only content
  • Unclear interface
  • Companies disregarding her age group


Notebook with pencil

Most of the users will be coming from a mobile device. Developing this project with a mobile-first approach will improve issues that Instructables currently face.

Some guidelines would be:
  • Limiting the number of choices given to the user to reduce time it takes for the user to decide
  • Place and size elements with purpose to facilitate easy interactions with the interface
  • Apply Miller’s law to the interface keeping seven +2/-2 when chunking information

With social sharing being a common interaction of DIY users, adding this feature would elevate the user’s connection to the app and their followers.

Social media integration:
  • Social media sign-up/sign-in
  • Social media share buttons on posts
  • Social media icons that link external social accounts in user profile
  • Embedding videos from other social platforms into posts

The fastest way to gain the interest of users is the landing page. The landing page should display relevant information to the user such as name of app (Instructables), logo, brand styling, and sign-up/sign-in.

Information Architecture:
  • Keeping the hierarchical structures of navigation to nest relevant navigation categories
  • Navigation will be kept simple and rid of unnecessary menu options for efficient browsing of the app
  • Improving the UI by consistent styling across pages. This would help with a more fluid navigation of the app and an overall better user experience on a mobile device.
Information Architecture
Instructables information architecture
Instructables wireframes


Desk with pencil, pen, and ruler
Usability Study & User Task Flows

I recruited some users who fit within the persona to test the initial prototype. Before continuing the redesign and further fleshing out pages, I needed to validate the concept and if they understood how to navigate the app and their thoughts on the functionality. I tasked them with 3 different scenarios and used this feedback to create user flows of possible interactivity within the app and to identify any pain points in the initial design process.

Task 1: Create a new project and save it to be completed later
Task flow for creating new project

Users completed task and met expectations on the flow to achieve the task. I further questioned how would they like the confirmation that the project was saved to their drafts? Answers i received were: A modal / pop up confirming it was saved, being redirected to the drafts page with the project shown, a button change to a checkmark or text changed to “saved to drafts”.

Task 2: Find a project you recently completed and share it to another social account
Task flow for finding a project you recently completed and share it

While some users opened the menu & chose the favorites page, others expected it to be on their profile. Additionally, the users were confused if “Favorite” meant liked or completed, or both. I then further questioned if “Favorites” and “Projects Completed” were different categories for them and they said yes. They would want to “favorite” a post so they can remember it & save it to go back to when they are ready to do it, which separates it from projects they have completed. This made me consider if I had tasked them with Find projects you have published - would the outcome be the same?

Task 3: Find a project about sewing
Task flow for finding a project you recently completed and share it

There are 2 flows to complete this task and users completed it both ways. I asked users if they had considered a different way to complete their task. Most stated the search bar or the browse functionality met their expectations to complete the task and did not propose a way that would be easier or more intuitive than what was already presented to them. Some users commented that a way to navigate to just “Projects” and to find the Browse categories from there would have been helpful. One user commented that they thought the Browse menu item was the search page as the icon represented search to them. This did not frustrate them nor did it impede them completing their task.

Final User Feedback
  • Users did not see a need for the inbox as a menu item and would prefer it to be shown as a standalone icon or on the profile page.
  • In the favorites page - adding an option where they can categorize their favorite projects.
  • On the user profile - adding tabs with labels to show what projects the user has published & what projects the user has completed.
  • Changing Browse menu item to Projects and changing the icon.
  • Users did not see the need to display “User Since: year” on the slide out menu and stated that was something they’d expect to be shown on the user settings page. They do not actively seek that information and would prefer it hidden in some way.
Revised Information Architecture
Revised Information Architecture for Instructables
Menu Change
Slide out menu change 1 for InstructablesSlide out menu change 2 for Instructables
Profile Change
Profile change 1 for InstructablesProfile change 2 for Instructables

Design & Deliver

Palette with paintbrush
Instructables Pattern Library Page 1
Instructables Pattern Library Page 2
Instructables Pattern Library Page 3
Instructables Pattern Library Page 4
Instructables Pattern Library Page 5
Instructables mockups
Instructables mockups: Initial view, Log In, Create AccountInstructables mockups: Step-by-Step, Made By You, A Happy Place, Yours for the makingInstructables mockups: Profile screensInstructables mockups: Publish, DraftsInstructables mockups: New Instructable, Steps screensInstructables mockups: Projects, Browse Projects, SewingInstructables mockups: Displaying search functionalityInstructables mockups: Favorites, All FavoritesInstructables mockups: Account Published Tab, Account Made Tab, Account Social TabInstructables mockups: Screens showing instructions