instructables

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.

Role

UX Research
UI Designer
Project Manager

Tools Used

Figma
Adobe XD

Design Process

Discover

Content Audit
User Research

Define

Project Guidelines
Information Architecture
Low Fidelity Wireframes

Prototype

Mid Fidelity Mockup
User Task Flows
Usability Testing

Design

Style Guide
UI Design

Deliver

Hi Fidelity Mockup
Interactive Prototype

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 Store

2-star review of Instructables from Google Play Store

1-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 find so much joy in creating that sharing my work with others motivates me!

About

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.

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

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

I love my hobbies as they give me something to focus on outside of classes.

About

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.

De-stress through crafting
A place to showcase her many hobbies
Maintain an online presence

Subscription only content
Unclear interface
Companies disregarding her age group

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

Wireframes

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

Insights:

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

Insights:

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

Insights:

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.