Artist Portal

Changing how Wizards of the Coast distributes, reviews, and ingests art assets from contributing artists.

Wizards of the Coast

UX / UI / UXR

Feb 2020 - Aug 2020

tl;dr
In this project, I cut 3-4 minute upload workflows to 5-10 secs and gave Wizards back 40 people hours a week. I redesigned how Wizards of the Coast (Wizards) interacts with artists. I walk through the project's moment of inception during another project, when I asked "Is this the right solution?." I explain how I designed a frictionless experience for artists to not only receive and send WIP art, but how I was able to create better workflows by cutting out unnecessary steps both for artists and Wizards Imaging team in the upload process.

Situation

During the discovery phase of another project to redesign Drake (see Wizards Asset Manager) my college and I noticed a large amount of time was being wasted on work in progress (WIP) workflows between art directors and artists. When asked about it, art directors spoke about how the companies use of a Hasbro software called "BLAST!" to share encrypted files was too cumbersome and complex for artists and how hard it was to maintain consistent communication through long email chains and that could get lost or broken. Further inquiry uncovered a laborious workflow requiring:

Artists had to use complex naming conventions.
Artists had to struggle through using Blast! to email their artwork.
A Wizard's Image Tech then had to download the high res art from email.
Downscale the art to fit current system requirements.
Then upload the new asset into Wizard's asset manager Drake.

Wizards commissions more the 6,000 pieces of art a year just between Magic the Gathering (MTG) and Dungeons and Dragons (D&D). This workflow costs Wizards 40 people hours a week and started causing projects to slip and deadlines to run over. The Imaging department had to create shifts where techs would only download and upload art so they could keep up with their work. So, I asked the question, "Is this the right solution? Should we be creating a new asset manager first?" and the answer was no.

Task

Create a system where artists are able to receive art commission details and upload their art to a Wizard's asset database called Drake so that they can continue working.

Actions

Design Philosophies

This project started with design philosophies. By using these as a guiding light, I set the tone while also laying down a set of standards to grade my work against. If a decision was made that didn't fit these guides, it shouldn't be in the designs.These were born from high level business goals and UX best practices with major stakeholders, the product owner, and the engineering team.
‍

Communication-based Platform
Minimize errors. Facilitate the passing of info seamlessly (too many emails required).
‍
Self-service/ Flexible/ Agnosticism
Support New & Any IP. Support new processes on-the-fly
‍
Clarity
Accessible, intuitive. (Filter controls are too narrow. They require exact data entry)
‍
Task oriented
What do I need to do next?
‍

These guidelines spanned both this project and the Wizard Asset Manager.

Personas

My second guiding light was the creation of personas. Due to time restraints, I created two personas, one for art directors, and one for artists. For discovery, I was paired with another UX designer to interviewed six art directors and three artists. Based on those conversations, I was able to give my personas, Gonzalo - Artist and Alicia - Art Director life through their background work, goals, frustrations, and desires. Gonzalo was primary user while Alicia was used as a tertiary user whom our primary would rely on for help. These gave me the ability to ask myself what they would want, instead of what would I want.
‍

Req's and User Flow Diagramming

After creation of the design philosophies and personas, I helped the product owner build a requirements (req) doc and then helped with the creation the first workflow diagram that was being built by another UX Designer. The req's doc was built using the Gonzalo - Artist persona to help get an understanding of the minimum viable product we could produce to ensure success for him. These design artifacts gave me the best idea of what functions and pages we would need to build for the Artist Portal. It also helped communicate with our dev team our exact thoughts on what needed to be built on their side.

Mood Board

After the design philosophies, personas, reqs doc, and early user flow ideas were well in hand, I started working on the visual design. I used these key parameters to help guide my search for visual design inspiration:

Simple UI
Product showcase
Soft or medium gray color scheming

I scoured Behance, Dribbble, and other design inspiration sites to create a mood board. This inspiration piece helped define and communicate the visual language and direction I would follow for this project and was present during most if not all of the visual design and critique sessions.

White-boarding the Dashboard page

Now that I had my design philosophies, Req's doc, user flow, and mood board, I was ready to start white-boarding ideas for the main Dashboard page. This page was meant to house all of Gonzalo's art commissions, organized into their unique purchase orders (PO). Each PO would be a bucket that held each piece of art with pertinent information such as:

Thumbnail
Art status
Art title
Art ID
Due dates
Communication of status

During my white-boarding sessions, I involved both devs and major stakeholders to ensure direction and confidence in the designs. I added upload art to Wizards dashboard which would alleviate any need for artists to deal with Blast! or any filename restrictions that could cause blockages in later workflows for art directors or imaging staff.

Mockups - Dashboard

Once I had ensured a path forward, I began creating mockups. I chose dark mode to reduce eye strain and to help showcase art. I chose a blue/green/gray color scheme to denote the differences in art status of Sketch/Final/Complete. This scheme switched between a bright version to a darker version to alert the artist to information that was either new or old.

I had many critique sessions as I iterated through my designs. The critique sessions was run by giving my UX team a short prompt and user story followed by myself leaving the room so they could talk amongst themselves for 10 minutes. When I returned, they went through their list of critiques and feedback while I listened.

I had many critique sessions as I iterated through designs. In these critique sessions, I gave my UX team a short prompt and user story and allowed them to speak freely amongst themselves by leaving the room for about 10 minutes. After which they would share a list of critiques and feedback. Because of the team makeup of three early career UX designers, I found that this structure made the most sense because of an inherent instinct to protect each other. It allowed them to say things like, "this is shit" instead of "it fine" or "it seems ok" and then be able to workout together what a good fix might be.

‍

The main critiques during these sessions were about finding ways to soften the visual style. For iterations one and two, my colleagues found the white boxes proclaiming statuses too loud. For the final iteration, the round color key was made square to better connect to the art cards below, and the size of page header decreased to make it less prominent.

A word on Approvals

Between each project milestone step, I like to do a round of approvals. I start with seeking approvals from my team of UX Designers, the devs I am working with, the project manager/owner, and if time allows I try to sit with any stakeholders to give updates on progress and direction. These approval steps are a way to not only make sure the project stays on track, but also helps everyone feel involved in the design of the project.

Hand off - Dashboard

Upon completion of the dashboard mockups, I created hand off docs for my dev team to start consuming. I provided not just screens but some annotated call outs, a short user statement, the jira ticket links for all spec details, a short description, and the persona that I did my work from. All this extra info was to help the devs understand how I came to the UX and interface decisions. This helped the devs find empathy for the user and gave them more of a stake in making sure we as a team were successful.

Rinse & Repeat, White-boarding the Art Details Page

After finishing the dashboard layouts and mockups I started the process again. I began white-boarding the art and commission details. Being an art-focused page, I decided to make sure that there was very little color on screen that did not come from the uploaded art. Where the dashboard had large bright coloring for communicating statuses, the art details page had muted gray a background and one small colored box to denote art status. This not only gave art the primary focus but allowed the artist to view the art and check it without distraction one last time before moving on.

Nothing ever goes to plan

Even though I try to do approvals, sometimes things get through. Originally, the Artist Portal was meant to be a multipage website. Unfortunately, the devs had planned for a single page site which created a bit of frustration during the project. So we went back through the designs together and decided as a team that a one page site would be acceptable and moved forward. I went back to the whiteboard to work out how to make two pages into one. I came up with a T-shaped layout that slid down from the top. I created a short gif to communicate the site layout to give the devs a better understanding into what I was thinking. They agreed with the new layout and we moved forward.

Mockups - Art Details

After I had a solid idea of what the layout should be, I started creating mockups. I began playing with the different UI’s based on the mood boards. From my personas, req's doc, and diagraming I had a good list of needs and requirements. I made sure to allow enough room for the art to dominate the screen and gave textual information about 1/3 of the screen space. I created 3 versions of the UI and gathered my other UX team members for a critique session.

Changing Critique for Covid

Since this project began right before Covid-19 changed how we worked, I had to learn how to critique designs remotely mid project. I opted for Miro, and set to learning how best to use it. I prompted my team with the feedback I was looking for and the user story

“You are an artist who has uploaded the next iteration of art to your art director. You want to make sure it is the right art with the right information to double check your sanity.”

I then left the meeting for 20 mins to allow for a safe discussion between my teammates. This let them say things they may not say in front of me in fear of hurting any feelings. Afterwards, I rejoined the group, I answered any outstanding questions and took their critique and feedback.

Hand off - Art Details

Upon completion of the Art Details mockups, I created hand off docs once again. I provided not just screens but some annotated call outs, a short user statement, the jira ticket links for all spec details, a short description. All this extra info was to help the devs understand how I came to the UX and interface decisions. This helped the devs find empathy for the user and gave them more of a stake in making sure we as a team were successful.

Testing

Due to time restraints on the business side, stakeholder side, and our dev cycles, we were able to run one testing cycle after deployment. This test was conducted using D&D's product photo workflows. The system was intended for artists who ran 4-6 art commissions consisting of 1-3 pieces of art per quarter. Their upload time was usually around 3 to 4 minutes per upload when having to deal with Blast! and then emailing assets. Using the Artist Portal where they only had to upload from the site, D&D's participant artist was able to upload 120 pieces of art to Wizard's databases in a matter of moments, with each upload only taking 5-10 seconds. The participant was able to use the system without instruction or prompting in anyway.

Results

By providing self service to commission details and asset uploading straight to Wizard's asset databases this project was able to:

Cut upload workflow times from 3-4 mins per upload to 5-10 seconds.
Cut out the use of the complicated encryption software Blast!.
Give the Wizard's Imaging team back 40 people hours a week by removing the need to download hi-res images, prepare them, and then upload them to the database.
Created one space for all art commission information and reference materials instead of having that information live in long or broken email chains.

Despite these results, the Artist Portal is waiting for further leadership support. Currently (April 2022), the Artist Portal has had little to no use by its intended audiences. Interviewing art directors and other Wizards employees has uncovered that due to their enormous workloads, complicate workflows, and key work arounds they use in their daily work, it has been seen that, out of fear, it is has been too hard to move to a new system that might upend their work and deadlines and this project will most likely be sunset.