Mockups of draftwerk
Mockups of draftwerk

draftwerk

Combining the logistics of online artistic collaboration

My Role
Timeline
Tools Used

UX Research & UI Design

11 weeks

Miro, Dovetail, Figma, Google Surveys & Meet

PROJECT OVERVIEW

Project Overview
Project Overview

Why do this?

What is it?

When is it used?

Who is it for?

draftwerk was conceived based off my own observations of the online collaboration process of which I am a power user, as a musician and video maker.

The need to simplify the cumbersome process of collaborating online was something that interested me, as I knew it would other creative collaborators.

Users for this digital product range from all kinds of creative people who take part in collaborative projects online. From musicians, to video makers, to podcasters.

The simple UI design has potential to appeal to various types of users, outside the initial user base which I conducted the research on.

They could use draftwerk for a variety of projects that could expand the user base, but the initial target users were creatives in the digital arts.

The online collaborative process varies from each user, though a service like draftwerk would be used at all stages from the inception of the project, and can be used to store and track iterations of projects right though to completion.

draftwerk is a desktop app that allows users to consolidate the organisation of their online artistic collaborations such as file transferring, messaging capabilities and project management.

Defining The Challenge

This was my first project I did with Cyber Patio.


As an artist myself, I've noticed a problem which occurs during online collaboration.

The process I know all too well has its drawbacks. Getting files, updates and messages to collaborators and keeping on top of projects is a headache.


Most, even well organised, artistic collaborations are messy...


Let’s get everyone on the same page

RESEARCH

Research Questions

My questions to research. Made in Miro.

In needing to gather research for the project, I knew only so much about the habits of artists online. 


I needed to understand, out of all of the methods I knew peopled had for transferring files, was there a unified reason people picked their preferred one?

I also needed to see if there was a correlation between the features of various messaging services and their appeal to artists.

Initial Hypothesis


Due to the laborious, uninspiring nature of artistic project management;
Artists would benefit from online collaboration / communication services being consolidated.

Research Goals
First research goal
First research goal
Second research goal
Second research goal
Third research goal
Third research goal

Find out habits of online artistic collaboration

What, if any is the most popular messaging service and file transferring service amongst creatives?

What are artists needs when communicating, transferring files and collaborating online?

Trends!!

TheRiseOfTheIndie
Genre-Less Music & Playlists
Visual / Printed Albums
Lo Fi & Chill Music
Live Streaming Concerts

Men I Trust

Odd Future

Beyonce - Black is King 2020 / Lemonade 2016

Frank Ocean’s Magazine. “Boys Don’t Cry”

"The Lo-Fi Girl" from Chilled Cow

Chill Hop Music

The rise of indie trend
The rise of indie trend
Genre less music and playlists trend
Genre less music and playlists trend
Visual printed albums trend
Visual printed albums trend
Live Streaming trend
Live Streaming trend
Lofi Trend
Lofi Trend

Before I set out to accomplish these goals, I thought I’d have a look at some...

I also had a look at the competition after that to see how close some are to the idea I had in mind.

Competitor Research Graphic
Competitor Research Graphic
Competitors Research

Now that I had an idea of the market and the competitors,It was time to have a look at some...

USER RESEARCH!!

1 Survey,
20 participants,
14 questions
1 In Person Interview
4 Remote Interviews
Band Rehearsing
Band Rehearsing

Survey & Interview Insights

48%

say online communication can be done better

79%

of groups send ideas online

used a mixture of file transferring services

46%
55%

are part of a group

"Remembering the different tools to send files to different collaborators can be an issue"

Our survey says...

Adobe Audition is the most popular DAW

Premiere Pro is the most popular video editor

Google Drive is the most popular file transferring service

3 Insights from the 5 users interviewed...

Effects Rack
Effects Rack
#1 - Genuine Connection

All of the artists stress the importance of having a common goal with your collaborator and building chemistry together to fulfil the goal that is put in place at the start of the collaboration.

#2 - Needing Collaboration

Some artists stated that they need someone to keep them accountable, and to build the projects with one other. This need for others is at the core of all art, you want to share the experience.

#3 - Organisation Being Tricky

Keeping on top of the work while trying to communicate effectively with collaborators, being assertive and asking them for their input when needed and trying to keep them involved.

These were the 3 insights I decided to focus on for the design of this project.

”I would rather miss a week, than record with bad vibes”

Picture of Adrian
Picture of Adrian
Adrain, Podcaster

"The organisation, trying to communicate in that way where you preserve the relationship so you can get things done."

Sean, Video Maker
Picture of Sean
Picture of Sean

"Having someone to keep you accountable. Not only to the work and deadlines and such, but also in when you're communicating an idea, they keep you in check so you make the point and discuss it"

Dave, Musician / Podcaster
Picture of Dave
Picture of Dave

User Insights

Goals
Motivations
Frustrations

Create chemistry based on a common goal with collaborators

The social experience of being in a group, sharing and enjoying the experience of creating in the moment

Availability and reliability of certain collaborators

Takeaways

#1 The Rise of the DIY artist
#2 Easier for the Art
#3 Common Issues
#4 No Such Service Out There

The rise of DIY artists has been happening long before Covid.

Most of these artists manage their own projects using multiple services for file transferring and communication with collaborators.

Simplifying the online collaboration process is something that can take the hindrance away from artists and allow for more fluid, engaged collaborations.

Most struggle with reliability and availability of collaborators, and organisation, distribution of the workload of the collaborative process itself

There is no one simple service for artists to manage their projects, store files, and communicate.

RESEARCH ANALYSIS

In order to better understand this research, I created;

  • a Persona to add a personal feel to the information,

  • an Empathy Map to see where their emotions are on any given day, (which can be seen in the notion repository linked below)

  • and a User Journey Map to see the specific areas where pain points arise and see where I could benefit users best along that journey.

Persona
Persona for the project
Persona for the project

Based on the interviews/survey, I gathered together a persona. I was looking back on him throughout the entire product design process.

User Journey Map

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the service.

Thanks to the user journey map these states are now apparent and it's possible to prioritise the simplicity of the service to make it simple for people to contribute to the project.

Current User Journey Map
Current User Journey Map
Arrows leading to insights
Arrows leading to insights
#1 Project Communication -
#2 Project Communication -
Task Management -
Storage Capabilities -

Chat with collaborators and your group.

Comment on files and updates.

Storing files in your project and/or in folders

Task-box for managing progress

These are the pain points, along with the insights I obtained from my user research, that I will focus on for this solution I will be now begin designing...

Let’s goooooooooo!

Now, we design!
Starting with...

IDEATION

As part of the ideation process, we did a few exercises such as;

  • "How might we?",

  • "How, Now, Wow",

  • "Must, Should, Could, Won't",

  • "Why, How, What",

  • and wrote a "Value Proposition" to solidify the essential features and necessities of the project.

Ideation Session
Ideation Session

The Ideation sessions.. feat. My tutor, Margarita!

Why, How, What?
Why, How, What?
Sketches & Lofi Wireframes

In the beginning stages of sketching, I browsed the internet for inspiration and took note of some of the standards that come up for placement of features and the visual components.

sketches
sketches
Taskflow #1
Taskflow #1
Taskflow #2
Taskflow #2
Taskflow #1:
Taskflow #2:

Day in the life of a collaboration

Starting a collaboration from scratch

User flow #1
User flow #1
User flow #2
User flow #2
User Flow #1
User Flow #2
  1. Andrew opens the app and sees an update

  1. He listens to the file

  1. He comments on the file

  1. Updates the tasks

  1. Uploads his own file

  1. Andrew opens a new project

  1. He adds folders

  1. He opens the invite window

  1. Continues updating the project

Hi-Fidelity Wireframes
Hi Fidelity wireframes
Hi Fidelity wireframes

Here's what I Learned from this ideation stage

  • In the beginning stages of sketching, I browsed the internet for inspiration and took note of some of the standards that come up for placement of features and the visual components.

  • Wireframes, I will admit was where I struggled, as I wanted this to be a simple service it was a matter of production by reduction. I needed to familiarise myself with the standards of what I was seeing from my looking up of inspiration.

Don't bore us, get to the chorus!

THE SOLUTION!

Mockup of draftwerk
Mockup of draftwerk

draftwerk

A desktop app that combines the logistics online artistic collaboration such as file transferring, messaging capabilities and project management

If you're interested in seeing the full project take a look here!

Style Selection

The style and branding colour selection came seeing what fitted the feel and intention of use of the service, decided to go with the turquoise green after reading about it’s symbolism with creativity, zest and new life, definitely a good representative colour.

Style guide
Fonts
Colours
Icons
Buttons
Logo
Fonts
Fonts
Brand Colours
Brand Colours
Icons
Icons
Buttons
Buttons
draftwerk logo
draftwerk logo

USER TESTING

Testing Goals

In doing the usability tests, the goals were to...

  1. Validate the features of the designs, both conventional and specific to draftwerk, ie Project Manifesto, and see if they would benefit the artists current process of creating and collaborating.

  1. See if there was anything missing from the standards expected in a collaborative management software like draftwerk.

The testers were compiled through various facebook groups for independent musicians. The group was mostly male, in the future I would prioritise more diversity.

All the tests were done via a google meet chat with the prototype in Figma presentation view being sent to them and we discussing the software through screen sharing.

User Testing
User Testing
Fix #1 - Preview Page
Fix # 1 - Preview Page
Fix # 1 - Preview Page

One user commented a the need for a preview page for those who have not yet joined the service.

Fix #2 - Assigning Tasks


As they relied on this with other services to send collaborators files regardless if the collaborator had a profile or not. 


This could also entice potential users to join having seen the aesthetic of the service.

Another user stressed the importance of assigning certain users to tasks. 


In giving them a role, it democratises the projects and clearly distributes the workload.

Fix # 2 - Assigning Tasks
Fix # 2 - Assigning Tasks

CONCLUSIONS

After completing this project, I reflected on it to see the points which I found an aptitude in but more importantly to reflect on the areas I struggled and had to bare the climb of the learning curve, but it’s all part of the process

I found the interviewing stage very enjoyable, mostly in learning how to craft the correct questions to ask at the right time to generate as many insights as possible.

The areas which I found challenging were the wire framing and initially building of the UI stages. I would need to develop my eye for detail. As improvements took some time, patience, trial and error, and a lot of help from my wonderful tutor. (thanks Margarita!)

Next Steps

This project is about a year old now, and after updating of the UI and case study over a few iterations, I do think of this as a very special project to me.

I would love to take next steps towards developing this into a full scale app to release. I’ve been chatting with a few developers about how I can make it happen and hopefully, I will be able to start in the coming months.

WATCH THIS SPACE!