HitRECord workflow redesign

Strategy, prototype For HitRECord
What I did:
  • User research on site, Facebook, Twitter
  • Personas
  • User testing
  • Ethnography
  • User interviews
  • User flows
  • Information architecture
  • Tree testing
  • Wireframes
  • "First click" tests
Researching, asking, ideating, designing, and testing how HitRECord.org might work better for its members, given its sudden drastic shift to producing TV episodes. Using user research and testing, my preliminary wireframes have achieved >80% task success with existing members.
Grayscale wireframe showing a general timeline above a video thumbnail, with a sidebar showing production news.
HitRECord's redesigned collaboration page focuses on communicating status, progress, and artistic needs.

Introduction

HitRECord.org is an open collaboration production company, combining the online efforts of 350,000 artists around the world to make short films, books, music, and most recently, TV shows.

Given its shifting project type, I sensed a huge opportunity to streamline workflow across the site, to make collaboration easier for the community artists across numerous active projects.

What I did

User research and personas

I started on the site itself, cataloguing what 150 members wrote about their relationship to hitRECord, and developed personas from that research.

Logging the approach and behavior of trailblazers, collaborators, sponges, and archivers.
Four persona types emerged from onsite and offsite research into the community.

I later started participating more in the site itself, interviewing members individually, speaking with them about their motivations and reasons for passionately participating on the site.

Strategy

From the extensive user research, I came to the following conclusion:

People come to hitRECord to have a safe space to share their artwork with others, and to make art together. Its strength is in being a safe space for artistic collaboration.

In affinity-diagramming the site features requested onsite, I found that most of the requests centered around improving workflow and findability. In addition, there was interest in direct community engagement, artistic growth, and using the site as a hub for official information.

A digital whiteboard showing numerous stickies, with large pink dots categorizing them into community engagement, being informed, artistic growth, streamline workflow, and findability.
The majority of site feature requests were about improving workflow and findability

User testing the existing workflow

I asked an acquaintance, who had seen “HitRECord on TV” but never been to the site, to do a user test for the current onboarding process. She had a lot of trouble navigating through the different projects and finding something she’d be interested in doing.

Screen capture with picture-in-picture of the participant in the corner of the video.
Participant doesn’t understand how she can contribute music if 'music' is a request but it doesn’t listed anywhere above the fold. She has to watch the entire video first and finds it inconvenient.

Workflow analysis

I then looked into existing workflows, and documented where I could see opportunities to encourage engagement in the community. Here’s one of the whiteboards:

Information architecture

After analyzing how the site was structured, I developed a new site structure. It’s very similar to the current system, except it organizes pages by task as well as by type.

Sitemap of the HitRECord site, emcompassing 7 navigation areas.
The new structure organizes by task as well as page type.

User testing of redesigned workflow

I performed a tree test on the new information architecture with 12 HitRECord members, and gleaned several important design insights from it.

Spreadsheet denoting participant responses in red, green, and yellow, with a color key.
Unfamiliarity with a 'Current production news' section means it should be shown earlier in the navigation tree, in multiple areas.

Sketches

With the structure determined, I sketched a few layouts for 3 key screens that would maximize communication of project information.

Wireframes, tested successfully for “first click”

I redesigned 3 key screens, and tested them with hitRECord members for specific tasks using “first click” tests. All of the screens performed successfully, above 80% success.

Grayscale wireframe showing a general timeline above a video thumbnail, with a sidebar showing production news.
The redesigned collaboration page focuses on communicating status, progress, and artistic needs
Grayscale wireframe showing a video/image dashboard, with several rows of featured video/image sections.
The redesigned dashboard displays more relevant information for the individual user
Grayscale wireframe showing body content to the right, with side navigation to the left.
Production news and official announcements take center stage in the new 'From HQ' section.

A few reactions from participants:

I loved it. Clear and informative!

Fresh, informative and resourceful.

EXTREMELY ORGANIZED OH MY GOD. Very clean and the interface is much more navigable. The options make it a whole lot welcoming to new artists.

Ideas to improve engagement

The screens above move the project management aspect of the site forward, but more streamlined browsing and communication systems, as well as mobile solutions, have yet to be sketched, wireframed, and tested.

I started ideating ways to encourage more community engagement, one of which is documented here: