Hands On — iOS

Case Study

Designing a knowledge-sharing content creation platform for aspiring and experienced do-it-yourselfers, with an emphasis on inclusivity and accessibility.

Tools

Sketch App, Figma, InVision, Marvel, Webflow, Illustrator

Duration

10 weeks

Key Skills

Ideation, interviews, user stories, sketching, information architecture, userflows, wireframing, visual design, prototyping, UX research

Try the interactive prototype
A header of 2 screen mockups with the Hands On logo beside them.

Motivation

It’s difficult to be confident in your own handiwork without experience, guidance, or mentorship. Hands On explores the ways in which tasks like these could be taught clearly so that anyone can be handy.

While teaching sculpture to undergraduate students at NYU, I embraced a hands-on pedagogical approach to teaching building principles and shop etiquette. I believe that with basic fundamentals training and practicable experience, students can confidently and capably conduct themselves in the handiwork arena; if you can use a hot-glue gun, you can use a MIG welder.

If you can use a hot-glue gun, you can use a MIG welder.

Problem

Do-it-yourself projects and handiwork can be complicated, frustrating, and unfamiliar. There are very few opportunities for aspiring do-it-yourselfers to gain reliable knowledge about handiwork practices. Existing handiwork platforms are inequitable and only offer transactional contracting services within a larger gig economy.

Brief

Hands On is a content creation platform that provides users with the opportunity to learn and share knowledge about handiwork and repair practices. Operating in an accessible, independent and convenient digital space, Hands On is dedicated to providing users with reliable service to grow their skills in handiwork.

Target

Hands On was designed for motivated do-it-yourselfers from a wide range of experiential backgrounds that share the willingness to learn new skills. The platform was designed with the understanding that anyone is capable of learning handiwork skills.

Solution Overview

The creator economy

Most existing handiwork platforms rely on a for-hire contracting model. In theory, the gig economy purports to democratize the labor market by giving workers greater flexibility and freedom, but the reality is that for most, working in the gig economy means low pay, insecure work, and no employment rights worth speaking of.

Hands On envisions a more equitable, popular, and favorable system in the digital creator economy. According to a September 2021 study from The Influencer Marketing Factory, about 50 million people around the world participate in the digital creator economy - that’s around a third of the size of the entire U.S. workforce. And, in 2021, the digital content creator market was valued north of $100 Billion USD.*

Inclusive Design

During research, it was determined that all respondents identifying as female, or non-binary admitted to experiences of sexism, exclusionary, and/or discriminatory practices related to handiwork. To challenge this, a decision was made to rethink the original architecture of the platform, which drew a distinction between content creators and learning users.

By eliminating the concept of mentor vs. mentee, the platform instead facilitates the growth of all users simultaneously. Without a structural hierarchy, users will be able to share more democratically, and without the burden of institutional superiority. 

Research

Methodology

A quantitive research analysis was conducted to determine the demographics of potential content contributors (i.e.: 'handy-people') that are already using streaming platforms like YouTube to share their projects, how-to videos, and building experiences.

Secondary research was conducted on other handiwork-related platforms producing a heuristic analysis of three major competitors: Handy, TaskRabbit, and Thumbtack. I used three usability heuristics to compare and contrast each platform: aesthetic, consistency and standards, and need recognition.

Evaluative research was conducted over a period of three weeks analyzing the content of Craigslist ads pertaining to handiwork and cataloging them using the following metrics: difficulty or specialization of task, turnaround time, category of task, tools required, and cost/compensatory rate.

Using this data, I was able to better understand the interest and willingness of learners and content contributors, as well as the general demand for handiwork services in New York City, before conducting a larger survey with approximately 30 participants.

The primary characteristics of my study's participants are as follows: 1. Has used handiwork service in the past year, 2. Is interested in learning new skills, 3. Often distrusts handiwork professionals and services, 4. Has been treated poorly by handiwork professionals, and 5. Expressed dissatisfaction with services rendered by handiwork professionals.

Interviews

Five interviews were conducted with participants who had participated in the previous survey. Participants were from diverse backgrounds and had varying degrees of experience in handiwork. These interviews were synthesized into an affinity map, three user personas, and two distinct red routes.

User Personas

User Personas

Danica is an experienced professional with her own company. She sees opportunities to earn additional income through teaching and mentorship. By building a following, Danica can impart her knowledge of electrical work to others. She can also use the platform as a valuable networking tool to find and engage with other professionals in her field.

Lilliana is newer to handiwork but is eager to learn. They want to build their confidence by learning the fundamentals. By following other users on the platform, Lilliana can build a network of similarly skilled users. They can also study courses in order to build up their knowledge in particular fields.

Tim is a crew-lead at a carpentry shop. He is always looking to learn new skills, and he wants to become a better leader. As he learns new skills, he can also share his wealth of knowledge in carpentry with the Hands On community, gaining confidence and teaching experience via online mentorship and content creation.

Information Architecture

User Flows

Using the data gathered during interviews, I created user flows for content creation and discovery. These high-level structures highlight critical user flows of the platform and break down processes the user would use to achieve these specific tasks.

Design

Wire flows

Guerrilla Usability Testing
Once the Hands On red routes were determined and sketched out on paper, I created an interactive prototype using Marvel POP and conducted Guerrilla Usability Tests. While conducting these guerrilla usability tests, an important issue was raised regarding compatibility between Android and iOS devices. This is an important consideration, specifically with regard to accessibility.

Wireframes

Creating detailed wireframes helped make navigation and prototyping seamless and straightforward. Each main user flow is represented and an onboarding process for app integration began to be developed.

A screenshot of the first half of wireframes
The second half of all wireframes

Interface Design

Accessible Design

The user interface for Hands On was guided by accessibility, inclusivity, and form fluidity. Considering accessibility, strict adherence to the ADA standards for visual impairment and contrast requirements was observed.

A chart advertising the observation of accessibility guidelines for contrast, size, and color blindness

Style guide

The accessibility and fluidity of Hands On is further articulated in the philosophy behind the design of the style guide. Featuring bold, flat, and highly visible component design, I was motivated to reject the all-too-common macho-masculinized iconographies that tend to pervade handiwork platforms and spaces. My intention was to craft something different for the genre, rather than rely on minimalism, tough hands, and stock imagery of men in hardhats.

Prototyping

First Screens

Before developing a functioning prototype, I designed two high-fidelity drafts of potential screens that would be included. These screens were then prototyped to function with moderate usability in InVision.

Two screenshots of the initial prototype

Prototype I

Expanding upon the high-fidelity wire flows, I created a fully interactive mobile prototype of this iteration on InVision. Tap here or tap the image below to try the prototype.

A screenshot and link to an interactive prototype

Usability Testing

Usability testing

Five moderated usability tests were conducted to generate impressions of the Hands On mobile platform using an interactive prototype of the platform’s red routes. The priority of this moderated usability test was to evaluate the red routes of the Hands On platform through a series of tasks using an InVision prototype. The tasks were to create an instructional content post, browse for content, and to create video content. The most important component of this testing phase was to uncover usability problems related to the specific objective of creating content on the platform.

These moderated usability tests revealed issues with the clarity of the content creation feature and concerns about how users might qualify the credibility of content creators on the platform. To address the clarity of the content creation feature, I redesigned the create content overlay page to include a call to action for each type of media. To address the latter concern about qualifying content creators, I made the decision to redesign the profile sections of users to include courses that these users have taken.

Usability re-testing

The usability retest was conducted with five participants, all of which conducted the usability retest remotely via zoom. The participants were former survey participants Sam, and Danica, usability testing participant Elena, and two unique participants Susan, and Ben. The priority of this moderated usability retest was to evaluate the modifications made from the earlier prototype and to analyze the findings using a control subject and four new usability testing participants.

First, I conducted a control test with the former usability testing participant, Elena, using the same three tasks that I had used before: create a video, browse for content, and create an instructional post. Following my control test, I moved on to the new participants, testing them with a different set of tasks that I designed specifically for the retest. These tasks were to create a post, create a video, and visit another user’s profile.

My findings concluded that users still had some confusion about the exact purpose or extent of the courses section, but ultimately there was a positive response to viewing the credibility of content creators via their profile using the section using the courses section for reference. Overall, the courses section is not of critical importance to the MVP.

Re-design

Priorities

In this iterative re-design, I paid particular attention to simplifying the overall design as well as the user interface. I eliminated the majority of the outlined icons that were being used for various categories, added a call-to-action for each decision on the create-content page, added a tag to content that describes the media category, and I added a courses section to the profile page.

Hi-fi wire flows

I created two additional high-fidelity wire flows to reflect any changes made since the first iteration.

Creating Content
User taps the + icon on the navigation bar prompting the user to select the media category to create: Video Tutorial, Instructional, Post, or Buyer's Guide. The user selects the category and follows the instructions for each path to post their created content.

Prototype II

Expanding upon the high-fidelity wire flows, I created a fully interactive mobile prototype of this expanded iteration using Marvel. Tap here or tap the image below to try the prototype.

A screenshot of a prototype. Tapping the image redirects you to the prototype.

Reflections

Learnings

Each iteration of the Hands On platform presented a unique set of design challenges, but given the opportunity to pursue this project further, I would ensure that Hands On is cross-platform compatible.

Although not necessarily part of the MVP, cross-compatibility does feature into the vision of the platform's inclusivity and accessibility. I drew this conclusion while I was conducting guerrilla usability using the first iteration of sketches that were created. By not focusing equally on iOS and Material Design principles during design, the Hands On platform remains inaccessible, particularly to vulnerable communities.

According to a study conducted by the New York City Consumer and Worker Protection Agency, “301,700 NYC households (9.4 percent) are unbanked, with the Bronx having higher unbanked rates (2x greater) than the rest of the city”. NYC’s unbanked households are highly concentrated in financially vulnerable neighborhoods, and residents of these neighborhoods are in poverty at higher rates; have higher rates of unemployment; are predominantly Black and/or Latino/a, and have a lower median household income compared to the city as a whole. Furthermore, according to a mobile services research study conducted by the New York City Consumer Affairs group, “banked smartphone users were more likely to have iPhones, while underbanked and unbanked smartphone users were more likely to have Android phones”. 

If Hands On is to claim that it is truly inclusive, accessible, and expressive of all voices, then the platform must consider compatibility as a fundamental tenet of the platform moving forward.

A large header with 2 screen mockups for Hands On